From b3be57a55584ab20aa18659c2f8ad57f7ab5ca21 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 27 Jun 2017 01:02:54 +0200
Subject: [PATCH] unify server & drivers backgrounds

---
 _src/_assets/styles/_page-getstarted.scss |  37 ++++---
 _src/start.html                           | 114 +++++++++++-----------
 2 files changed, 78 insertions(+), 73 deletions(-)

diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss
index fddb6aa..949d779 100644
--- a/_src/_assets/styles/_page-getstarted.scss
+++ b/_src/_assets/styles/_page-getstarted.scss
@@ -38,7 +38,7 @@
         height: 3rem;
         border-radius: 50%;
         font-size: $font-size-lg;
-        vertical-align: 0.4rem;
+        vertical-align: .4rem;
         background: $headings-color;
         color: $gray;
         font-weight: 400;
@@ -69,6 +69,10 @@
 //
 .section--server {
     padding-bottom: 0;
+
+    .btn {
+        margin-top: $spacer / 2;
+    }
 }
 
 .starbase {
@@ -101,7 +105,7 @@
         position: relative;
         z-index: 1;
         margin-bottom: -1.45%;
-        opacity: 0.7;
+        opacity: .7;
     }
 
     // surface layer
@@ -112,24 +116,16 @@
         left: -5%;
         right: -5%;
         bottom: 0;
-        background: #5d6f82;
+        background: lighten($gray, 8%);
         height: 24%;
         width: calc(100vw + 10%);
     }
 }
 
 .starbase--drivers {
-    margin-bottom: $spacer * 2;
-
-    // horizon layer
-    &:before {
-        background: darken($gray, 3%);
-    }
-
     .starbase__image {
         // surface layer
         &:before {
-            background: lighten($gray, 2%);
             height: 37%;
         }
 
@@ -140,15 +136,16 @@
     }
 }
 
-.serverchoice {
-    background: #536476;
+.choice {
+    background: lighten($gray, 3%);
     padding-top: $spacer * 4;
     padding-bottom: $spacer * 4;
 }
 
-.serverchoice__title {
+.choice__title {
     font-size: $font-size-h3;
     margin-top: 0;
+    margin-bottom: $spacer * $line-height;
 
     // the bottom line
     &:after {
@@ -156,7 +153,7 @@
         height: 2px;
         width: 3rem;
         display: block;
-        margin: ($spacer * 2) 0 0;
+        margin: ($spacer * $line-height) 0 0;
         background: $gray-light;
     }
 }
@@ -169,6 +166,14 @@
     }
 }
 
