Add icons and behavior to footer

Author: Matthieu Oger

_includes/footer.html

@@ -5,8 +5,23 @@
   </div>
 
   <div class="page-footer__item social">
-    <img src="/static/images/icons/facebook.png" alt="Facebook"         title="Facebook"         />
-    <img src="/static/images/icons/twitter.png"  alt="Twitter"          title="Twitter"          />
-    <img src="/static/images/icons/pxn.png"      alt="Pixelnest Studio" title="Pixelnest Studio" />
+    <a href="https://www.facebook.com/pixelneststudio/">
+      <img class="facebook"
+           src="/static/images/icons/footer_facebook.png"
+           alt="Facebook"
+           title="Facebook" />
+    </a>
+    <a href="https://twitter.com/pixelnest/">
+      <img class="twitter"
+           src="/static/images/icons/footer_twitter.png"
+           alt="Twitter"
+           title="Twitter" />
+    </a>
+    <a href="/">
+      <img class="pxn"
+           src="/static/images/icons/footer-pxn.png"
+           alt="Pixelnest Studio"
+           title="Pixelnest Studio" />
+    </a>
   </div>
 </footer>

_sass/pages/_footer.scss

@@ -40,4 +40,37 @@
 
 .page-footer__item.social {
   text-align: right;
+
+  img {
+    vertical-align: middle;
+  }
+
+  .facebook,
+  .twitter {
+    width: auto;
+    height: 20px;
+  }
+
+  .facebook {
+    margin-right: 16px;
+  }
+
+  .twitter {
+    margin-right: 32px;
+  }
+
+  .pxn {
+    width: auto;
+    height: 32px;
+  }
+
+  a {
+    img {
+      transition: all 150ms ease-out;
+    }
+
+    &:hover img {
+      transform: scale(1.1, 1.1);
+    }
+  }
 }