From 26a1057b1d8be7f417514e4fe8e7b69aff4bbaaf Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 20 Sep 2017 14:45:52 +0200
Subject: [PATCH] revised connect section

---
 _src/_assets/scss/_menus.scss     | 11 -----------
 _src/_assets/scss/ipdb.scss       | 25 ++++++++++++++++++++++++-
 _src/_assets/scss/page-front.scss | 11 ++++++++++-
 _src/_data/content-front.yml      |  3 ++-
 _src/index.html                   | 12 ++++++++++++
 5 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/_src/_assets/scss/_menus.scss b/_src/_assets/scss/_menus.scss
index 03ad54f..a203b9a 100644
--- a/_src/_assets/scss/_menus.scss
+++ b/_src/_assets/scss/_menus.scss
@@ -151,20 +151,9 @@
         display: flex;
         justify-content: space-between;
         margin-top: $spacer;
-    }
-
-    .social-link {
-        display: block;
-        border: 1.5px solid $brand-02;
-        border-radius: $border-radius;
-        padding: $spacer / 2;
-        width: 2rem;
-        height: 2rem;
-        line-height: 1;
 
         svg {
             fill: $brand-05;
-
         }
     }
 }
diff --git a/_src/_assets/scss/ipdb.scss b/_src/_assets/scss/ipdb.scss
index aa4c2f1..0a2daab 100644
--- a/_src/_assets/scss/ipdb.scss
+++ b/_src/_assets/scss/ipdb.scss
@@ -41,7 +41,7 @@
         }
 
         &:active {
-            transform: translateY(0);
+            transform: none;
         }
     }
 
@@ -50,3 +50,26 @@
         height: $font-size-base;
     }
 }
+
+.social-link {
+    display: inline-block;
+    border: 1.5px solid $brand-02;
+    border-radius: $border-radius;
+    padding: $spacer / 2;
+    width: 2rem;
+    height: 2rem;
+    line-height: 1;
+
+    &:hover,
+    &:focus {
+        transform: translateY(-1px);
+    }
+
+    &:active {
+        transform: none;
+    }
+
+    svg {
+        fill: $brand-04;
+    }
+}
diff --git a/_src/_assets/scss/page-front.scss b/_src/_assets/scss/page-front.scss
index 2ee268c..1bdbeba 100644
--- a/_src/_assets/scss/page-front.scss
+++ b/_src/_assets/scss/page-front.scss
@@ -266,7 +266,6 @@
 //
 .articles {
     max-width: 100%;
-    margin-bottom: $spacer * 4;
 }
 
 .article {
@@ -310,3 +309,13 @@
     align-self: flex-end;
     transition: .15s ease-out;
 }
+
+.section--connect {
+    .social {
+        margin-bottom: $spacer * 3;
+    }
+
+    .social-link {
+        margin-right: $spacer / 2;
+    }
+}
diff --git a/_src/_data/content-front.yml b/_src/_data/content-front.yml
index 4ca5eb3..ae9ff8e 100644
--- a/_src/_data/content-front.yml
+++ b/_src/_data/content-front.yml
@@ -84,5 +84,6 @@ connect:
     title: "Stay connected"
     description: "Stalk us like there's no tomorrow."
     blog_title: "From the blog"
-    newsletter_title: "Newsletter"
+    follow_title: "Follow us"
+    newsletter_title: "Subscribe to our newsletter"
     newsletter_text: "Our email newsletter will keep you informed of major developments."
diff --git a/_src/index.html b/_src/index.html
index dbfe0c0..e4cfdbc 100644
--- a/_src/index.html
+++ b/_src/index.html
@@ -237,6 +237,18 @@ css: page-front
                 </header>
             </div>
             <div class="grid__col">
+                <div class="social">
+                    <h2 class="connect__title">{{ content.connect.follow_title }}</h2>
+                    {% for item in site.data.contact.social %}
+                        <a class="social-link" href="{{ item.link }}" title="{{ item.name }}">
+                            <svg class="icon" aria-labelledby="title">
+                                <title>{{ item.name }}</title>
+                                <use xlink:href="/assets/img/sprite.svg#icon-{{ item.name | downcase }}"></use>
+                            </svg>
+                        </a>
+                    {% endfor %}
+                </div>
+
                 <div class="connect connect--newsletter">
                     <h2 class="connect__title">{{ content.connect.newsletter_title }}</h2>
                     <p>{{ content.connect.newsletter_text }}</p>