lots of spacing tweaks

_src/_assets/scss/_header.scss

@@ -1,4 +1,4 @@
-$edge-height: $spacer * 5;
+$edge-height: $spacer * 4;
 
 .header {
     background: $brand-05;

_src/_assets/scss/_hero.scss

@@ -1,8 +1,35 @@
+$edge-height-sm: $spacer * 2;
+$edge-height:    $spacer * 4;
+
 .hero {
-    background: $brand-03;
+    background: $brand-07;
     padding-top: $spacer * 2;
     padding-bottom: $spacer * 2;
-    min-height: 100vh;
+    min-height: calc(100vh - #{$edge-height-sm});
+    margin-bottom: $edge-height-sm;
+    position: relative;
+
+    @media ($screen-sm) {
+        min-height: calc(100vh - #{$edge-height});
+        margin-bottom: $edge-height;
+    }
+
+    &:after {
+        content: '';
+        width: 100%;
+        height: $edge-height-sm;
+        display: block;
+        position: absolute;
+        left: 0;
+        background: #b3d0da;
+        bottom: -($edge-height-sm);
+        clip-path: polygon(0 0, 100% 0, 100% 20%, 0% 100%);
+
+        @media ($screen-sm) {
+            height: $edge-height;
+            bottom: -($edge-height);
+        }
+    }
 
     &,
     .hero__title,
@@ -11,11 +38,28 @@
     }
 
     .menu--main {
-        background: transparent;
+        background: $brand-03;
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
+
+        &:after {
+            content: '';
+            width: 100%;
+            height: $edge-height-sm;
+            display: block;
+            position: absolute;
+            left: 0;
+            background: $brand-03;
+            bottom: -($edge-height-sm);
+            clip-path: polygon(100% 0, 0 0, 0 100%);
+
+            @media ($screen-sm) {
+                height: $edge-height;
+                bottom: -($edge-height);
+            }
+        }
     }
 
     .menu__link {

_src/_assets/scss/_logo.scss

@@ -15,7 +15,7 @@
 // Color modifiers
 //
 .logo--white {
-    color: #fff;
+    fill: #fff;
 }
 
 .logo--dark {

_src/_assets/scss/_sections.scss

@@ -34,8 +34,12 @@
 
 .section__title {
     font-size: $font-size-h1;
+    margin-bottom: $spacer;
+
+    @media ($screen-sm) {
         margin-bottom: $spacer / 2;
     }
+}
 
 .section__description {
     font-size: $font-size-large;
@@ -46,33 +50,47 @@
 //
 // Section modifiers
 //
-$edge-height: $spacer * 5;
+$edge-height-sm: $spacer * 2;
+$edge-height:    $spacer * 4;
 
 .section--background {
     background: $brand-05;
     position: relative;
+    margin-top: $edge-height-sm;
+    margin-bottom: $edge-height-sm;
+
+    @media ($screen-sm) {
         margin-top: $edge-height;
         margin-bottom: $edge-height;
+    }
 
     &:before,
     &:after {
         content: '';
         width: 100%;
-        height: $edge-height;
+        height: $edge-height-sm;
         display: block;
         position: absolute;
         left: 0;
         background: $brand-05;
+
+        @media ($screen-sm) {
+            height: $edge-height;
+        }
     }
 
     &:before {
-        top: -($edge-height);
+        top: -($edge-height-sm);
         clip-path: polygon(100% 0, 0% 100%, 100% 100%);
     }
 
     &:after {
         top: auto;
-        bottom: -($edge-height);
+        bottom: -($edge-height-sm);
         clip-path: polygon(100% 0, 0 0, 0 100%);
+
+        @media ($screen-sm) {
+            bottom: -($edge-height);
+        }
     }
 }

_src/_assets/scss/page-front.scss

@@ -1,9 +1,12 @@
 @import 'variables';
 
 .feature {
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+
+    &:first-child {
         padding-top: $spacer * 2;
-    padding-bottom: $spacer * 2;
+    }
-    min-height: 235px;
 }
 
 .feature__image {
@@ -28,3 +31,17 @@
     font-size: $font-size-h3;
     margin-bottom: $spacer / 2;
 }
+
+.actions {
+    text-align: center;
+    margin-top: $spacer * 2;
+
+    .button:last-child {
+        margin-left: $spacer * 2;
+    }
+}
+
+.connect__title {
+    font-size: $font-size-h3;
+    margin-bottom: $spacer / 2;
+}

_src/_assets/scss/page-styleguide.scss

@@ -1 +1,11 @@
 @import 'variables';
+
+.page--styleguide {
+    .logo {
+        margin-bottom: $spacer;
+    }
+
+    .logo--white {
+        background: $brand-03;
+    }
+}

_src/index.html

@@ -23,11 +23,27 @@ css: page-front
 <section class="section section--intro">
     <div class="row">
         <header class="section__header">
+            <div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
+                <div class="grid__col grid__col--4">
                     <h1 class="section__title">{{ content.intro.title }}</h1>
                     <p class="section__description">{{ content.intro.description }}</p>
+                </div>
+                <div class="grid__col grid__col--2">
+
+                </div>
+            </div>
         </header>
 
+        <div class="grid grid--full grid-small--columns grid--center grid--gutters">
+            <div class="grid__col grid__col--4">
                 {{ content.intro.text | markdownify }}
+            </div>
+            <div class="grid__col grid__col--2">
+
+            </div>
+        </div>
+
+
 
         <section class="features">
             {% for feature in content.intro.features %}
@@ -51,8 +67,10 @@ css: page-front
             {% endfor %}
         </section>
 
+        <footer class="actions">
             <a class="hero__action button button--primary" href="{{ site.signup.link }}">{{ site.signup.button }}</a>
             <a href="" class="button button--text">Read IPDB Documentation</a>
+        </footer>
     </div>
 </section>
 
@@ -60,8 +78,15 @@ css: page-front
 <section class="section section--background section--foundation">
     <div class="row">
         <header class="section__header">
+            <div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
+                <div class="grid__col grid__col--4">
                     <h1 class="section__title">{{ content.foundation.title }}</h1>
                     <p class="section__description">{{ content.foundation.description }}</p>
+                </div>
+                <div class="grid__col grid__col--2">
+
+                </div>
+            </div>
         </header>
     </div>
     <div class="row">
@@ -105,11 +130,14 @@ css: page-front
             <p class="section__description">{{ content.connect.description }}</p>
         </header>
 
+        <div class="grid grid--full grid-small--half grid--gutters">
+            <div class="grid__col">
                 <div class="connect connect--blog">
                     <h2 class="connect__title">{{ content.connect.blog_title }}</h2>
                     <a href="https://blog.ipdb.io" class="button button--text">IPDB Blog</a>
                 </div>
-
+            </div>
+            <div class="grid__col">
                 <div class="connect connect--newsletter">
                     <h2 class="connect__title">{{ content.connect.newsletter_title }}</h2>
                 </div>
@@ -118,4 +146,7 @@ css: page-front
                     <h2 class="connect__title">{{ content.connect.social_title }}</h2>
                 </div>
             </div>
+        </div>
+
+    </div>
 </section>

_src/styleguide.md

@@ -12,6 +12,15 @@ narrow: true
 
 # Typography
 
+IPDB is a planetary-scale blockchain database built on [BigchainDB](https://www.bigchaindb.com). It’s a ready-to-use public network with a focus on **strong governance**. It shares _all the features_ of BigchainDB to make developers’ lives easier.
+
+* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+* Maecenas sed diam eget risus varius blandit sit amet non magna.
+
+1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+3. Maecenas sed diam eget risus varius blandit sit amet non magna.
 
 # Heading 1
 
@@ -25,13 +34,6 @@ narrow: true
 
 ###### Heading 6
 
-* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
-* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
-* Maecenas sed diam eget risus varius blandit sit amet non magna.
-
-1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
-2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
-3. Maecenas sed diam eget risus varius blandit sit amet non magna.
 
 # Logo
 
@@ -104,9 +106,16 @@ Logo can be used with a base class and modifier classes for size & color:
         <label class="form-label" for="comment">Autogrowing textarea</label>
     </div>
     <p class="form-group text-dimmed mini">
-        Fields marked with an <span class="required">*</span> are required.
+        Fields marked with an <span class="required"></span> are required.
     </p>
     <div class="form-group">
         <input class="btn btn-primary" type="submit" value="Submit">
     </div>
 </form>
+
+## Section header
+
+<header class="section__header">
+    <h1 class="section__title">A planetary-scale blockchain database</h1>
+    <p class="section__description">IPDB relies on caretakers to run the BigchainDB nodes that store and validate transactions. The IPDB Caretakers are the members of the IPDB Foundation.</p>
+</header>