more footer tweaks

site/_includes/footer.html

@@ -1,13 +1,15 @@
 <footer>
   <div class="grid">
     <div class="unit one-third center-on-mobiles">
-      <p>By <a href="http://tom.preston-werner.com">Tom Preston-Werner</a>, <a href="http://quaran.to/">Nick Quaranto</a>, and many more <a href="https://github.com/mojombo/jekyll/graphs/contributors">awesome contributors</a>.</p>
+      <p>By <a href="http://tom.preston-werner.com">Tom Preston-Werner</a>, <a href="http://quaran.to/">Nick Quaranto</a>, and many more <a href="https://github.com/mojombo/jekyll/graphs/contributors">awesome&nbsp;contributors</a>.</p>
     </div>
     <div class="unit two-thirds align-right center-on-mobiles">
-      <p>Proudly hosted by</p>
-      <a href="https://github.com">
-        <img src="{{ site.url }}/img/footer-logo.png" alt="GitHub • Social coding">
-      </a>
+      <p>
+        Proudly hosted by
+        <a href="https://github.com">
+          <img src="{{ site.url }}/img/footer-logo.png" alt="GitHub • Social coding">
+        </a>
+      </p>
     </div>
   </div>
 </footer>

site/css/style.css

@@ -62,6 +62,23 @@ body > footer img {
   margin-left: 5px;
   width: 100px;
   height: 44px;
+  opacity: .8;
+  -webkit-transition: opacity .2s;
+  -moz-transition: opacity .2s;
+  transition: opacity .2s;
+}
+
+body > footer a:hover img {
+  opacity: 1;
+}
+
+@media (max-width: 568px){
+  footer .one-third p {
+    margin-bottom: 0;
+  }
+  footer .two-thirds p {
+    margin-top: -20px;
+  }
 }
 
 /* HTML Elements */