a simple footer

site/assets/scss/components/_nav-foot.scss

@@ -0,0 +1,15 @@
+.nav-foot {
+
+  a {
+    padding: 0.25em;
+    text-decoration: none;
+    color: $light-grey;
+
+    &:active,
+    &:hover {
+      background-color: $light-grey;
+      color: $copy-dark;
+    }
+  }
+
+}

site/assets/scss/components/_nav-social.scss

@@ -0,0 +1,15 @@
+.nav-social {
+
+  a {
+    padding: 0.25em;
+    text-decoration: none;
+    color: $light-grey;
+
+    &:active,
+    &:hover {
+      background-color: $light-grey;
+      color: $copy-dark;
+    }
+  }
+
+}

site/assets/scss/elements/_footer.scss

@@ -0,0 +1,28 @@
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  background-color: $dark-blue;
+  padding: $gutter;
+  color: $light-grey;
+
+  nav {
+    flex: 0 1 auto;
+    margin: 5px 0;
+  }
+}
+
+@media screen and (min-width: 650px) {
+  footer {
+    flex-direction: row;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  footer {
+    padding: ($gutter * 2) calc((100% - 850px) / 2);
+    width: 850px;
+  }
+}

site/assets/scss/elements/_layout.scss

@@ -15,23 +15,15 @@ section {
   &:nth-of-type(even) {
     background-color: $light-grey;
   }
-}
 
-footer {
-  margin: 0;
-  padding: 0 $gutter;
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 @media screen and (min-width: 900px) {
-
   section {
     padding: ($gutter * 2) calc((100% - 850px) / 2);
     width: 850px;
   }
-
-  footer {
-    padding: 0 calc((100% - 850px) / 2);
-    width: 850px;
-  }
-
 }

site/assets/scss/elements/_nav.scss

@@ -1,6 +1,7 @@
 nav {
   ul {
     @include slim-ul;
+    margin: 0;
 
     li {
       display: inline-block;

site/assets/scss/main.scss

@@ -6,14 +6,17 @@
 
 @import 'generic/reset';
 
+@import 'elements/layout';
 @import 'elements/typography';
 @import 'elements/ul';
 @import 'elements/nav';
 @import 'elements/icons';
 @import 'elements/cta';
-@import 'elements/layout';
+@import 'elements/footer';
 
 @import 'components/styleguide';
 @import 'components/hero';
 @import 'components/fifty';
 @import 'components/pie';
+@import 'components/nav-foot';
+@import 'components/nav-social';