1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00

new footer, fixes #40

This commit is contained in:
Matthias Kretschmann 2016-02-14 02:16:02 +01:00
parent 6f42576f55
commit 1b2b97f21f
5 changed files with 99 additions and 34 deletions

View File

@ -1,16 +1,10 @@
.footer {
padding-top: $spacer;
padding-bottom: $spacer;
@extend .background--darker;
border-top: 1px solid $gray;
color: $gray-light;
}
.footer__copyright {
text-align: center;
&,
small {
@extend .mini;
.grid__col {
padding-bottom: 0;
}
}

View File

@ -17,7 +17,7 @@
.menu__link {
@extend .small;
display: inline-block;
padding: $spacer ($spacer / 2);
padding: ($spacer / 2);
text-transform: uppercase;
box-shadow: none;
@ -50,7 +50,8 @@
.menu__logo {
display: block;
margin-top: $spacer;
margin-top: ($spacer * 2);
margin-bottom: $spacer;
box-shadow: none;
@media ($screen-md) {
@ -99,37 +100,58 @@
// Footer Menu
//
.menu--footer {
.grid__col {
&:nth-child(2) {
margin-top: $spacer;
.menu__logo {
margin-bottom: $spacer;
&:hover,
&:focus {
.logo { fill: $brand-primary }
@media ($screen-sm) {
margin-top: 0;
}
}
}
.logo {
fill: $gray-light;
opacity: 1;
height: 9px;
.menu__logo {
margin-top: ($spacer / 3);
margin-bottom: 0;
}
.menu__link {
@extend .mini;
padding: ($spacer/2);
padding: ($spacer/3);
color: $gray-light;
// link line
&:after {
background: $brand-primary;
@media ($screen-sm) {
display: block;
text-align: left;
}
&:first-child { padding-left: 0; }
&:last-child { padding-right: 0; }
// hide link line
&:after { display: none; }
&:hover,
&:focus,
&.active { color: $brand-primary; }
}
.footer__copyright {
text-align: center;
display: block;
margin-top: $spacer;
@media ($screen-sm) {
text-align: left;
margin-bottom: -($spacer * 2);
}
.menu__link {
display: inline-block;
text-transform: none;
}
&,
small,
.menu__link {
@extend .mini;
color: $gray;
}
}
}

View File

@ -9,11 +9,23 @@ main:
- title: Docs
url: https://bigchaindb.readthedocs.org/
footer:
secondary:
- title: About
url: /about/
- title: Contact
url: /contact/
- title: Blog
url: https://medium.com/{{ site.medium }}
community:
- title: GitHub
url: https://github.com/{{ site.github.org }}
- title: Twitter
url: https://twitter.com/{{ site.twitter }}
- title: Google Group
url: https://groups.google.com/forum/#!forum/{{ site.googlegroup }}
legal:
- title: Terms
url: /terms/
- title: Privacy

View File

@ -1,10 +1,8 @@
<footer class="footer" role="contentinfo">
<footer class="footer section" role="contentinfo">
<div class="row row--wide">
{% include menu-footer.html %}
<p><small>&copy; {{ site.time | date: "%Y" }} ascribe GmbH</small></p>
</div>
</footer>

View File

@ -1,6 +1,16 @@
<nav class="menu menu--footer">
<div class="grid grid--full grid-medium--half">
<div class="grid grid--full grid-small--fit">
<div class="grid__col">
<a class="menu__logo" href="/">
<svg class="logo logo--sm logo--white--green" aria-labelledby="title">
<title>Logo</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg>
</a>
</div>
<div class="grid__col">
{% for link in site.data.menus.main %}
@ -15,7 +25,7 @@
</div>
<div class="grid__col">
{% for link in site.data.menus.footer %}
{% for link in site.data.menus.secondary %}
{% assign active = nil %}
{% if page.url contains link.url %}
@ -26,6 +36,35 @@
{% endfor %}
</div>
<div class="list-unstyled grid__col">
{% for link in site.data.menus.community %}
{% assign active = nil %}
{% if page.url contains link.url %}
{% assign active = 'active' %}
{% endif %}
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</div>
</div>
<small class="footer__copyright">
&copy; {{ site.time | date: "%Y" }} ascribe GmbH
{% for link in site.data.menus.legal %}
{% assign active = nil %}
{% if page.url contains link.url %}
{% assign active = 'active' %}
{% endif %}
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</small>
</nav>