header component cleanup, more syntax style tweaks

_src/_assets/styles/_page-guides.scss

@@ -39,20 +39,26 @@
     height: 100%;
 
     a {
+        @include color-overlay;
+        background-size: cover;
+        background-position: center;
         display: block;
         box-shadow: none;
-        background: $brand-main-blue-dark;
+        background-color: $brand-main-blue-dark;
         padding: $spacer * 2;
         height: 100%;
         border-radius: $border-radius;
 
+        &:before {
+            opacity: .9;
+        }
+
         &:hover,
         &:focus {
-            background: $brand-primary;
+            background-size: cover;
-
+            background-position: center;
-            * {
+            box-shadow: 0 2px 5px rgba($brand-main-blue-dark, .2);
-                color: $brand-main-blue-dark;
+            transform: translateY(-1px);
-            }
         }
     }
 
@@ -62,6 +68,12 @@
     }
 }
 
+.guide__title,
+.guide__tagline {
+    position: relative;
+    z-index: 1;
+}
+
 .guide__title,
 h1.guide__title {
     font-size: $font-size-h4;
@@ -111,3 +123,10 @@ li.toc-h2 {
 li.toc-h3 {
     display: none;
 }
+
+.header--guide {
+    .header__content {
+        padding-top: ($spacer * 5);
+        padding-bottom: ($spacer * 5);
+    }
+}

_src/_assets/styles/_sections/_section-blog.scss

@@ -21,7 +21,7 @@
 }
 
 .article__title {
-    @extend .h6, .transition;
+    @extend .h5, .transition;
     margin: 0;
     color: #fff;
     position: relative;

_src/_assets/styles/bigchain/_header.scss

@@ -5,14 +5,13 @@
 }
 
 .header__content {
-    padding: ($spacer * 3) 0;
+    padding: ($spacer * 4) 0;
     text-align: center;
 }
 
 // intro animation
 .header__title,
 .header__tagline,
-.header__description,
 .header__logo,
 .header__label {
     .wf-active &,
@@ -22,7 +21,7 @@
     }
 }
 
