foundation caretakers layout

_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;
+    }
 }
 
 

_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;

_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;
+    }
+}

_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;
 }

_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">
+    <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">

_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>