spacing, typography & layout tweaks

_src/_assets/images/nosprite/starbase-guides.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1188" height="281" viewBox="0 0 1188 281">
-  <g fill="none" fill-rule="evenodd">
+  <g fill="none" fill-rule="evenodd" opacity=".7">
     <polygon fill="#5D6F82" points="1188 73.5 0 73.5 0 0 1188 0" transform="translate(0 206)"/>
     <g transform="translate(46.883 .18)">
       <path fill="#093749" d="M51.0810302,279 C30.9357077,262.19217 20.8630464,253.788255 20.8630464,253.788255 C20.8630464,253.788255 44.3381201,253.819672 91.2882674,253.882507 L120.590004,279 L51.0810302,279 Z" opacity=".2" transform="matrix(-1 0 0 1 141.453 0)"/>

_src/_assets/styles/_page-guides.scss

@@ -11,6 +11,11 @@
         @extend .row--wide;
     }
 
+    .header__content {
+        padding-top: ($spacer * 5);
+        padding-bottom: ($spacer * 5);
+    }
+
     .header__tagline {
         @media ($screen-sm) {
             max-width: 40rem;
@@ -20,6 +25,13 @@
     }
 }
 
+.header--guide {
+    .header__content {
+        padding-top: ($spacer * 5);
+        padding-bottom: ($spacer * 5);
+    }
+}
+
 .content--guide {
     .content--page--markdown {
         padding-top: $spacer * 4;
@@ -45,13 +57,12 @@
 
         h2 {
             font-size: $font-size-h4;
-            margin-bottom: ($spacer * 2);
+            margin-top: ($spacer * 2.5);
-            margin-top: ($spacer * 2);
         }
 
         h3 {
             font-size: $font-size-base;
-            font-weight: $font-weight-bold;
+            font-weight: $font-weight-normal;
             color: #fff;
             margin-bottom: $spacer;
             margin-top: ($spacer * 2);
@@ -79,6 +90,13 @@
 
 .section--guides-more {
     padding-top: 0;
+    background: url('../img/nosprite/starbase-guides.svg') no-repeat center bottom;
+    background-size: contain;
+    padding-bottom: 25%;
+
+    .grid {
+        margin-top: -($spacer * 3);
+    }
 }
 
 .guide {
@@ -120,7 +138,8 @@
         margin-bottom: 0;
     }
 
-    .section--guides & {
+    .section--guides &,
+    .section--guideslist & {
         margin-bottom: $spacer * 2;
 
         a {
@@ -200,13 +219,6 @@ li.toc-h3 {
     display: none;
 }
 
-.header--guide {
-    .header__content {
-        padding-top: ($spacer * 5);
-        padding-bottom: ($spacer * 5);
-    }
-}
-
 .section--getstarted {
     padding-bottom: 0;
 

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

@@ -12,7 +12,7 @@
     .faq__question {
         border-bottom: 2px solid $brand-main-blue-light;
         padding-bottom: $spacer;
-        margin-bottom: ($spacer * 2);
+        margin-bottom: ($spacer * 1.5);
         margin-top: ($spacer * 3);
         position: relative;
 

_src/_assets/styles/bigchain/_variables.scss

@@ -60,7 +60,7 @@ $line-height:               1.5 !default;
 
 $headings-font-family:      inherit !default;
 $headings-font-weight:      $font-weight-light !default;
-$headings-line-height:      1.3 !default;
+$headings-line-height:      1.2 !default;
 $headings-color:            $brand-main-blue-light !default;
 
 

_src/_includes/header.html

@@ -1,4 +1,4 @@
-<header role="banner" class="header header--{{ page.url | replace: '/','' }}"
+<header role="banner" class="header header--{{ page.url | replace: '/','' }} header--{{ page.layout }}"
     {% if page.header %}
         {% if page.path contains '_guides' %}
         style="background-image:url('../{{ page.header }}')"

_src/_layouts/guide.html

@@ -43,7 +43,7 @@ layout: base
         </div>
     </div>
     <div class="row text-center">
-        <a class="btn btn-secondary" href="/guides/">All guides</a>
+        <a class="btn btn-primary" href="/guides/">All guides</a>
     </div>
 </section>
 

_src/guides.html

@@ -7,21 +7,17 @@ image: share-image-guides.png
 ---
 
 <section class="section section--guideslist">
-    <div class="row row--wide">
+    <div class="row">
-        <div class="grid grid--full grid-small--half grid--gutters">
         {% assign guides = site.guides | sort: 'order' %}
         {% for guide in guides %}
-                <div class="grid__col">
             <article class="guide">
                 <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('./{{ guide.header }}')" {% endif %}>
                     <h1 class="guide__title">{{ guide.title }}</h1>
                     <p class="guide__tagline">{{ guide.tagline }}</p>
                 </a>
             </article>
-                </div>
         {% endfor %}
     </div>
-    </div>
 </section>
 
 <section class="section section--getstarted background--darker">