lots of grid tweaks

* introduce small gutters modifier

_src/_assets/styles/_page-features.scss

@@ -7,7 +7,7 @@
 
 .feature {
     display: flex;
-    margin-bottom: $spacer * 2;
+    margin-bottom: $spacer;
 
     &:first-of-type { padding-top: 0; }
 }
@@ -54,6 +54,7 @@
     margin-left: ($spacer / 2);
     padding: ($spacer / 6) ($spacer / 2);
     border-radius: 2px;
+    white-space: nowrap;
 }
 
 .feature__title__new {

_src/_assets/styles/_page-getstarted.scss

@@ -272,6 +272,16 @@
     }
 }
 
+.choice__title--community {
+    text-align: center;
+
+    &:after {
+        position: relative;
+        left: 50%;
+        margin-left: -1.5rem;
+    }
+}
+
 .architecture {
     text-align: center;
 

_src/_assets/styles/_page-styleguide.scss

@@ -13,11 +13,10 @@
 
 // color swatches
 .color {
-    padding: ($spacer / 2);
-    margin-bottom: 5px;
+    padding: $spacer $spacer / 2;
+    margin-bottom: 0;
     border-radius: $border-radius;
     border: 1px solid lighten($body-bg, 10%);
-    min-height: 70px;
     text-align: center;
 
     &,
@@ -28,7 +27,6 @@
         font-family: $font-family-monospace;
         font-size: 11px;
         color: #fff;
-        vertical-align: middle;
         opacity: 0;
     }
 

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

@@ -9,7 +9,7 @@
     box-shadow: none;
     display: flex;
     align-items: center;
-    min-height: 7rem;
+    min-height: 8rem;
 
     &:hover,
     &:focus {
@@ -22,7 +22,7 @@
 
 .article__title,
 h1.article__title {
-    font-size: $font-size-h5;
+    font-size: $font-size-lg;
     font-weight: $font-weight-normal;
     margin: 0;
     color: #fff;

_src/_assets/styles/bigchain/_grid.scss

@@ -104,26 +104,50 @@
     }
 }
 
+@mixin grid-gutters-small() {
+    margin: -($gutter-space / 3) 0 $gutter-space / 3 (-($gutter-space / 3));
+
+    > .grid__col {
+        padding: $gutter-space / 3 0 0 $gutter-space / 3;
+    }
+}
+
 .grid--gutters {
     @include grid-gutters();
 }
 
+.grid--gutters--small {
+    @include grid-gutters-small();
+}
+
 @media ($screen-sm) {
     .grid-small--gutters {
         @include grid-gutters();
     }
+
+    .grid-small--gutters--small {
+        @include grid-gutters-small();
+    }
 }
 
 @media ($screen-md) {
     .grid-medium--gutters {
         @include grid-gutters();
     }
+
+    .grid-medium--gutters--small {
+        @include grid-gutters-small();
+    }
 }
 
 @media ($screen-lg) {
     .grid-large--gutters {
         @include grid-gutters();
     }
+
+    .grid-large--gutters--small {
+        @include grid-gutters-small();
+    }
 }
 
 

_src/_assets/styles/bigchain/_variables.scss

@@ -45,7 +45,7 @@ $font-size-root:            18px !default;
 $font-size-root-lg:         20px !default;
 
 $font-size-base:            1rem !default;
-$font-size-lg:              1.3rem !default;
+$font-size-lg:              1.2rem !default;
 $font-size-sm:              .85rem !default;
 $font-size-xs:              .65rem !default;
 

_src/_data/colors.yml

@@ -11,8 +11,6 @@ primary:
       hex: 445261
     - name: brand-main-blue-dark
       hex: 101A25
-
-secondary:
     - name: brand-main-violet
       hex: B581CF
     - name: brand-main-blue-light
@@ -22,6 +20,7 @@ secondary:
     - name: brand-main-gray-lighter
       hex: E8EBEF
 
+
 #
 # Errors
 #

_src/_data/getstarted.yml

@@ -54,7 +54,7 @@ docs:
     title: "Guides & Documentation "
     description: "Dive into our documentation with guides, examples, terminology, references and more."
     button_documentation: "See All Documentation"
-    button_guides: "See All Guides"
+    button_guides: "See the Guide"
     categories:
 
         - title: "Code Examples"

_src/_includes/sections/section-blog.html

@@ -6,10 +6,10 @@
             <p class="section-description">Updates, stories and ideas from the people behind BigchainDB.</p>
         </header>
 
-        <div class="grid grid--full grid-small--half grid-medium--third grid--gutters">
+        <div class="grid grid--full grid-small--half grid-medium--third grid--gutters--small">
             {% for article in site.articles | limit: 6 %}
                 <div class="grid__col">
-                    <a class="article article--{{ article.title | downcase | truncatewords: 3, '' | replace: ' ', '-' }}" href="{{ article.link }}" style="background-image: url('{{ article.image }}')">
+                    <a class="article article--{{ article.title | downcase | truncatewords: 3, '' | replace: ' ', '-' }}" href="{{ article.link }}" style="background-image: url('{{ article.image }}');">
 
                         <h1 class="article__title">
                             {{ article.title }}

_src/developers/getstarted.html

@@ -205,7 +205,7 @@ conn.postTransactionSync(txSigned)
 
                     <h3 class="choice__title">{{ content.drivers.title_official }}</h3>
 
-                    <div class="grid grid--full grid-small--half grid--gutters">
+                    <div class="grid grid--full grid-medium--half grid--gutters--small">
 
                         {% for driver in site.data.drivers.official %}
 
@@ -232,7 +232,7 @@ conn.postTransactionSync(txSigned)
                 <div class="grid__col">
 
                     <h3 class="choice__title">{{ content.drivers.title_tools }}</h3>
-                    <div class="grid grid--full grid-small--half grid--gutters">
+                    <div class="grid grid--full grid-medium--half grid--gutters--small">
 
                         {% for driver in site.data.drivers.tools %}
                         <div class="grid__col">
@@ -254,8 +254,8 @@ conn.postTransactionSync(txSigned)
         </div>
 
         <div class="row row--wide">
-            <h3 class="choice__title">{{ content.drivers.title_community }}</h3>
-            <div class="grid grid--half grid-medium--fit grid--gutters">
+            <h3 class="choice__title choice__title--community">{{ content.drivers.title_community }}</h3>
+            <div class="grid grid--half grid-medium--fit grid--gutters--small">
 
                 {% for driver in site.data.drivers.community %}
                 <div class="grid__col">
@@ -328,7 +328,7 @@ conn.postTransactionSync(txSigned)
     </div>
 
     <div class="row community__actions">
-        <div class="grid grid--full grid-small--fit grid--gutters">
+        <div class="grid grid--full grid-small--fit grid--gutters--small">
             <div class="grid__col">
                 <svg class="icon icon--social icon--gitter">
                     <use xlink:href="/assets/img/sprite.svg#gitter"></use>
@@ -353,8 +353,8 @@ conn.postTransactionSync(txSigned)
         </div>
     </div>
 
-    <div class="row">
-        <div class="grid grid--full grid-small--fit grid--gutters">
+    <div class="row row--wide">
+        <div class="grid grid--full grid-small--fit grid--gutters--small">
             <div class="grid__col">
                 <h5>{{ content.community.follow.title }}</h5>
                 <p>{{ content.community.follow.description }}</p>

_src/styleguide.md

@@ -11,22 +11,9 @@ js: page-styleguide.min.js
 
 ### Primary
 
-<div class="grid grid--gutters grid--full grid-medium--fit">
+<div class="grid grid--gutters--small grid--full grid-small--half grid-medium--third">
     {% for color in site.data.colors.primary %}
-    <div class="grid__col">
-        <div class="color {{ color.name }}">
-            <span class="color-meta color-name">${{ color.name }}</span>
-            <span class="color-meta color-hex">#{{ color.hex }}</span>
-        </div>
-    </div>
-    {% endfor %}
-</div>
-
-### Secondary
-
-<div class="grid grid--gutters grid--full grid-medium--fit">
-    {% for color in site.data.colors.secondary %}
-    <div class="grid__col">
+    <div class="grid__col grid__col--2">
         <div class="color {{ color.name }}">
             <span class="color-meta color-name">${{ color.name }}</span>
             <span class="color-meta color-hex">#{{ color.hex }}</span>
@@ -37,9 +24,9 @@ js: page-styleguide.min.js
 
 ### Errors
 
-<div class="grid grid--gutters grid--full grid-medium--fit">
+<div class="grid grid--gutters--small grid--full grid-small--half grid-medium--third">
     {% for color in site.data.colors.errors %}
-    <div class="grid__col">
+    <div class="grid__col grid__col--2">
         <div class="color {{ color.name }}">
             <span class="color-meta color-name">${{ color.name }}</span>
             <span class="color-meta color-hex">#{{ color.hex }}</span>