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

site/partials/nav-foot.hbs

@@ -1,8 +1,8 @@
 <nav class="nav-foot">
   <ul>
     <li><a href="index.html">home</a></li>
-    <li><a href="styleguide.html">styleguide</a></li>
+    <li><a href="http://links.markamoser.com">links</a></li>
     <li><a href="video.html">video</a></li>
-    <li><a href="misc.html">misc</a></li>
+    <li><a href="styleguide.html">styleguide</a></li>
   </ul>
 </nav>

site/partials/nav-social.hbs

@@ -1,22 +1,22 @@
-<nav class="nac-social">
+<nav class="nav-social">
   <ul>
     <li>
-      <a href="//linkedin.com/in/markamoser/">
+      <a href="//linkedin.com/in/markamoser/" title="linked-in">
         <span>linked-in</span>
       </a>
     </li>
     <li>
-      <a href="//twitter.com/obley">
+      <a href="//twitter.com/obley" title="twitter">
         <span>twitter</span>
       </a>
     </li>
     <li>
-      <a href="//github.com/markmoser">
+      <a href="//github.com/markmoser" title="github">
         <span>github</span>
       </a>
     </li>
     <li>
-      <a href="//bitbucket.org/markamoser">
+      <a href="//bitbucket.org/markamoser" title="bitbucket">
         <span>bitbucket</span>
       </a>
     </li>