update footer and grunt

6 files changed, 108 insertions, 73 deletions

diff --git a/Gruntfile.js b/Gruntfile.js
index 85cd2ee..d5e887e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -53,9 +53,7 @@ module.exports = function(grunt) {
           '<%= meta.distPath %>ios-theme.css': 'sass/theme-ios.scss',
           '<%= meta.distPath %>android-theme.css': 'sass/theme-android.scss',
           '<%= meta.docsAssetsPath %>css/docs.css': 'sass/docs.scss',
-          '<%= meta.docsPath %><%= pkg.name %>.css': 'sass/ratchet.scss',
-          '<%= meta.docsPath %>ios-theme.css': 'sass/theme-ios.scss',
-          '<%= meta.docsPath %>android-theme.css': 'sass/theme-android.scss'
+          '<%= meta.docsPath %><%= pkg.name %>.css': '<%= meta.distPath %><%= pkg.name %>.css'
         }
       }
     },
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index f6c3882..9b475a7 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -1 +1,18 @@
-<p class="docs-mini-footer">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
+<div class="docs-footer">
+  <!-- Social links -->
+  <ul class="social">
+    <li>
+      <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+    </li>
+    <li>
+      <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+    </li>
+    <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
+      Follow @GoRatchet</a>
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+    </li>
+  </ul>
+
+  <p class="docs-footer-content">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
+</div>
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6a9ffc5..89834c6 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -43,7 +43,7 @@ body {
 
 .docs-header {
   height: 100vh;
-  min-height: 620px;
+  min-height: 700px;
 }
 .docs-header .carbonad {
   position: absolute !important;
@@ -311,31 +311,47 @@ body {
   font-weight: 300;
 }
 
-.social {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 20px 0 20px;
+.docs-footer {
+  border-top: 1px solid #ddd;
+  margin-top: 50px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  text-align: center;
+}
+.docs-footer .social {
+  padding: 0 0 20px;
   margin: 0;
   list-style: none;
-  text-align: center;
-  background-color: rgba(0, 0, 0, 0.2);
 }
-.social li {
+.docs-footer .social li {
   height: 20px;
   display: inline-block;
   vertical-align: top;
 }
-.social .twitter-follow-button {
+.docs-footer .social .twitter-follow-button {
   margin-top: 5px;
 }
 
-.docs-mini-footer {
-  padding-top: 40px;
-  padding-bottom: 40px;
+.docs-footer-content {
   margin: 0;
   color: #777;
+  font-size: 12px;
+}
+
+.docs-header .docs-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin-top: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.docs-header .docs-footer .docs-footer-content {
+  color: rgba(255, 255, 255, 0.5);
+}
+.docs-header .docs-footer .docs-footer-content a {
+  font-weight: bold;
+  color: rgba(255, 255, 255, 0.8);
 }
 
 .docs-component-toolbar {
@@ -375,6 +391,7 @@ body {
 
 .docs-examples {
   margin-top: 30px;
+  margin-bottom: 50px;
 }
 
 .docs-example-group {
@@ -418,6 +435,9 @@ code {
   margin-right: -15px;
   border-bottom: 1px solid #ddd;
 }
+.component.no-border {
+  border-bottom: 0;
+}
 
 .component-title {
   margin-bottom: 10px;
@@ -630,10 +650,10 @@ hr {
 
 @media screen and (min-width: 768px) {
   .docs-header {
-    min-height: 770px;
+    min-height: 830px;
   }
   .docs-header .carbonad {
-    bottom: 130px !important;
+    bottom: 180px !important;
     left: 50% !important;
     margin-left: -165px !important;
   }
@@ -679,8 +699,6 @@ hr {
 
   .docs-nav {
     float: right;
-    margin-top: 3px;
-    margin-bottom: -3px;
   }
   .docs-nav .docs-nav-trigger {
     display: none;
@@ -778,8 +796,8 @@ hr {
     border-radius: 3px !important;
   }
 
-  .social .twitter-follow-button {
-    margin-top: 0;
+  .docs-footer .social .twitter-follow-button {
+    margin-top: 0px;
   }
 
   .step-title {
diff --git a/docs/components.html b/docs/components.html
index da0ae91..e2f5805 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1226,7 +1226,7 @@ window.addEventListener('push', myFunction);
       </article>
 
       <!-- Ratchicons -->
-    <article class="component" id="ratchicons">
+    <article class="component no-border" id="ratchicons">
       <h3 class="component-title">Ratchicons</h3>
       <p class="component-description">Use Ratchicons in your application to help inform interactions.</p>
 
diff --git a/docs/index.html b/docs/index.html
index 13f5f8d..fd3e832 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -11,19 +11,5 @@ title: Ratchet
   </div>
 
   {% include ad.html %}
-
-  <!-- Social links -->
-  <ul class="social">
-    <li>
-      <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
-    </li>
-    <li>
-      <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
-      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-    </li>
-    <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
-      Follow @GoRatchet</a>
-      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-    </li>
-  </ul>
+  {% include footer.html %}
 </div>
diff --git a/sass/docs.scss b/sass/docs.scss
index 9be20b8..56f52ce 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -44,7 +44,7 @@ body {
 }
 .docs-header {
   height: 100vh;
-  min-height: 620px;
+  min-height: 700px;
 
   // Ad on the homepage
   .carbonad {
@@ -301,39 +301,52 @@ body {
 }
 
 
-// Overriding the button styles for the social
+// Footer
 // --------------------------------------------------
 
-.social {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 20px 0 20px;
-  margin: 0;
-  list-style: none;
+.docs-footer {
+  border-top: 1px solid #ddd;
+  margin-top: 50px;
+  padding-top: 30px;
+  padding-bottom: 30px;
   text-align: center;
-  background-color: rgba(0,0,0,.2);
 
-  li {
-    height: 20px;
-    display: inline-block;
-    vertical-align: top;
-  }
-  .twitter-follow-button {
-    margin-top: 5px;
+  .social {
+    padding: 0 0 20px;
+    margin: 0;
+    list-style: none;
+
+    li {
+      height: 20px;
+      display: inline-block;
+      vertical-align: top;
+    }
+    .twitter-follow-button {
+      margin-top: 5px;
+    }
   }
 }
-
-
-// Footer
-// --------------------------------------------------
-
-.docs-mini-footer {
-  padding-top: 40px;
-  padding-bottom: 40px;
+.docs-footer-content {
   margin: 0;
   color: #777;
+  font-size: 12px;
+}
+.docs-header .docs-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin-top: 0;
+  border-top: 1px solid rgba(255,255,255,.1);
+
+  .docs-footer-content {
+    color: rgba(255,255,255,.5);
+
+    a {
+      font-weight: bold;
+      color: rgba(255,255,255,.8);
+    }
+  }
 }
 
 
@@ -375,6 +388,7 @@ body {
 
 .docs-examples {
   margin-top: 30px;
+  margin-bottom: 50px;
 }
 .docs-example-group {
   margin-top: 30px;
@@ -423,6 +437,10 @@ code {
   margin-left: -15px;
   margin-right: -15px;
   border-bottom: 1px solid #ddd;
+
+  &.no-border {
+    border-bottom: 0;
+  }
 }
 .component-title {
   margin-bottom: 10px;
@@ -645,11 +663,11 @@ hr {
 // Tablet to desktop 
 @media screen and (min-width: 768px) {
   .docs-header {
-    min-height: 770px;
+    min-height: 830px;
 
     // Ads on the homepage
     .carbonad {
-      bottom: 130px !important;
+      bottom: 180px !important;
       left: 50% !important;
       margin-left: -165px !important;
     }
@@ -687,8 +705,6 @@ hr {
   // Docs nav
   .docs-nav {
     float: right;
-    margin-top: 3px;
-    margin-bottom: -3px;
 
     .docs-nav-trigger {
       display: none;
@@ -791,9 +807,9 @@ hr {
   }
 
   // Social
-  .social {
-    .twitter-follow-button {
-      margin-top: 0;
+  .docs-footer {
+    .social .twitter-follow-button {
+      margin-top: 0px;
     }
   }