social tweaks

src/components/molecules/Footer.js

@@ -1,15 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Social from './Social'
 import './Footer.scss'
 
 const Footer = ({ meta }) => {
   const year = new Date().getFullYear()
 
-  return (
+  return <footer className="footer">
-    <footer className="footer">
+      <Social meta={meta} minimal />
-      <small>&copy; {year} {meta.title} &mdash; All Rights Reserved</small>
+      <small>
+        &copy; {year} {meta.title} &mdash; All Rights Reserved
+      </small>
     </footer>
-  )
 }
 
 Footer.propTypes = {

src/components/molecules/Footer.scss

@@ -9,4 +9,9 @@
     small {
         font-size: $font-size-mini;
     }
+
+    .social {
+        margin-top: 0;
+        margin-bottom: $spacer;
+    }
 }

src/components/molecules/Header.js

@@ -8,17 +8,15 @@ const Header = ({ meta }) => {
   const isHomepage = location.pathname === '/'
   const classes = isHomepage ? 'header' : 'header header--minimal'
 
-  return (
+  return <header className={classes}>
-    <header className={classes}>
       <Link className="header__name" to={'/'}>
         <span className="header__logo">␥</span>
         <h1 className="header__title">{meta.title}</h1>
         <p className="header__description">{meta.tagline}</p>
       </Link>
 
-      <Social meta={meta} />
+      <Social meta={meta} minimal={!isHomepage} />
     </header>
-  )
 }
 
 Header.propTypes = {

src/components/molecules/Header.scss

@@ -98,27 +98,4 @@
         text-align: right;
         justify-content: flex-end;
     }
-
-    .social__link {
-        width: 1rem;
-        height: 1rem;
-        padding: $spacer / 8;
-        margin-left: $spacer / 4;
-        margin-right: $spacer / 4;
-        background: transparent;
-        box-shadow: none;
-        transform: none;
-
-        .icon {
-            fill: $brand-grey-light;
-            transition: .2s ease-out;
-        }
-
-        &:hover,
-        &:focus {
-            .icon {
-                fill: $brand-grey;
-            }
-        }
-    }
 }

src/components/molecules/Social.js

@@ -14,11 +14,12 @@ const SocialIcon = ({ title }) => {
   }
 }
 
-const Social = ({ meta }) => {
+const Social = ({ meta, minimal }) => {
   const social = meta.social
+  const classes = minimal ? 'social social--minimal' : 'social'
 
   return (
-    <aside className="social">
+    <aside className={classes}>
       {Object.keys(social).map((key, i) => (
         <OutboundLink className="social__link" href={social[key]} key={i} title={key}>
           <SocialIcon title={key} />
@@ -30,6 +31,7 @@ const Social = ({ meta }) => {
 
 Social.propTypes = {
   meta: PropTypes.object,
+  minimal: PropTypes.bool,
 }
 
 export default Social

src/components/molecules/Social.scss

@@ -28,4 +28,27 @@
         transform: translate3d(0, -.2rem, 0);
         box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
     }
+
+    .social--minimal & {
+        width: 1rem;
+        height: 1rem;
+        padding: $spacer / 8;
+        margin-left: $spacer / 4;
+        margin-right: $spacer / 4;
+        background: transparent;
+        box-shadow: none;
+        transform: none;
+
+        .icon {
+            fill: $brand-grey-light;
+            transition: .2s ease-out;
+        }
+
+        &:hover,
+        &:focus {
+            .icon {
+                fill: $brand-grey;
+            }
+        }
+    }
 }