menu/header/hero refactor, new row--wide

_src/_assets/styles/bigchain.scss

@@ -27,6 +27,7 @@
 @import 'bigchain/_alerts';
 @import 'bigchain/_code';
 @import 'bigchain/_syntax';
+@import 'bigchain/_hero';
 @import 'bigchain/_header';
 @import 'bigchain/_footer';
 @import 'bigchain/_team';

_src/_assets/styles/bigchain/_footer.scss

@@ -1,8 +1,18 @@
 
 .footer {
-    @extend .small;
     padding-top: $spacer;
     padding-bottom: $spacer;
-    text-align: center;
+    border-top: 1px solid $gray-lightest;
     color: $gray-light;
 }
+
+.footer__copyright {
+    &,
+    small {
+        @extend .mini;
+    }
+
+    @media ($screen-md) {
+        text-align: right;
+    }
+}

_src/_assets/styles/bigchain/_grid.scss

@@ -36,12 +36,16 @@
 }
 
 .row {
-    max-width: 45em;
+    max-width: $screen-md-min;
     margin: auto;
     padding-left: $gutter-space;
     padding-right: $gutter-space;
 }
 
+.row--wide {
+    max-width: 60rem;
+}
+
 
 //
 // Alignment per row

_src/_assets/styles/bigchain/_header.scss

@@ -1,6 +1,5 @@
 .header {
     position: relative;
-    padding-top: 60px; // space for absolute menu
 
     // background
     background: url('../img/photo1.jpg') no-repeat center bottom;

_src/_assets/styles/bigchain/_hero.scss

@@ -0,0 +1,109 @@
+//
+// Hero
+// ---
+// bigchain.io
+//
+
+$menu-height-md: 73px;
+
+.hero {
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+    text-shadow: 0 1px 0 rgba(0,0,0,.1);
+
+    .section {
+        @media ($screen-md) {
+            min-height: calc(100vh - #{$menu-height-md});
+        }
+    }
+
+    // background
+    background: url('../img/photo1.jpg') no-repeat center bottom;
+    background-size: cover;
+
+    // color overlay
+    &:before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-brown 100%);
+        opacity: .7;
+        z-index: 0;
+    }
+
+    .logo--full {
+        fill: #fff;
+        fill-opacity: .8;
+        margin: auto;
+        max-width: 31em;
+
+        @media ($screen-sm) {
+            margin-top: -$menu-height-md;
+            margin-bottom: ($spacer * 2);
+        }
+    }
+
+    .section-title {
+        color: #fff;
+        margin-bottom: $spacer;
+
+        &:after { display: none }
+    }
+
+    .btn {
+        color: #fff;
+        margin-top: ($spacer * 4);
+        opacity: .8;
+
+        &:hover,
+        &:focus { opacity: 1; }
+
+        // the caret
+        .icon {
+            width: 12px;
+            height: 12px;
+            stroke: #fff;
+            display: block;
+            margin: auto;
+        }
+    }
+
+    // intro animation
+    .logo--full,
+    .section-title,
+    .btn {
+        @extend .animation-slide-in-from-bottom;
+        animation-duration: 1s;
+        animation-fill-mode: backwards;
+    }
+
+    .logo--full {
+        animation-timing-function: $timing-default;
+    }
+
+    .section-title,
+    .btn {
+        @extend .animation-slide-in-from-bottom;
+        animation-play-state: paused;
+    }
+
+    .btn { animation-delay: .2s; }
+
+    &.is-ready {
+        .section-title,
+        .btn {
+            animation-play-state: running;
+        }
+    }
+}
+
+.hero__content {
+    position: relative;
+    z-index: 1;
+}

_src/_assets/styles/bigchain/_menus.scss

