From 9143ad4f0e7cb923f97962b72f6bb111d5b934d5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 7 Sep 2017 13:34:24 +0200
Subject: [PATCH] more styled vision & research section

---
 _src/_assets/scss/_sections.scss       | 20 +++++++++-
 _src/_assets/scss/page-foundation.scss | 53 ++++++++++++++++++--------
 _src/foundation/index.html             | 28 +++++++++-----
 3 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/_src/_assets/scss/_sections.scss b/_src/_assets/scss/_sections.scss
index 1987f62..7bbe3df 100644
--- a/_src/_assets/scss/_sections.scss
+++ b/_src/_assets/scss/_sections.scss
@@ -9,8 +9,8 @@
     align-items: center;
 
     @media ($screen-sm) {
-        padding-top: $spacer * 4;
-        padding-bottom: $spacer * 4;
+        padding-top: $spacer * 5;
+        padding-bottom: $spacer * 5;
     }
 
     // handling long text, like URLs
@@ -107,3 +107,19 @@
         }
     }
 }
+
+.section--border {
+    position: relative;
+
+    &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: -.1rem;
+        display: block;
+        height: .1rem;
+        background: darken($brand-05, 8%);
+        transform: rotate(-4deg);
+    }
+}
diff --git a/_src/_assets/scss/page-foundation.scss b/_src/_assets/scss/page-foundation.scss
index a2d50c4..a175a54 100644
--- a/_src/_assets/scss/page-foundation.scss
+++ b/_src/_assets/scss/page-foundation.scss
@@ -7,23 +7,25 @@
     }
 }
 
-.feature {
-    padding-left: 5rem;
-    position: relative;
-}
+.section--caretakers {
+    .feature {
+        padding-left: 5rem;
+        position: relative;
+    }
 
-.feature__image {
-    width: 4rem;
-    height: 4rem;
-    position: absolute;
-    left: 0;
-    top: 0;
-    border-radius: $border-radius;
-}
+    .feature__image {
+        width: 4rem;
+        height: 4rem;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: $border-radius;
+    }
 
-.feature__title {
-    font-size: $font-size-h5;
-    margin-bottom: $spacer / 2;
+    .feature__title {
+        font-size: $font-size-h5;
+        margin-bottom: $spacer / 2;
+    }
 }
 
 .caretakers-current {
@@ -37,3 +39,24 @@
         opacity: 1;
     }
 }
+
+.section--board {
+    .board {
+        margin-bottom: 0;
+    }
+}
+
+.section--vision {
+    .feature__image {
+        margin: 0;
+        background: $brand-05;
+        padding: $spacer;
+        padding-bottom: 0;
+        border-radius: $border-radius;
+        min-height: 9rem;
+
+        svg {
+            display: block;
+        }
+    }
+}
diff --git a/_src/foundation/index.html b/_src/foundation/index.html
index ebd534b..99ea48c 100644
--- a/_src/foundation/index.html
+++ b/_src/foundation/index.html
@@ -91,22 +91,30 @@ css: page-foundation
     </div>
 </section>
 
-<section class="section section--vision" id="vision">
+<section class="section section--vision section--border" id="vision">
     <div class="row">
-        <header class="section__header">
-            <div class="grid grid--full grid-medium--columns grid--center grid--gutters">
-                <div class="grid__col grid__col--4">
+        <div class="grid grid--full grid-medium--columns grid--center grid--gutters">
+            <div class="grid__col grid__col--4">
+                <header class="section__header">
                     <h1 class="section__title">{{ content.vision.title }}</h1>
                     <p class="section__description">{{ content.vision.description }}</p>
-                </div>
-                <div class="grid__col grid__col--2">
-
-                </div>
+                </header>
             </div>
-        </header>
+        </div>
     </div>
 
     <div class="row">
-        {{ content.vision.text | markdownify }}
+        <div class="grid grid--full grid-medium--columns grid--gutters">
+            <div class="grid__col grid__col--2">
+                <figure class="feature__image">
+                    <svg>
+                        <use xlink:href="/assets/img/sprite.svg#starbase-towers"></use>
+                    </svg>
+                </figure>
+            </div>
+            <div class="grid__col grid__col--4">
+                {{ content.vision.text | markdownify }}
+            </div>
+        </div>
     </div>
 </section>