revised connect section

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

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

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

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

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