fixing up the homepage and adding the ad

docs/assets/css/docs.css

@@ -24,7 +24,7 @@ body {
 }
 
 .docs-header {
-  min-height: 700px;
+  position: relative;
   height: 100vh;
   background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
 }
@@ -40,36 +40,6 @@ body {
   content: '';
 }
 
-.docs-nav {
-  position: relative;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-.docs-nav .icon,
-.docs-nav .version {
-  position: absolute;
-  color: #fff;
-  opacity: .4;
-  -webkit-transition: opacity 0.2s linear;
-  -moz-transition: opacity 0.2s linear;
-  transition: opacity 0.2s linear;
-}
-.docs-nav .icon:hover,
-.docs-nav .version:hover {
-  opacity: 1;
-}
-.docs-nav .icon {
-  top: 13px;
-  right: 0;
-  cursor: pointer;
-}
-.docs-nav .version {
-  top: 14px;
-  left: 0;
-}
-
-.docs-nav,
 .docs-header-content {
   text-align: center;
 }
@@ -116,27 +86,62 @@ body {
   opacity: .5;
 }
 
-.docs-title,
-.docs-subtitle {
-  color: #fff;
-}
-
-.docs-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 6px;
-}
-
 .docs-subtitle {
   max-width: 750px;
   margin: 0 auto 20px;
   font-size: 26px;
   font-weight: 100;
+  color: #fff;
   line-height: 34px;
 }
 
