mirror of https://github.com/hashicorp/consul
footer redesign
captainill
parent
a624546993
commit
f96c4d0b50
|
|
@ -0,0 +1,140 @@
|
||||||
|
#footer{
|
||||||
|
padding: 64px 0;
|
||||||
|
// @include consul-gradient-bg();
|
||||||
|
background-color: $black;
|
||||||
|
|
||||||
|
.footer-links{
|
||||||
|
li{
|
||||||
|
&.edit{
|
||||||
|
a{
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
@include hashi-a-style();
|
||||||
|
@include project-a-style();
|
||||||
|
@include project-footer-a-style();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-right{
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-hashi{
|
||||||
|
font-size: 14px;
|
||||||
|
color: $black;
|
||||||
|
|
||||||
|
a{
|
||||||
|
color: $black;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hashicorp-project{
|
||||||
|
display: inline-block;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&.white{
|
||||||
|
color: white;
|
||||||
|
svg{
|
||||||
|
path,
|
||||||
|
polygon{
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
line{
|
||||||
|
stroke: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
svg{
|
||||||
|
&.svg-by{
|
||||||
|
line{
|
||||||
|
stroke: $purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
font-family: $header-font-family;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
span,
|
||||||
|
svg{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg{
|
||||||
|
&.svg-by{
|
||||||
|
width: $by-hashicorp-width;
|
||||||
|
height: $by-hashicorp-height;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
margin-left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.svg-logo{
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-bottom: -10px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
path,
|
||||||
|
line{
|
||||||
|
fill: $black;
|
||||||
|
@include transition(all 300ms ease-in);
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
@include transition(all 300ms ease-in);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#footer{
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.footer-links{
|
||||||
|
float: none;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-hashi {
|
||||||
|
float: none;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
.pull-right{
|
||||||
|
float: none !important;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 414px) {
|
||||||
|
#footer{
|
||||||
|
.footer-links{
|
||||||
|
li{
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
body.page-sub{
|
body.page-sub{
|
||||||
#header{
|
#header{
|
||||||
background-color: $purple;
|
@include consul-gradient-bg();
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
.logo{
|
.logo{
|
||||||
|
|
|
||||||
|
|
@ -127,37 +127,6 @@ body.page-home{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#footer{
|
|
||||||
background-color: $consul-footer-gray;
|
|
||||||
background: $consul-footer-gray image-url('consul-footer-logo.png') center center no-repeat;
|
|
||||||
@include img-retina("consul-footer-logo.png", "consul-footer-logo@2x.png", 446px, 443px);
|
|
||||||
|
|
||||||
.footer-links{
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-hashi{
|
|
||||||
letter-spacing: 2px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
|
|
||||||
a{
|
|
||||||
font-weight: $font-weight-museo-xb;
|
|
||||||
}
|
|
||||||
|
|
||||||
span{
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
display: inline-block;
|
|
||||||
width: 37px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
#features{
|
#features{
|
||||||
top: $large-negative-hero-margin;
|
top: $large-negative-hero-margin;
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
@import "_header";
|
@import "_header";
|
||||||
|
@import '_footer';
|
||||||
@import "_jumbotron";
|
@import "_jumbotron";
|
||||||
@import "_buttons";
|
@import "_buttons";
|
||||||
@import '_sidebar';
|
@import '_sidebar';
|
||||||
|
|
|
||||||
|
|
@ -30,10 +30,10 @@ $nav-margin-right: 12px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
@include hashi-a-style-core();
|
@include hashi-a-style-core();
|
||||||
@include transition( color 0.3s ease );
|
@include transition( all 0.3s ease );
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
@include transition( color 0.3s ease );
|
@include transition( all 0.3s ease );
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,3 +18,11 @@ $project-logo-pad-left: 8px;
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin project-footer-a-style{
|
||||||
|
line-height: 30px;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,30 @@
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="footer-links">
|
<div class="row">
|
||||||
<ul class="main-links nav navbar-nav rls-sb">
|
<div class="col-sm-6 col-xs-12">
|
||||||
<li class="li-under"><a href="/intro/index.html">Intro</a></li>
|
<ul class="footer-links nav navbar-nav">
|
||||||
<li class="active li-under"><a href="/docs/index.html">Docs</a></li>
|
<li><a href="/intro/index.html">Intro</a></li>
|
||||||
<li class="li-under"><a href="/community.html">Community</a></li>
|
<li><a href="/docs/index.html">Docs</a></li>
|
||||||
<li class="li-under"><a href="http://demo.consul.io/">Demo</a></li>
|
<li><a href="/community.html">Community</a></li>
|
||||||
|
<li><a href="http://demo.consul.io/">Demo</a></li>
|
||||||
<% if current_page.url != '/' %>
|
<% if current_page.url != '/' %>
|
||||||
<li class="li-under"><a href="<%= github_url :current_page %>">Edit this page</a></li>
|
<li class="edit"><a href="<%= github_url :current_page %>">Edit this page</a></li>
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul class="buttons nav navbar-nav rls-sb">
|
|
||||||
<li class="first download outline-btn purple"><a href="/downloads.html">Download</a></li>
|
|
||||||
<li class="github outline-btn purple"><a href="https://github.com/hashicorp/consul">GitHub</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-logo">
|
<div class="footer-hashi col-sm-6 col-xs-12">
|
||||||
<span></span>
|
<div class="pull-right">
|
||||||
</div>
|
<a class="hashicorp-project white" href="https://www.hashicorp.com">
|
||||||
<div class="footer-hashi os">
|
<span class="project-text">A </span>
|
||||||
<span>Copyright © <%= Time.now.year %>. A <a href="https://www.hashicorp.com">HashiCorp</a> Project.</span>
|
<%= partial "layouts/svg/svg-by-hashicorp" %>
|
||||||
<a class="hashi-logo" href="http://www.hashicorp.com"><%= image_tag 'footer-hashicorp-logo.png' %></a>
|
<span class="project-text">Project</span>
|
||||||
|
<%= partial "layouts/svg/svg-hashicorp-logo" %>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue