add contribute and footer to home

docs-assets/css/docs.css

@@ -718,6 +718,11 @@ body {
   line-height: 34px;
 }
 
+.docs-section {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
 .section-header {
   text-align: center;
 }
@@ -746,9 +751,29 @@ body {
   font-weight: 100;
 }
 
+.social {
+  padding: 20px 0 20px;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+  border-bottom: 1px solid #eee;
+  background-color: #f9f9f9;
+}
+.social li {
+  height: 20px;
+  display: inline-block;
+  vertical-align: top;
+}
+.social [class*="button"] {
+  padding: 0;
+  border: 0;
+}
+.social iframe {
+  background-color: transparent;
+}
+
 .docs-benefits {
-  padding-top: 80px;
-  padding-bottom: 80px;
+  padding-bottom: 0;
   text-align: center;
 }
 
@@ -780,25 +805,48 @@ body {
   color: #777;
 }
 
-.social {
-  padding: 20px 0 20px;
-  margin: 0;
-  list-style: none;
+.docs-contribute {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  color: #fff;
   text-align: center;
-  border-bottom: 1px solid #eee;
-  background-color: #f9f9f9;
+  background-color: #00d1fe;
 }
-.social li {
-  height: 20px;
+.docs-contribute .link {
   display: inline-block;
-  vertical-align: top;
+  margin-top: 5px;
+  color: #fff;
+  text-decoration: underline;
 }
-.social [class*="button"] {
-  padding: 0;
-  border: 0;
+
+.contribute-heading,
+.contribute-text {
+  margin-top: 0;
 }
-.social iframe {
-  background-color: transparent;
+
+.contribute-heading {
+  margin-bottom: 5px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.contribute-text {
+  margin-bottom: 0;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.docs-footer {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  background-color: #254456;
+}
+.docs-footer .footer-content {
+  opacity: .7;
+}
+.docs-footer .footer-content a {
+  color: #fff;
 }
 
 .docs-masthead {

index.html

@@ -37,7 +37,7 @@ base_url: "./"
 </ul>
 
 <!-- Benefits -->
-<section class="docs-benefits">
+<section class="docs-benefits docs-section">
   <div class="container column-group">
     <div class="section-header column units-2">
       <h2 class="section-heading">Getting started</h2>
@@ -84,3 +84,34 @@ base_url: "./"
     </div>
   </div>
 </section>
+
+<section class="docs-contribute docs-section">
+  <div class="container column-group">
+    <div class="column units-2 lg-units-4">
+      <h3 class="contribute-heading">Contribute code</h3>
+      <p class="contribute-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+      <a class="link" href="#">GitHub project</a>
+    </div>
+    <div class="column units-2 lg-units-4">
+      <h3 class="contribute-heading">Submit an issue</h3>
+      <p class="contribute-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+      <a class="link" href="#">GitHub issues</a>
+    </div>
+    <div class="column units-2 lg-units-4">
+      <h3 class="contribute-heading">Ask a question</h3>
+      <p class="contribute-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+      <a class="link" href="#">Google group</a>
+    </div>
+  </div>
+</section>
+
+<footer class="docs-footer docs-section">
+  <div class="container column-group">
+    <div class="column units-2">
+      <p class="footer-content">Code licensed under the MIT license. Version v2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
+    </div>
+  </div>
+</footer>

lib/sass/docs.scss

@@ -108,6 +108,14 @@ body {
   font-weight: 100;
   line-height: 34px;
 }
+
+
+// Content sections
+// --------------------------------------------------
+.docs-section {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
 .section-header {
   text-align: center;
 
@@ -134,12 +142,38 @@ body {
   font-weight: 100;
 }
 
-// Benefits
+
+// Overriding the button styles for the social
 // --------------------------------------------------
 
+.social {
+  padding: 20px 0 20px;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+  border-bottom: 1px solid #eee;
+  background-color: #f9f9f9;
+
+  li {
+    height: 20px;
+    display: inline-block;
+    vertical-align: top;
+  }
+  [class*="button"] { 
+    padding: 0;
+    border: 0;
+  }
+  // Remove after button class changes.
+  iframe {
+    background-color: transparent;
+  }
+}
+
+
+// Benefits
+// --------------------------------------------------
 .docs-benefits {
-  padding-top: 80px;
-  padding-bottom: 80px;
+  padding-bottom: 0;
   text-align: center;
 }
 .benefit-icon {
@@ -170,29 +204,54 @@ body {
 }
 
 
-// Overriding the button styles for the social
+// Contribute
 // --------------------------------------------------
 
-.social {
-  padding: 20px 0 20px;
-  margin: 0;
-  list-style: none;
+.docs-contribute {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  color: #fff;
   text-align: center;
-  border-bottom: 1px solid #eee;
-  background-color: #f9f9f9;
+  background-color: #00d1fe;
 
-  li {
-    height: 20px;
+  .link {
     display: inline-block;
-    vertical-align: top;
+    margin-top: 5px;
+    color: #fff;
+    text-decoration: underline;
   }
-  [class*="button"] { 
-    padding: 0;
-    border: 0;
 }
-  // Remove after button class changes.
-  iframe {
-    background-color: transparent;
+.contribute-heading,
+.contribute-text {
+  margin-top: 0;
+}
+.contribute-heading {
+  margin-bottom: 5px;
+  font-size: 18px;
+  font-weight: 500;
+}
+.contribute-text {
+  margin-bottom: 0;
+  color: rgba(255,255,255,.85);
+}
+
+
+// Footer
+// --------------------------------------------------
+
+.docs-footer {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: rgba(255,255,255,.7);
+  text-align: center;
+  background-color: #254456;
+
+  .footer-content {
+    opacity: .7;
+    
+    a {
+      color: #fff;
+    }
   }
 }