tidy up the homepage

docs-assets/css/docs.css

@@ -160,12 +160,12 @@ body {
 }
 
 .section-heading {
-  font-size: 40px;
+  font-size: 26px;
   font-weight: 300;
 }
 
 .section-lead {
-  font-size: 24px;
+  font-size: 18px;
   color: #777;
   font-weight: 100;
 }
@@ -190,6 +190,9 @@ body {
 .social iframe {
   background-color: transparent;
 }
+.social .twitter-follow-button {
+  margin-top: 5px;
+}
 
 .docs-benefits {
   padding-bottom: 0;
@@ -240,6 +243,12 @@ body {
   color: #fff;
   text-decoration: underline;
 }
+.docs-contribute .column {
+  margin-bottom: 40px;
+}
+.docs-contribute .column:last-child {
+  margin-bottom: 0;
+}
 
 .contribute-heading,
 .contribute-text {
@@ -501,10 +510,26 @@ hr {
   }
 
   .docs-nav .icon {
-    top: 18px;
+    top: 19px;
   }
   .docs-nav .version {
-    top: 17px;
+    top: 21px;
+  }
+
+  .social .twitter-follow-button {
+    margin-top: 0;
+  }
+
+  .docs-contribute .column {
+    margin-bottom: 0;
+  }
+
+  .section-heading {
+    font-size: 40px;
+  }
+
+  .section-lead {
+    font-size: 24px;
   }
 
   .device {

index.html

@@ -44,31 +44,28 @@ base_url: "./"
       <h2 class="section-heading">The mobile framework built for you</h2>
       <p class="section-lead">Here's why we think you're going to love it.</p>
     </div>
-    <div class="column units-1 lg-units-6">
+    <div class="column units-2 lg-units-6">
       <div class="benefit-icon">
         <span class="icon icon-code"></span>
       </div>
       <h3 class="benefit-heading">Simple web technology</h3>
       <p class="benefit-text">Ratchet is built simple HTML, CSS, and JS. We used the power of SASS to make Ratchet extremely capable at quickly building mobile applications you can start playing with right away.</p>
     </div>
-    <div class="column units-1 lg-units-6">
+    <div class="column units-2 lg-units-6">
       <div class="benefit-icon">
         <span class="icon icon-list"></span>
       </div>
       <h3 class="benefit-heading">Tons of UI patterns</h3>
       <p class="benefit-text">All the UI patterns that you'd expect in one simple framework. We've included our buttons, controls, forms, and behaviors that are optimized for performance in your app.</p>
     </div>
-  </div>
-
-  <div class="container column-group">
-    <div class="column units-1 lg-units-6">
+    <div class="column units-2 lg-units-6">
       <div class="benefit-icon">
         <span class="icon icon-pages"></span>
       </div>
       <h3 class="benefit-heading">Native platform themes</h3>
       <p class="benefit-text">Building an application for iOS or Android? Look no further. Ratchet provides platform specific themes that work on top of our standard components.</p>
     </div>
-    <div class="column units-1 lg-units-6"> 
+    <div class="column units-2 lg-units-6"> 
       <div class="benefit-icon">
         <span class="icon icon-download"></span>
       </div>

lib/sass/docs.scss

@@ -160,11 +160,11 @@ body {
   margin-bottom: 0;
 }
 .section-heading {
-  font-size: 40px;
+  font-size: 26px;
   font-weight: 300;
 }
 .section-lead {
-  font-size: 24px;
+  font-size: 18px;
   color: #777;
   font-weight: 100;
 }
@@ -194,6 +194,9 @@ body {
   iframe {
     background-color: transparent;
   }
+  .twitter-follow-button {
+    margin-top: 5px;
+  }
 }
 
 
@@ -250,6 +253,13 @@ body {
     color: #fff;
     text-decoration: underline;
   }
+  .column {
+    margin-bottom: 40px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 .contribute-heading,
 .contribute-text {
@@ -525,7 +535,6 @@ hr {
     line-height: 60px;
   }
   .docs-header-content {
-
     .button {
       display: inline-block;
       margin: 0;
@@ -539,13 +548,36 @@ hr {
   }
   .docs-nav {
     .icon {
-      top: 18px;
+      top: 19px;
     }
     .version {
-      top: 17px;
+      top: 21px;
     }
   }
 
+  // Social
+  .social {
+    .twitter-follow-button {
+      margin-top: 0;
+    }
+  }
+
+  // Contribution section
+  .docs-contribute {
+    .column {
+      margin-bottom: 0;
+    }
+  }
+
+  // Content sections
+  // --------------------------------------------------
+  .section-heading {
+    font-size: 40px;
+  }
+  .section-lead {
+    font-size: 24px;
+  }
+
   // Device
   .device {
     position: relative;