+.section--drivers {
+    padding-bottom: 0;
+
+    .choice__title {
+        margin-bottom: $spacer * 2;
+    }
+}
+
 .driver {
     padding: $spacer;
     background: rgba($brand-main-blue-light, .15);
@@ -231,7 +236,7 @@
 }
 
 .driver__version {
-    opacity: 0.75;
+    opacity: .75;
 }
 
 .driver--community {
diff --git a/_src/start.html b/_src/start.html
index 6b5a38d..3cb07ad 100644
--- a/_src/start.html
+++ b/_src/start.html
@@ -97,7 +97,7 @@ redirect_from:
         </header>
     </div>
 
-    <aside class="starbase">
+    <aside class="starbase starbase--server">
         <div class="row row--wide">
             <figure class="starbase__image">
                 <img class="img--responsive" src="/assets/img/starbase.svg" alt="Starbase" width="1071" height="328">
@@ -105,18 +105,18 @@ redirect_from:
         </div>
     </aside>
 
-    <section class="serverchoice">
+    <section class="choice">
         <div class="row row--wide">
             <div class="grid grid--full grid-small--half grid--gutters">
                 <div class="grid__col">
                     <span class="pretitle">Managed</span>
-                    <h2 class="serverchoice__title">IPDB: the public BigchainDB network</h2>
+                    <h2 class="choice__title">IPDB: the public BigchainDB network</h2>
                     <p>No need for any installation. Sign up and connect instantly, we handle running a BigchainDB production node for you.</p>
                     <a class="btn btn-primary" href="">Get IPDB</a>
                 </div>
                 <div class="grid__col">
                     <span class="pretitle">Self-hosted</span>
-                    <h2 class="serverchoice__title">BigchainDB Server</h2>
+                    <h2 class="choice__title">BigchainDB Server</h2>
                     <p>If you want to run your own BigchainDB instance you can either install on Linux or with Docker on any system.</p>
                     <a class="btn btn-secondary" href="">Install BigchainDB Server</a>
                 </div>
@@ -126,7 +126,7 @@ redirect_from:
 
 </section>
 
-<section class="section section--drivers" id="drivers">
+<section class="section section--drivers background--darker" id="drivers">
     <div class="row row--wide">
         <header class="section-header text-left">
             <h1 class="section-title section-title--numbered"><span>2</span> Drivers &amp; Tools</h1>
@@ -142,81 +142,81 @@ redirect_from:
         </div>
     </aside>
 
-    <div class="row row--wide">
+    <section class="choice">
+        <div class="row row--wide">
 
-        <div class="grid grid--full grid-small--half grid--gutters">
-            <div class="grid__col">
+            <div class="grid grid--full grid-small--half grid--gutters">
+                <div class="grid__col">
 
-                <h3>Official drivers</h3>
+                    <h3 class="choice__title">Official drivers</h3>
 
-                <div class="grid grid--full grid-small--half grid--gutters">
+                    <div class="grid grid--full grid-small--half grid--gutters">
 
-                    {% for driver in site.data.drivers.official %}
-                    <div class="grid__col">
-                        <a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
-                            <h2 class="driver__title">{{ driver.title }}</h2>
-                            <svg class="driver__logo">
-                                <use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
-                            </svg>
+                        {% for driver in site.data.drivers.official %}
+                        <div class="grid__col">
+                            <a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
+                                <h2 class="driver__title">{{ driver.title }}</h2>
+                                <svg class="driver__logo">
+                                    <use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
+                                </svg>
+
+                                <p class="driver__meta">
+                                    <span class="driver__repo">{{ driver.repo }}</span>
+                                    <span class="driver__version">{{ driver.version }}</span>
+                                </p>
+                            </a>
+                        </div>
+                        {% endfor %}
 
-                            <p class="driver__meta">
-                                <span class="driver__repo">{{ driver.repo }}</span>
-                                <span class="driver__version">{{ driver.version }}</span>
-                            </p>
-                        </a>
                     </div>
-                    {% endfor %}
 
                 </div>
+                <div class="grid__col">
 
-            </div>
-            <div class="grid__col">
+                    <h3 class="choice__title">Official tools</h3>
+                    <div class="grid grid--full grid-small--half grid--gutters">
 
-                <h3>Official tools</h3>
-                <div class="grid grid--full grid-small--half grid--gutters">
+                        {% for driver in site.data.drivers.tools %}
+                        <div class="grid__col">
+                            <a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
+                                <h2 class="driver__title">{{ driver.title }}</h2>
 
-                    {% for driver in site.data.drivers.tools %}
-                    <div class="grid__col">
-                        <a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
-                            <h2 class="driver__title">{{ driver.title }}</h2>
+                                <p class="driver__meta">
+                                    <span class="driver__repo">{{ driver.repo }}</span>
+                                    <span class="driver__version">{{ driver.version }}</span>
+                                </p>
+                            </a>
+                        </div>
+                        {% endfor %}
 
-                            <p class="driver__meta">
-                                <span class="driver__repo">{{ driver.repo }}</span>
-                                <span class="driver__version">{{ driver.version }}</span>
-                            </p>
-                        </a>
                     </div>
-                    {% endfor %}
-
                 </div>
 
             </div>
         </div>
 
+        <div class="row row--wide">
+            <h3 class="choice__title">Community drivers</h3>
+            <div class="grid grid--half grid-medium--fit grid--gutters">
 
-    </div>
+                {% for driver in site.data.drivers.community %}
+                <div class="grid__col">
+                    <a class="driver driver--community" href="{{ driver.link }}">
+                        <svg class="driver__logo">
+                            <use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
+                        </svg>
+                        <h2 class="driver__title">{{ driver.title }}</h2>
 
-    <div class="row row--wide">
-        <h3>Community drivers</h3>
-        <div class="grid grid--half grid-medium--fit grid--gutters">
+                        <p class="driver__meta">
+                            <span class="driver__repo">{{ driver.repo }}</span>
+                        </p>
+                    </a>
+                </div>
+                {% endfor %}
 
-            {% for driver in site.data.drivers.community %}
-            <div class="grid__col">
-                <a class="driver driver--community" href="{{ driver.link }}">
-                    <svg class="driver__logo">
-                        <use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
-                    </svg>
-                    <h2 class="driver__title">{{ driver.title }}</h2>
-
-                    <p class="driver__meta">
-                        <span class="driver__repo">{{ driver.repo }}</span>
-                    </p>
-                </a>
             </div>
-            {% endfor %}
-
         </div>
-    </div>
+    </section>
 </section>
 
 <section class="section section--docs background--light" id="docs">