new header direction

docs-assets/css/docs.css

@@ -636,26 +636,25 @@ body {
   -webkit-text-size-adjust: 100%;
 }
 
-.docs-home {
-  background-image: linear-gradient(45deg, #02b8ea 0%, #03afbf 50%, #0367bf 100%);
-  background-repeat: no-repeat;
+.docs-header {
+  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
 }
 
 .docs-nav {
   padding-top: 12px;
   padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 .docs-nav .icon {
   margin-top: 5px;
   color: #fff;
-  opacity: .5;
+  opacity: .4;
   cursor: pointer;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
 .docs-nav .icon:hover {
-  opacity: .8;
+  opacity: 1;
 }
 
 .docs-nav,
@@ -664,11 +663,13 @@ body {
 }
 
 .docs-header-content {
-  margin-top: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }
 .docs-header-content .button {
-  color: #03afbf;
-  border-color: #fff;
+  color: #fff;
+  border-color: #00d1fe;
+  background-color: #00d1fe;
 }
 
 .docs-title,
@@ -690,15 +691,21 @@ body {
   font-size: 24px;
   font-weight: 100;
   line-height: 34px;
-  opacity: .8;
 }
 
-.social {
+.docs-benefits {
   display: none;
-  margin: 20px 0 20px;
-  padding: 0;
+  text-align: center;
+  font-size: 18px;
+}
+
+.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;
@@ -933,7 +940,8 @@ hr {
 
 @media screen and (min-width: 768px) {
   .docs-header-content {
-    margin-top: 100px;
+    padding-top: 100px;
+    padding-bottom: 130px;
   }
   .docs-header-content .button {
     max-width: 300px;
@@ -947,11 +955,6 @@ hr {
     line-height: 60px;
   }
 
-  .social {
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
   .device {
     position: relative;
     top: 50px;

index.html

@@ -4,6 +4,7 @@ title: Ratchet
 base_url: "./"
 ---
 
+<div class="docs-header">
   <div class="container column-group">
     <div class="column units-2">
       <header class="docs-nav">
@@ -17,6 +18,33 @@ base_url: "./"
     <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
     <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
   </div>
+</div>
+
+<section class="docs-benefits">
+  <div class="container column-group">
+    <div class="column units-1 lg-units-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+    <div class="column units-1 lg-units-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+  </div>
+
+  <div class="container column-group">
+    <div class="column units-1 lg-units-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+    <div class="column units-1 lg-units-6">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+  </div>
+</section>
+
+
 
 <ul class="social">
   <li>

lib/sass/docs.scss

@@ -30,24 +30,23 @@ body {
 // Jumbotron
 // --------------------------------------------------
 
-.docs-home {
-  background-image: linear-gradient(45deg, rgba(2,184,234,1) 0%,rgba(3,175,191,1) 50%,rgba(3,103,191,1) 100%);
-  background-repeat: no-repeat;
+.docs-header {
+  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
 }
 .docs-nav {
   padding-top: 12px;
   padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255,255,255,.2);
+  border-bottom: 1px solid rgba(255,255,255,.1);
 
   .icon {
     margin-top: 5px;
     color: #fff;
-    opacity: .5;
+    opacity: .4;
     cursor: pointer;
     @include transition(opacity .2s linear);
 
     &:hover {
-      opacity: .8;
+      opacity: 1;
     }
   }
 }
@@ -56,11 +55,13 @@ body {
   text-align: center;
 }
 .docs-header-content {
-  margin-top: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 
   .button {
-    color: rgb(3,175,191);
-    border-color: #fff;
+    color: #fff;
+    border-color: #00d1fe;
+    background-color: #00d1fe;
   }
 }
 .docs-title,
@@ -80,7 +81,15 @@ body {
   font-size: 24px;
   font-weight: 100;
   line-height: 34px;
-  opacity: .8;
+}
+
+// Benefits
+// --------------------------------------------------
+
+.docs-benefits {
+  display: none;
+  text-align: center;
+  font-size: 18px;
 }
 
 
@@ -88,11 +97,12 @@ body {
 // --------------------------------------------------
 
 .social {
-  display: none;
-  margin: 20px 0 20px;
-  padding: 0;
+  padding: 20px 0 20px;
+  margin: 0;
   list-style: none;
   text-align: center;
+  border-bottom: 1px solid #eee;
+  background-color: #f9f9f9;
 
   li {
     height: 20px;
@@ -341,7 +351,8 @@ hr {
 @media screen and (min-width: 768px) {
   // Jumbotron
   .docs-header-content {
-    margin-top: 100px;
+    padding-top: 100px;
+    padding-bottom: 130px;
     
     .button {
       max-width: 300px;
@@ -355,12 +366,6 @@ hr {
     line-height: 60px;
   }
 
-  // Social
-  .social {
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
   // Device
   .device {
     position: relative;