From 220c6cfe0d87a4daf32b3063e9798bac9419fe61 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 23 Aug 2017 01:17:09 +0200
Subject: [PATCH] prototype intro, style media kit/brand assets sidebar

---
 _src/_assets/styles/_page-about.scss | 39 ++++++++++++++++------------
 _src/_layouts/about.html             | 21 +++++++++------
 _src/about.md                        |  6 ++++-
 3 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/_src/_assets/styles/_page-about.scss b/_src/_assets/styles/_page-about.scss
index a919452..89642ef 100644
--- a/_src/_assets/styles/_page-about.scss
+++ b/_src/_assets/styles/_page-about.scss
@@ -3,19 +3,31 @@
 }
 
 .section--about {
+    padding-top: $spacer * 4;
+
+    .section-header {
+        margin-bottom: $spacer * 2;
+    }
+
     h2:first-of-type {
         margin-top: 0;
     }
+
+    .story {
+        @media ($screen-md) {
+            padding-right: $spacer * 3;
+        }
+    }
 }
 
 .widget {
-    margin-top: $spacer * 4;
-
-    @media ($screen-sm) {
-        padding-left: $spacer * 2;
+    margin-top: $spacer * 2;
+    padding: $spacer * 1.5;
+    background: rgba($brand-main-blue-dark, .15);
 
+    @media ($screen-md) {
         &:first-child {
-            margin-top: $spacer * 2.5;
+            margin-top: $spacer * 5;
         }
     }
 }
@@ -27,22 +39,22 @@
 }
 
 .brand {
-    margin-top: $spacer;
+    margin-top: $spacer * $line-height;
 
-    &:last-child {
-        margin-top: $spacer * 2;
+    &:first-child {
+        margin-top: 0;
     }
 }
 
 .brand__logo {
     padding: $spacer * 2;
-    border: 1px solid $gray-dark;
+    border: 1px solid rgba($gray-light, .25);
     display: flex;
     align-items: center;
     justify-content: center;
 
     .brand--dark & {
-        background: rgba($gray-light, .75);
+        background: $text-color;
     }
 
     .brand--square & {
@@ -52,10 +64,5 @@
 
 .brand__logo__download {
     text-align: center;
-
-    a {
-        font-size: $font-size-sm;
-        margin-left: $spacer / 2;
-        margin-right: $spacer / 2;
-    }
+    margin-bottom: 0;
 }
diff --git a/_src/_layouts/about.html b/_src/_layouts/about.html
index 627b556..5bdd6ad 100644
--- a/_src/_layouts/about.html
+++ b/_src/_layouts/about.html
@@ -16,10 +16,15 @@ layout: base
 <section role="main" class="content content--page">
 
     <section class="section section--about">
+        <div class="row">
+            <header class="section-header">
+                <p class="section-description">{{ page.intro }}</p>
+            </header>
+        </div>
         <div class="row row--wide">
             <div class="grid grid--full grid-medium--columns grid--gutters">
 
-                <div class="grid__col grid__col--2-3">
+                <div class="grid__col grid__col--2-3 story">
                     {{ content }}
                 </div>
 
@@ -28,7 +33,7 @@ layout: base
                     <aside class="widget widget--mediakit">
                         <h2 class="widget__title">{{ page.mediakit.title }}</h2>
                         <p>{{ page.mediakit.description }}</p>
-                        <a href="{{ page.mediakit.link }}">{{ page.mediakit.download }}</a>
+                        <a class="btn btn-primary btn-sm" href="{{ page.mediakit.link }}">{{ page.mediakit.download }}</a>
                     </aside>
 
                     <aside class="widget widget--logo">
@@ -43,8 +48,8 @@ layout: base
                                 </svg>
                             </figure>
                             <p class="brand__logo__download">
-                                <a href="/mediakit/logo/logo-bigchaindb.svg" download>SVG</a>
-                                <a href="/mediakit/logo/logo-bigchaindb.png" download>PNG</a>
+                                <a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb.svg" download>SVG</a>
+                                <a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb.png" download>PNG</a>
                             </p>
                         </div>
 
@@ -56,8 +61,8 @@ layout: base
                                 </svg>
                             </figure>
                             <p class="brand__logo__download">
-                                <a href="/mediakit/logo/logo-bigchaindb-white.svg" download>SVG</a>
-                                <a href="/mediakit/logo/logo-bigchaindb-white.png" download>PNG</a>
+                                <a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb-white.svg" download>SVG</a>
+                                <a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb-white.png" download>PNG</a>
                             </p>
                         </div>
 
@@ -69,8 +74,8 @@ layout: base
                                 </svg>
                             </figure>
                             <p class="brand__logo__download">
-                                <a href="/mediakit/logo/logo-bigchaindb-square.svg" download>SVG</a>
-                                <a href="/mediakit/logo/logo-bigchaindb-square.png" download>PNG</a>
+                                <a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb-square.svg" download>SVG</a>
+                                <a class="btn btn-secondary btn-xs" href="/mediakit/logo/logo-bigchaindb-square.png" download>PNG</a>
                             </p>
                         </div>
 
diff --git a/_src/about.md b/_src/about.md
index 442f4a0..e992f50 100644
--- a/_src/about.md
+++ b/_src/about.md
@@ -14,7 +14,11 @@ mediakit:
     title: Media Kit
     description: Get our full media kit in one handy package.
     download: Download media kit (zip)
-    link: /mediakit.zip
+    link: /mediakit.zip
+
+intro: >
+    In your time, yes, but nowadays shut up! Besides, these are adult stemcells, harvested from perfectly healthy adults whom I killed for their stemcells. Oh, but you can. But you may have to metaphorically make a deal with the devil. And by "devil", I mean Robot Devil. And by "metaphorically", I mean get your coat.
+
 ---
 
 ## Our story