docs: footer

- Added social links to footer
- Fixed footer to display correctly in smaller screens

docs/themes/cypress/layout/partial/footer.swig

@@ -1,7 +1,35 @@
 <footer id="footer" class="wrapper">
   <div class="inner">
-    <div id="footer-copyright">
-      &copy; {{ moment(Date.now()).year() }} <a href="https://cypress.io" target="_blank">{{ config.author }}</a>
+  <div class="bottom">
+    <div class="row">
+      <div id="footer-copyright">
+        &copy; {{ moment(Date.now()).year() }} {{ config.author }}
+      </div>
+      <div id="footer-social">
+        <ul class="list-unstyled list-inline">
+          <li>
+            <a href="https://github.com/{{ config.github_main_repo }}">
+              <i class="fa fa-github" title="Github Repo"></i>
+            </a>
+          </li>
+          <li>
+            <a href="https://twitter.com/{{ config.twitter_username }}">
+              <i class="fa fa-twitter" title="@{{ config.twitter_username }}"></i>
+            </a>
+          </li>
+          <li>
+            <a href="https://facebook.com/{{ config.facebook_username }}">
+              <i class="fa fa-facebook" title="Facebook"></i>
+            </a>
+          </li>
+          <li>
+            <a href="mailto:{{ config.email }}">
+              <i class="fa fa-envelope" title="Email us"></i>
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
+  </div>
 </footer>

docs/themes/cypress/source/css/_partial/footer.scss

@@ -1,19 +1,24 @@
 #footer {
-  padding: 40px 0;
+  padding: 10px 0 15px;
   color: $white_60;
   font-family: $font-title;
   position: relative;
   background: $color-background;
   text-align: center;
+  font-size: 14px;
+  clear: both;
+
   &:before {
     content: "";
     display: table;
   }
+
   &:after {
     content: "";
     display: table;
     clear: both;
   }
+
   a {
     color: inherit;
     text-decoration: none;
@@ -22,6 +27,26 @@
       color: $white;
     }
   }
+
+  .bottom {
+    color: #878B97;
+    font-weight: 300;
+    padding-top: 20px;
+    overflow: auto;
+
+    a {
+      color: #878B97;
+      margin-left: 10px;
+
+      &:hover {
+        color: $white;
+      }
+
+      i {
+        font-size: 20px;
+      }
+    }
+  }
 }
 #footer-copyright {
   line-height: 1.4;
@@ -29,13 +54,16 @@
     font-weight: bold;
   }
 }
-#footer-links {
-  margin-top: 1em;
-}
-.footer-link {
-  font-size: 30px;
-  margin-left: 20px;
-  &:first-child {
-    margin-left: 0;
+
+#footer-social {
+  float: right;
+
+  ul {
+    list-style: none;
+  }
+
+  li {
+    float: left;
+    margin-left: 10px;
   }
 }

docs/themes/cypress/source/css/_partial/media_queries.scss

@@ -133,4 +133,12 @@
       width: 100% !important;
     }
   }
+
+  #footer-social {
+    width: 200px;
+    margin: 10px auto;
+    border-top: 1px solid #333;
+    padding: 10px 20px;
+    float: none;
+  }
 }