mirror of https://github.com/status-im/consul.git
footer redesign
This commit is contained in:
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{
|
||||
#header{
|
||||
background-color: $purple;
|
||||
@include consul-gradient-bg();
|
||||
|
||||
.navbar-brand {
|
||||
.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) {
|
||||
#features{
|
||||
top: $large-negative-hero-margin;
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
|
||||
// Components
|
||||
@import "_header";
|
||||
@import '_footer';
|
||||
@import "_jumbotron";
|
||||
@import "_buttons";
|
||||
@import '_sidebar';
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@ $nav-margin-right: 12px;
|
|||
padding: 0;
|
||||
line-height: 22px;
|
||||
@include hashi-a-style-core();
|
||||
@include transition( color 0.3s ease );
|
||||
@include transition( all 0.3s ease );
|
||||
|
||||
&:hover{
|
||||
@include transition( color 0.3s ease );
|
||||
@include transition( all 0.3s ease );
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,3 +18,11 @@ $project-logo-pad-left: 8px;
|
|||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin project-footer-a-style{
|
||||
line-height: 30px;
|
||||
|
||||
&:hover{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="footer-links">
|
||||
<ul class="main-links nav navbar-nav rls-sb">
|
||||
<li class="li-under"><a href="/intro/index.html">Intro</a></li>
|
||||
<li class="active li-under"><a href="/docs/index.html">Docs</a></li>
|
||||
<li class="li-under"><a href="/community.html">Community</a></li>
|
||||
<li class="li-under"><a href="http://demo.consul.io/">Demo</a></li>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<ul class="footer-links nav navbar-nav">
|
||||
<li><a href="/intro/index.html">Intro</a></li>
|
||||
<li><a href="/docs/index.html">Docs</a></li>
|
||||
<li><a href="/community.html">Community</a></li>
|
||||
<li><a href="http://demo.consul.io/">Demo</a></li>
|
||||
<% 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 %>
|
||||
</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 class="footer-logo">
|
||||
<span></span>
|
||||
<div class="footer-hashi col-sm-6 col-xs-12">
|
||||
<div class="pull-right">
|
||||
<a class="hashicorp-project white" href="https://www.hashicorp.com">
|
||||
<span class="project-text">A </span>
|
||||
<%= partial "layouts/svg/svg-by-hashicorp" %>
|
||||
<span class="project-text">Project</span>
|
||||
<%= partial "layouts/svg/svg-hashicorp-logo" %>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-hashi os">
|
||||
<span>Copyright © <%= Time.now.year %>. A <a href="https://www.hashicorp.com">HashiCorp</a> Project.</span>
|
||||
<a class="hashi-logo" href="http://www.hashicorp.com"><%= image_tag 'footer-hashicorp-logo.png' %></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue