From 8ef2e5fc486f7953c9ebf994452140aeed781ac1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 29 Aug 2017 12:00:08 +0200
Subject: [PATCH] foundation caretakers layout

---
 _src/_assets/scss/_sections.scss       | 10 ++++++++
 _src/_assets/scss/_variables.scss      |  2 +-
 _src/_assets/scss/page-foundation.scss | 32 ++++++++++++++++++++++++++
 _src/_assets/scss/page-front.scss      | 11 +--------
 _src/foundation/index.html             | 24 ++++++++++++++-----
 _src/index.html                        |  4 ++--
 6 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/_src/_assets/scss/_sections.scss b/_src/_assets/scss/_sections.scss
index cdf255f..e3b24db 100644
--- a/_src/_assets/scss/_sections.scss
+++ b/_src/_assets/scss/_sections.scss
@@ -44,6 +44,16 @@
 .section__description {
     font-size: $font-size-large;
     margin-bottom: 0;
+    color: darken($brand-04, 5%);
+}
+
+.section__actions {
+    text-align: center;
+    margin-top: $spacer * 2;
+
+    .button + .button {
+        margin-left: $spacer * 2;
+    }
 }
 
 
diff --git a/_src/_assets/scss/_variables.scss b/_src/_assets/scss/_variables.scss
index f354f44..f9dcee8 100644
--- a/_src/_assets/scss/_variables.scss
+++ b/_src/_assets/scss/_variables.scss
@@ -17,7 +17,7 @@ $font-family-monospace:     Menlo, Monaco, Consolas, 'Courier New', monospace !d
 
 $font-size-root:            20px !default;
 $font-size-root-lg:         22px !default;
-$line-height:               1.4 !default;
+$line-height:               1.33333 !default;
 $spacer:                    1rem !default;
 
 $font-weight-light:         300 !default;
diff --git a/_src/_assets/scss/page-foundation.scss b/_src/_assets/scss/page-foundation.scss
index e69de29..6c34896 100644
--- a/_src/_assets/scss/page-foundation.scss
+++ b/_src/_assets/scss/page-foundation.scss
@@ -0,0 +1,32 @@
+@import 'variables';
+
+.feature {
+    padding-left: 5rem;
+    position: relative;
+}
+
+.feature__image {
+    width: 4rem;
+    height: 4rem;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 1rem;
+}
+
+.feature__title {
+    font-size: $font-size-h5;
+    margin-bottom: $spacer / 2;
+}
+
+.caretakers-current {
+    margin-top: $spacer * 2;
+
+    .section__title {
+        font-size: $font-size-h2;
+    }
+
+    .logo-caretaker {
+        opacity: 1;
+    }
+}
diff --git a/_src/_assets/scss/page-front.scss b/_src/_assets/scss/page-front.scss
index 594ff68..391571b 100644
--- a/_src/_assets/scss/page-front.scss
+++ b/_src/_assets/scss/page-front.scss
@@ -34,19 +34,10 @@
 }
 
 .feature__title {
-    font-size: $font-size-h3;
+    font-size: $font-size-h4;
     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;
 }
diff --git a/_src/foundation/index.html b/_src/foundation/index.html
index c4603b8..1ad3d9e 100644
--- a/_src/foundation/index.html
+++ b/_src/foundation/index.html
@@ -42,11 +42,15 @@ css: page-foundation
         </header>
     </div>
 
-    <div class="row">
+    <div class="row features">
         <div class="grid grid--full grid-small--half grid--gutters">
         {% for feature in content.caretakers.features %}
             <div class="grid__col">
                 <div class="feature">
+                    <svg class="feature__image" width="298" height="220" aria-labelledby="title">
+                        <title>IPDB Governance</title>
+                        <use xlink:href="/assets/img/sprite.svg#distributed"></use>
+                    </svg>
                     <h3 class="feature__title">{{ feature.title }}</h3>
                     <p class="feature__description">{{ feature.description }}</p>
                 </div>
@@ -55,14 +59,22 @@ css: page-foundation
         </div>
     </div>
 
-    <div class="row">
-        <h2 class="section__title">{{ content.caretakers.members.title }}</h2>
-        <p class="section__description">{{ content.caretakers.members.description }}</p>
-    </div>
+    <div class="row caretakers-current">
+        <div class="grid grid--full grid-medium--columns grid--center grid--gutters">
+            <div class="grid__col grid__col--4">
+                <h2 class="section__title">{{ content.caretakers.members.title }}</h2>
+                <p class="section__description">{{ content.caretakers.members.description }}</p>
+            </div>
+        </div>
 
-    <div class="row">
         {% include caretakers.html %}
     </div>
+
+    <footer class="row">
+        <footer class="section__actions">
+            <a href="" class="button button--primary button--small">Become a caretaker</a>
+        </footer>
+    </footer>
 </section>
 
 <section class="section section--board">
diff --git a/_src/index.html b/_src/index.html
index 0ea6785..cfcdfd3 100644
--- a/_src/index.html
+++ b/_src/index.html
@@ -62,8 +62,8 @@ css: page-front
             {% endfor %}
         </section>
 
-        <footer class="actions">
-            <a class="hero__action button button--primary" href="{{ site.signup.link }}">{{ site.signup.button }}</a>
+        <footer class="section__actions">
+            <a class="button button--primary" href="{{ site.signup.link }}">{{ site.signup.button }}</a>
             <a href="" class="button button--text">Read IPDB Documentation</a>
         </footer>
     </div>