Add social links to the footer

Author: JordanHatch

_layouts/default.html

@@ -17,12 +17,16 @@
   {{ content }}
 
   <footer>
-    <div class="inner">
-      <p>
-        Europe Code Week is a project by the <a href="http://ec.europa.eu/digital-agenda/en/young-advisors">Young Advisors Group</a> at the <a href="http://ec.europa.eu/index_en.htm">European Commission</a>.
-        <br>
-        Help us with this website on <a href="https://github.com/codeeu/codeeu.github.io">GitHub</a>.
-      </p>
+    <div class="inner row">
+      <ul class="links col-md-4">
+        <li><a href="https://twitter.com/codeweekeu" title="@CodeWeekEU on Twitter" class="twitter">CodeWeekEU</a></li>
+        <li><a href="https://www.facebook.com/codeEU" title="Europe Code Week on Facebook" class="facebook">codeEU</a></li>
+        <li><a href="https://github.com/codeeu" title="CodeEU on GitHub" class="github">codeeu</a></li>
+      </ul>
+      <div class="team links col-md-8">
+        A project by the <a href="http://ec.europa.eu/digital-agenda/en/young-advisors">Young Advisors Group</a> at the <a href="http://ec.europa.eu/index_en.htm">European Commission</a><br>
+        Help us with this website on <a href="https://github.com/codeeu/codeeu.github.io">GitHub</a>
+      </div>
     </div>
   </footer>
 

images/links-facebook.png

@@ -251,28 +251,42 @@ footer {
   margin-top: 40px;
 }
 
-footer .inner {
-  overflow: hidden;
-}
-
-footer p {
-  float: left;
+footer .team {
   padding: 25px 0;
   font-size: 16px;
-  line-height: 30px;
+  line-height: 25px;
+  text-align: right;
 }
-footer p a, footer p a:link, footer p a:visited {
+footer a, footer a:link, footer a:visited {
   color: #bcdbff;
 }
 
-footer a.ec-logo {
+footer ul.links {
+  padding: 25px 0;
+  margin: 0;
+}
+footer ul.links li {
+  list-style: none;
+  padding: 0;
+  font-size: 16px;
+}
+footer ul.links li a, footer ul.links li a:visited {
   display: block;
-  float: right;
+  padding: 4px 0 4px 32px;
+  background: transparent no-repeat left 3px;
+  color: #fff;
   text-decoration: none;
-  text-indent: -9999px;
-  width: 135px;
-  height: 95px;
-  background: #fff url('ec-logo.png') no-repeat center center;
-  padding: 8px;
-  margin: 5px;
+}
+footer ul.links li a:hover {
+  text-decoration: underline;
+}
+
+footer ul.links li a.twitter {
+  background-image: url('/images/links-twitter.png');
+}
+footer ul.links li a.facebook {
+  background-image: url('/images/links-facebook.png');
+}
+footer ul.links li a.github {
+  background-image: url('/images/links-github.png');
 }