-.header__description,
+.header__tagline,
 .header__logo {
     .wf-active &,
     .wf-inactive & {
@@ -46,7 +45,9 @@
     margin: 0;
 }
 
-.header__tagline {
+.header__tagline,
-    font-size: $font-size-h3;
+h2.header__tagline {
-    color: #fff;
+    font-size: $font-size-h4;
+    font-weight: $font-weight-normal;
+    margin-top: $spacer;
 }

_src/_assets/styles/bigchain/_syntax.scss

@@ -1,5 +1,6 @@
 
 // https://github.com/mgyongyosi/OneDarkJekyll/blob/master/syntax-one-dark.css
+// highly modified
 
 /* stylelint-disable */
 .highlight pre {
@@ -7,6 +8,6 @@
     background-color: $code-bg;
 }
 
-.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#c678dd}.highlight .l{color:#98c379}.highlight .n{color:#abb2bf}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#c678dd}.highlight .kd{color:#c678dd}.highlight .kn{color:#c678dd}.highlight .kp{color:#c678dd}.highlight .kr{color:#c678dd}.highlight .kt{color:#c678dd}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#abb2bf}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#abb2bf}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}
+.highlight .hll{background:#282c34}.highlight .c{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:$brand-main-violet}.highlight .l{color:#98c379}.highlight .n{color:$code-color}.highlight .o{color:$code-color}.highlight .p{color:$code-color}.highlight .cm{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .cp{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .c1{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .cs{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:$brand-main-violet}.highlight .kd{color:$brand-main-violet}.highlight .kn{color:$brand-main-violet}.highlight .kp{color:$brand-main-violet}.highlight .kr{color:$brand-main-violet}.highlight .kt{color:$brand-main-violet}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:$code-color}.highlight .nl{color:#e5c07b}.highlight .nn{color:$code-color}.highlight .nx{color:$code-color}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}
 
 /* stylelint-enable */

_src/_assets/styles/bigchain/_variables.scss

@@ -113,7 +113,7 @@ $gutter-space:              ($spacer * 2) !default;
 //
 // Code
 //
-$code-color:                    $brand-main-gray-lighter !default;
+$code-color:                    $brand-main-gray-light !default;
 $code-bg:                       darken($gray-dark, 5%) !default;
 
 $kbd-color:                     $code-color !default;

_src/_guides/key-concepts-of-bigchaindb.md

@@ -2,8 +2,8 @@
 layout: guide
 
 title: Key concepts of BigchainDB
-description: Understand the transaction model of BigchainDB (identity, inputs, outputs, assets, transactions).
+tagline: Understand the transaction model of BigchainDB (identity, inputs, outputs, assets, transactions).
-image: image.jpg
+header: image.jpg
 ---
 
 - Introduction: How do we structure data?

_src/_guides/tutorial-car-telemetry-app.md

@@ -2,15 +2,15 @@
 layout: guide
 
 title: "Tutorial: Car Telemetry App"
-description: Learn how to build telemetry apps to track specific dynamic parameters of an asset.
+tagline: Learn how to build telemetry apps to track specific dynamic parameters of an asset.
-image: image.jpg
+header: photo4.jpg
 ---
 
 You will learn:
 
 - How BDB can be used to build telemetry apps to track specific dynamic parameters of an asset
 - How to make a `CREATE` transaction to create a car. Assets as representation of real objects.
-- How asset metadata is updated. In BDB is possible to use `TRANSFER` transactions to change the state of an asset, in this case the mileage of a car.
+- How asset metadata is updated. In BigchainDB it is possible to use `TRANSFER` transactions to change the state of an asset, in this case the mileage of a car.
 
 # Connect to IPDB
 

_src/_includes/header.html

@@ -0,0 +1,14 @@
+<header role="banner" class="header" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')" {%
+    endif %}>
+
+    {% include menu-main.html %}
+
+    <div class="row">
+        <div class="header__content">
+            <h1 class="header__title">{{ page.title }}</h1>
+            {% if page.tagline %}
+            <h2 class="header__tagline">{{ page.tagline }}</h2>
+            {% endif %}
+        </div>
+    </div>
+</header>

_src/_includes/sections/section-guides.html

@@ -10,9 +10,9 @@
             {% for guide in site.guides limit: 4 %}
             <div class="grid__col">
                 <article class="guide">
-                    <a href="{{ guide.url }}">
+                    <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/assets/img/{{ guide.header }}')" {% endif %}>
                         <h1 class="guide__title">{{ guide.title }}</h1>
-                        <p class="guide__description">{{ guide.description }}</p>
+                        <p class="guide__tagline">{{ guide.tagline }}</p>
                     </a>
                 </article>
             </div>

_src/_layouts/about.html

@@ -2,16 +2,7 @@
 layout: base
 ---
 
-<header role="banner" class="header" {% if page.image %}style="background-image:url('/assets/img/{{ page.image }}')"{% endif %}>
+{% include header.html %}
-
-    {% include menu-main.html %}
-
-    <div class="row">
-        <div class="header__content">
-            <h1 class="header__title">{{ page.title }}</h1>
-        </div>
-    </div>
-</header>
 
 <section role="main" class="content content--page">
 

_src/_layouts/guide.html

@@ -2,28 +2,13 @@
 layout: base
 ---
 
-<header role="banner" class="header" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')" {%
+{% include header.html %}
-    endif %}>
-
-    {% include menu-main.html %}
-
-    <div class="row">
-        <div class="header__content">
-            <h1 class="header__title">{{ page.title }}</h1>
-        </div>
-    </div>
-</header>
 
 <section role="main" class="content content--page content--guide">
-
     <div class="row content--page--markdown">
-        {% if page.description %}
-            <header class="section-header">
-                <p class="section-description">{{ page.description }}</p>
-            </header>
-        {% endif %}
 
         {{ content | toc }}
+
     </div>
 </section>
 
@@ -39,7 +24,7 @@ layout: base
                 {% unless page.id == guide.id %}
                     <div class="grid__col">
                         <article class="guide">
-                            <a href="{{ guide.url }}">
+                            <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/assets/img/{{ guide.header }}')" {% endif %}>
                                 <h1 class="guide__title">{{ guide.title }}</h1>
                             </a>
                         </article>

_src/_layouts/page.html

@@ -2,20 +2,7 @@
 layout: base
 ---
 
-<header role="banner" class="header" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')"{% endif %}>
+{% include header.html %}
-
-    {% include menu-main.html %}
-
-    <div class="row">
-        <div class="header__content">
-            {% if page.tagline %}
-                <h1 class="header__tagline">{{ page.tagline }}
-            {% else %}
-                <h1 class="header__title">{{ page.title }}</h1>
-            {% endif %}
-        </div>
-    </div>
-</header>
 
 <section role="main" class="content content--page">
 

_src/_layouts/partner.html

@@ -7,16 +7,7 @@ cta:
     button: Learn More
 ---
 
-<header role="banner" class="header header--partner" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')"{% endif %}>
+{% include header.html %}
-
-    {% include menu-main.html %}
-
-    <div class="row">
-        <hgroup class="header__content">
-            <h1 class="header__title">{{ page.title }}</h1>
-        </hgroup>
-    </div>
-</header>
 
 <section role="main" class="section content content--page content--partner">
 

_src/guides.html

@@ -2,24 +2,18 @@
 layout: page
 
 title: Guides
-
+tagline: "These guides explain you how to get started and build apps with BigchainDB/IPDB"
-js: page-guides.min.js
 ---
 
 <section class="section section--guides">
-    <div class="row">
-        <header class="section-header">
-            <p class="section-description">These guides explain you how to get started and build apps with BigchainDB/IPDB</p>
-        </header>
-    </div>
     <div class="row row--wide">
         <div class="grid grid--full grid-small--half grid--gutters">
             {% for guide in site.guides %}
                 <div class="grid__col">
                     <article class="guide">
-                        <a href="{{ guide.url }}">
+                        <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/assets/img/{{ guide.header }}')" {% endif %}>
                             <h1 class="guide__title">{{ guide.title }}</h1>
-                            <p class="guide__description">{{ guide.description }}</p>
+                            <p class="guide__tagline">{{ guide.tagline }}</p>
                         </a>
                     </article>
                 </div>