consistent menu for front page & pages, new page headers

_src/_assets/styles/bigchain.scss

@@ -27,6 +27,7 @@
 @import 'bigchain/_alerts';
 @import 'bigchain/_code';
 @import 'bigchain/_syntax';
+@import 'bigchain/_header';
 @import 'bigchain/_footer';
 @import 'bigchain/_team';
 @import 'bigchain/_utilities';
@@ -38,3 +39,4 @@
 @import 'page-front';
 @import 'page-404';
 @import 'page-styleguide';
+@import 'page-about';

_src/_assets/styles/bigchain/_content-page.scss

@@ -1,36 +1,5 @@
 
-.page__header {
+.content--page {
-    position: relative;
-    
-    // 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;
-    }
-
-    padding: ($spacer * 4) 0;
-}
-
-.page__title {
-    text-align: center;
-    margin: 0;
-}
-
-.page__content {
     .row {
         > h2 {
             border-bottom: 1px solid $gray-lightest;

_src/_assets/styles/bigchain/_header.scss

@@ -0,0 +1,34 @@
+.header {
+    position: relative;
+    margin-bottom: ($spacer * 4);
+    padding-top: 60px; // space for absolute menu
+
+    // 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;
+    }
+}
+
+.header__title {
+    position: relative;
+    z-index: 1;
+    color: #fff;
+    text-align: center;
+    margin: 0;
+    padding: ($spacer * 4) 0;
+}

_src/_assets/styles/bigchain/_menus.scss

@@ -7,12 +7,33 @@
     padding: $spacer
 }
 
-.menu__logo svg { fill: #fff }
+.menu__logo {
+    display: block;
+    svg { fill: #fff }
+}
 
+
+//
+// Main menu overlaying a dark background image
+// in front page hero or page headers
+//
 .menu--main {
-    @extend .background--gray;
+    position: absolute;;
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+    border-bottom: 1px solid rgba(#fff, .2);
+    height: 60px;
 
-    .menu__link { color: #fff; }
+    .menu__link {
+        color: #fff;
+        opacity: .8;
+
+        &:hover,
+        &:focus { opacity: 1 }
+    }
 }
 
 .menu--footer {

_src/_assets/styles/bigchain/_typography.scss

@@ -47,6 +47,7 @@ textarea {
 // Links
 //
 a {
+    @extend .transition;
     color: $link-color;
     text-decoration: none;
 

_src/_assets/styles/bigchain/_variables.scss

@@ -46,7 +46,7 @@ $font-size-root-lg:         18px !default;
 
 $font-size-base:            1rem !default;
 $font-size-lg:              1.25rem !default;
-$font-size-sm:              0.875rem !default;
+$font-size-sm:              0.8rem !default;
 $font-size-xs:              0.65rem !default;
 
 $font-size-h1:              3rem !default;

_src/_assets/styles/page-front.scss

@@ -99,6 +99,7 @@
 .hero__content {
     position: relative;
     z-index: 1;
+    margin-top: 60px; // space for absolute menu
 }
 
 .hero__comingsoon {

_src/_includes/menu-main.html

@@ -1,21 +1,30 @@
 <nav class="menu menu--main">
     <div class="row">
-        <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 %}
+        <div class="grid grid--full grid-small--fit grid--center">
+            <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>
+            </div>
 
-            {% assign active = nil %}
+            <div class="grid__col">
-            {% if page.url contains link.url %}
-                {% assign active = 'active' %}
-            {% endif %}
 
-            <a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
+                {% for link in site.data.menus.main %}
 
-        {% endfor %}
+                    {% 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>
     </div>
 </nav>

_src/_layouts/base.html

@@ -13,8 +13,6 @@
         </div>
         <![endif]-->
 
-        {% include menu-main.html %}
-        
         {{ content }}
 
         {% include footer.html %}

_src/_layouts/page.html

@@ -2,13 +2,16 @@
 layout: base
 ---
 
-<header role="banner" class="page__header">
+<header role="banner" class="header">
+
+    {% include menu-main.html %}
+
     <div class="row">
-        <h1 class="page__title">{{ page.title }}</h1>
+        <h1 class="header__title">{{ page.title }}</h1>
     </div>
 </header>
 
-<section role="main" class="page__content">
+<section role="main" class="content content--page">
     <div class="row">
 
         {{ content }}

_src/index.html

@@ -4,6 +4,8 @@ layout: base
 front_page: true
 ---
 
+{% include menu-main.html %}
+
 <header class="section hero">
     <div class="row">
         <div class="hero__content">
@@ -27,7 +29,7 @@ front_page: true
         </header>
 
         <figure>
-            <img class="img__responsive" src="/assets/img/graph.png" width="672" height="226">
+            <img class="img--responsive" src="/assets/img/graph.png" width="672" height="226">
         </figure>
 
         <div class="grid grid--full grid-small--fit grid--gutters">