@@ -1,16 +1,56 @@
 
 .menu {
+    position: relative;
+    z-index: 10;
+
+    .grid__col {
+        text-align: center;
+
+        @media ($screen-md) {
+            text-align: left;
+
+            &:last-child { text-align: right; }
+        }
+    }
 }
 
 .menu__link {
     @extend .small;
     display: inline-block;
-    padding: $spacer;
+    padding: ($spacer * 1.5) $spacer;
     text-transform: uppercase;
+
+    // link line
+    &:after {
+        content: "";
+        height: 2px;
+        width: 30px;
+        background: #fff;
+        display: block;
+        margin: ($spacer / 3) auto 0 auto;
+        // hidden by default
+        transform: scale(0);
+        transform-origin: center;
+        transition: transform .2s ease-out;
+    }
+
+    &:hover,
+    &:focus,
+    &.active {
+        // show link line
+        &:after { transform: scale(1); }
+    }
 }
 
 .menu__logo {
     display: block;
+    margin-top: $spacer;
+
+    @media ($screen-md) {
+        display: inline-block;
+        margin-top: 0;
+    }
+
     svg {
         @extend .transition;
         fill: #fff;
@@ -29,47 +69,50 @@
 // in front page hero or page headers
 //
 .menu--main {
-    position: absolute;;
+    .menu__logo {
-    left: 0;
+        @media ($screen-md) {
-    right: 0;
+            padding: ($spacer/1.2) 0 ($spacer * 1.5) 0;
-    top: 0;
+        }
-    width: 100%;
+    }
-    z-index: 2;
-    height: 60px;
 
     .menu__link {
         color: #fff;
         opacity: .8;
 
-        // link line
-        &:after {
-            content: "";
-            height: 2px;
-            width: 30px;
-            background: #fff;
-            display: block;
-            margin: ($spacer / 3) auto 0 auto;
-            // hidden by default
-            transform: scale(0);
-            transform-origin: center;
-            transition: transform .2s ease-out;
-        }
-
         &:hover,
         &:focus,
         &.active {
             opacity: 1;
-
-            // show link line
-            &:after { transform: scale(1); }
         }
     }
 }
 
+
+//
+// Footer Menu
+//
 .menu--footer {
-    @extend .text-center;
+    .logo {
+        fill: $gray;
+        opacity: 1;
+        height: 9px;
+    }
 
     .menu__link {
+        @extend .mini;
         padding: $spacer ($spacer/1.5);
+        color: $gray;
+
+        // link line
+        &:after {
+            background: $link-color;
+        }
+
+        &:first-child { padding-left: 0; }
+        &:last-child { padding-right: 0; }
+
+        &:hover,
+        &:focus,
+        &.active { color: $link-color; }
     }
 }

_src/_assets/styles/bigchain/_variables.scss

@@ -77,9 +77,9 @@ $link-hover-color:          darken($link-color, 15%) !default;
 //
 // Responsive breakpoints
 //
-$screen-sm-min:             35em !default;
+$screen-sm-min:             35rem !default;
-$screen-md-min:             45em !default;
+$screen-md-min:             45rem !default;
-$screen-lg-min:             75em !default;
+$screen-lg-min:             70rem !default;
 
 $screen-sm:                 'min-width: #{$screen-sm-min}';
 $screen-md:                 'min-width: #{$screen-md-min}';

_src/_assets/styles/page-front.scss

@@ -4,114 +4,6 @@
 // bigchain.io
 //
 
-.hero {
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-    text-shadow: 0 1px 0 rgba(0,0,0,.1);
-    min-height: 100vh;
-
-    // background
-    background: url('../img/photo1.jpg') no-repeat center bottom;
-    background-size: cover;
-
-    // color overlay
-    &:before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        //background: $brand-main-brown;
-        background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-brown 100%);
-        opacity: .7;
-        z-index: 0;
-    }
-
-    .logo {
-        fill-opacity: .6;
-        margin: auto;
-        max-width: 28em;
-
-        @media ($screen-sm) {
-            margin-top: -($spacer * 6);
-            margin-bottom: ($spacer * 2);
-        }
-    }
-
-    .section-title {
-        color: #fff;
-        margin-bottom: $spacer;
-
-        &:after { display: none }
-    }
-
-    .btn {
-        color: #fff;
-        margin-top: ($spacer * 4);
-        opacity: .8;
-
-        &:hover,
-        &:focus { opacity: 1; }
-
-        // the caret
-        .icon {
-            width: 12px;
-            height: 12px;
-            stroke: #fff;
-            display: block;
-            margin: auto;
-        }
-    }
-
-    // intro animation
-    .logo,
-    .section-title,
-    .btn {
-        @extend .animation-slide-in-from-bottom;
-        animation-duration: 1s;
-        animation-fill-mode: backwards;
-    }
-
-    .logo {
-        animation-timing-function: $timing-default;
-    }
-
-    .section-title,
-    .btn {
-        @extend .animation-slide-in-from-bottom;
-        animation-play-state: paused;
-    }
-
-    .btn { animation-delay: .2s; }
-
-    &.is-ready {
-        .section-title,
-        .btn {
-            animation-play-state: running;
-        }
-    }
-}
-
-.hero__content {
-    position: relative;
-    z-index: 1;
-    margin-top: 60px; // space for absolute menu
-}
-
-.hero__comingsoon {
-    text-shadow: none;
-    display: block;
-    color: rgba($brand-main-blue-dark, .9);
-    margin-top: ($spacer * 2);
-    margin-bottom: ($spacer * 2);
-}
-
-
-
 .section-features {
     text-align: center;
     border-bottom: 1px solid lighten($brand-main-gray, 40%);

_src/_data/menus.yml

@@ -12,7 +12,7 @@ footer:
       url: /about/
     - title: Contact
       url: /contact/
-    - title: Terms of Service
+    - title: Terms
       url: /tos/
     - title: Privacy
       url: /privacy/

_src/_includes/footer.html

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

_src/_includes/menu-footer.html

@@ -1,14 +1,34 @@
 <nav class="menu menu--footer">
-    <div class="row">
+    <div class="grid grid--full grid-medium--half">
-        {% for link in site.data.menus.footer %}
+        <div class="grid__col">
+            <a class="menu__logo" href="/">
+                <svg class="logo logo--sm" aria-labelledby="title">
+                    <title>Logo</title>
+                    <use xlink:href="/assets/img/sprite.svg#logo"></use>
+                </svg>
+            </a>
+            {% for link in site.data.menus.main %}
 
-            {% assign active = nil %}
+                {% assign active = nil %}
-            {% if page.url contains link.url %}
+                {% if page.url contains link.url %}
-                {% assign active = 'active' %}
+                    {% assign active = 'active' %}
-            {% endif %}
+                {% endif %}
 
-            <a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
+                <a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
 
-        {% endfor %}
+            {% endfor %}
+        </div>
+        <div class="grid__col">
+            {% for link in site.data.menus.footer %}
+
+                {% assign active = nil %}
+                {% if page.url contains link.url %}
+                    {% assign active = 'active' %}
+                {% endif %}
+
+                <a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
+
+            {% endfor %}
+        </div>
     </div>
 </nav>

_src/_includes/menu-main.html

@@ -1,7 +1,7 @@
 <nav class="menu menu--main">
-    <div class="row">
+    <div class="row row--wide">
 
-        <div class="grid grid--full grid-small--fit grid--center">
+        <div class="grid grid--full grid-medium--half grid--center">
             <div class="grid__col">
                 <a class="menu__logo" href="/">
                     <svg class="logo logo--sm" aria-labelledby="title">

_src/index.html

@@ -6,11 +6,12 @@ front_page: true
 tagline:    'Meet Bigchain, the world’s most scalable blockchain'
 ---
 
-{% include menu-main.html %}
+<header class="hero">
 
-<header class="section hero">
+    {% include menu-main.html %}
-    <div class="row">
+
-        <div class="hero__content">
+    <div class="section">
+        <div class="hero__content row">
             <svg class="logo logo--full logo--white" aria-labelledby="title">
                 <title>BigchainDB</title>
                 <use xlink:href="/assets/img/sprite.svg#logo"></use>