+.carbonad {
+  position: absolute !important;
+  bottom: 90px !important;
+  left: 50% !important;
+  width: 330px !important;
+  height: auto !important;
+  padding: 15px !important;
+  margin-left: -165px !important;
+  font-size: 13px !important;
+  border-radius: 3px !important;
+  background: transparent !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+.carbonad-img {
+  margin: 0 !important;
+}
+
+.carbonad-text,
+.carbonad-text a,
+.carbonad-tag,
+.carbonad-tag a {
+  color: #fff !important;
+}
+
+.carbonad-text,
+.carbonad-tag {
+  display: block !important;
+  float: none !important;
+  width: auto !important;
+  height: auto !important;
+  margin-left: 145px !important;
+  color: white !important;
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+}
+
+.carbonad-text {
+  padding-top: 0 !important;
+}
+
+.carbonad-tag {
+  text-align: left !important;
+}
+.carbonad-tag a {
+  color: #fff !important;
+}
+
 .docs-sub-content {
   padding-top: 50px;
   color: #fff;
@@ -194,12 +199,15 @@ body {
 }
 
 .social {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   padding: 20px 0 20px;
   margin: 0;
   list-style: none;
   text-align: center;
-  border-bottom: 1px solid #eee;
+  background-color: rgba(0, 0, 0, 0.2);
-  background-color: #f9f9f9;
 }
 .social li {
   height: 20px;
@@ -493,9 +501,23 @@ hr {
 }
 
 @media screen and (min-width: 768px) {
+  .docs-header {
+    min-height: 770px;
+  }
+
+  .docs-title {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 100;
+    opacity: .4;
+  }
+
   .docs-header-content {
     position: relative;
-    top: 50%;
+    top: 37%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
@@ -511,8 +533,22 @@ hr {
     display: inline-block;
   }
 
-  .docs-title {
+  .docs-logo {
-    font-size: 22px;
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 15px;
+    color: #fff;
+    font-weight: 300;
+    line-height: 68px;
+    border: 1px solid #fff;
+    border-radius: 40px;
+  }
+
+  .docs-nav {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    color: #fff;
   }
 
   .social .twitter-follow-button {

docs/index.html

@@ -4,14 +4,18 @@ title: Ratchet
 ---
 
 <div class="docs-header">
+  <h1 class="docs-title">Ratchet</h1>
+  <a class="docs-nav icon icon-bars" href="/components" data-ignore="push"></a>
   <div class="docs-header-content">
-    <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
+    <h2 class="docs-logo">R</h2>
+    <p class="docs-subtitle">Build mobile apps with simple HTML&#8218; CSS&#8218; and JS components.</p>
     <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
   </div>
-</div>
+
+  <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
 
   <!-- Social links -->
-<!--<ul class="social">
+  <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>
@@ -23,12 +27,5 @@ title: Ratchet
       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>-->
+  </ul>
-
-<!-- <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. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
-    </div>
 </div>
-</footer> -->

sass/docs.scss

@@ -24,7 +24,7 @@ body {
 // --------------------------------------------------
 
 .docs-header {
-  min-height: 700px;
+  position: relative;
   height: 100vh;
   background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
 
@@ -40,34 +40,6 @@ body {
     content: '';
   }
 }
-.docs-nav {
-  position: relative;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255,255,255,.1);
-
-  .icon,
-  .version {
-    position: absolute;
-    color: #fff;
-    opacity: .4;
-    @include transition(opacity .2s linear);
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-  .icon {
-    top: 13px;
-    right: 0;
-    cursor: pointer;
-  }
-  .version {
-    top: 14px;
-    left: 0;
-  }
-}
-.docs-nav,
 .docs-header-content {
   text-align: center;
 }
@@ -109,28 +81,62 @@ body {
     }
   }
 }
-.docs-title,
-.docs-subtitle {
-  color: #fff;
-}
-.docs-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 6px;
-}
 .docs-subtitle {
   max-width: 750px;
   margin: 0 auto 20px;
   font-size: 26px;
   font-weight: 100;
+  color: #fff;
   line-height: 34px;
 }
 
+// Ads
+.carbonad {
+  position: absolute !important;
+  bottom: 90px !important;
+  left: 50% !important;
+  width: 330px !important;
+  height: auto !important;
+  padding: 15px !important;
+  margin-left: -165px !important;
+  font-size: 13px !important;
+  border-radius: 3px !important;
+  background: transparent !important;
+  border: 1px solid rgba(255,255,255,.1) !important;
+}
+.carbonad-img {
+  margin: 0 !important;
+}
+.carbonad-text,
+.carbonad-text a,
+.carbonad-tag,
+.carbonad-tag a {
+  color: #fff !important;
+}
+.carbonad-text,
+.carbonad-tag {
+  display: block !important;
+  float: none !important;
+  width: auto !important;
+  height: auto !important;
+  margin-left: 145px !important;
+  color: #fff!important;
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+}
+.carbonad-text {
+  padding-top: 0 !important;
+}
+.carbonad-tag {
+  text-align: left !important;
+
+  a {
+    color: #fff !important;
+  }
+}
 
 // Subpage Header
 // --------------------------------------------------
+
 .docs-sub-content {
   padding-top: 50px;
   color: #fff;
@@ -193,12 +199,15 @@ body {
 // --------------------------------------------------
 
 .social {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   padding: 20px 0 20px;
   margin: 0;
   list-style: none;
   text-align: center;
-  border-bottom: 1px solid #eee;
+  background-color: rgba(0,0,0,.2);
-  background-color: #f9f9f9;
 
   li {
     height: 20px;
@@ -526,9 +535,21 @@ hr {
 // Tablet to desktop 
 @media screen and (min-width: 768px) {
   // Jumbotron
+  .docs-header {
+    min-height: 770px;
+  }
+  .docs-title {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 100;
+    opacity: .4;
+  }
   .docs-header-content {
     position: relative;
-    top: 50%;
+    top: 37%;
     @include transform(translateY(-50%));
   }
   .docs-subtitle {
@@ -541,8 +562,21 @@ hr {
       display: inline-block;
     }
   }
-  .docs-title {
+  .docs-logo {
-    font-size: 22px;
+    width: 70px;
+    height: 70px;
+    margin: 0 auto 15px;
+    color: #fff;
+    font-weight: 300;
+    line-height: 68px;
+    border: 1px solid #fff;
+    border-radius: 40px;
+  }
+  .docs-nav {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    color: #fff;
   }
 
   // Social