new footer, fixes #40

_src/_assets/styles/bigchain/_footer.scss

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

_src/_assets/styles/bigchain/_menus.scss

@@ -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;
+
+            @media ($screen-sm) {
+                margin-top: 0;
+            }
+        }
+    }
 
     .menu__logo {
-        margin-bottom: $spacer;
+        margin-top: ($spacer / 3);
-
+        margin-bottom: 0;
-        &:hover,
-        &:focus {
-            .logo { fill: $brand-primary }
-        }
-    }
-
-    .logo {
-        fill: $gray-light;
-        opacity: 1;
-        height: 9px;
     }
 
     .menu__link {
-        @extend .mini;
+        padding: ($spacer/3);
-        padding: ($spacer/2);
         color: $gray-light;
 
-        // link line
+        @media ($screen-sm) {
-        &:after {
+            display: block;
-            background: $brand-primary;
+            text-align: left;
         }
 
-        &:first-child { padding-left: 0; }
+        // hide link line
-        &:last-child { padding-right: 0; }
+        &: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;
+        }
+    }
 }

_src/_data/menus.yml

@@ -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

_src/_includes/footer.html

@@ -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>

_src/_includes/menu-footer.html

@@ -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>