patch up the getting started pages

docs/_includes/footer.html

@@ -1 +1 @@
-<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">Connor Sears</a>.</p>
+<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>

docs/assets/css/docs.css

@@ -259,7 +259,7 @@ body {
 }
 
 .section-heading {
-  font-size: 26px;
+  font-size: 22px;
   font-weight: 300;
 }
 
@@ -269,6 +269,48 @@ body {
   font-weight: 100;
 }
 
+.docs-steps {
+  margin-top: 20px;
+  padding: 0;
+  list-style: none;
+}
+
+.step {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.step-title,
+.step-description {
+  font-weight: 300;
+}
+
+.step-title {
+  font-size: 18px;
+}
+
+.step-title code {
+  font-size: 14px;
+}
+
+.step-description {
+  font-size: 14px;
+}
+
+.docs-module {
+  margin-top: 20px;
+  padding: 20px;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+}
+.docs-module .btn-block {
+  margin-bottom: 0;
+}
+
+.docs-module-title {
+  font-weight: 300;
+}
+
 .social {
   position: absolute;
   bottom: 0;
@@ -346,7 +388,7 @@ code {
 }
 
 .component-title {
-  margin-bottom: 15px;
+  margin-bottom: 10px;
   font-size: 24px;
   font-weight: 300;
   line-height: 34px;
@@ -355,6 +397,7 @@ code {
 .component-description {
   margin-bottom: 15px;
   font-size: 16px;
+  font-weight: 300;
 }
 
 .component-example {
@@ -707,27 +750,25 @@ hr {
     margin-top: 0;
   }
 
-  .docs-steps {
+  .step-title {
-    margin-top: 50px;
+    font-size: 24px;
-    padding: 0;
-    list-style: none;
   }
 
-  .step {
+  .step-title code {
-    padding-top: 30px;
+    font-size: 18px;
-    padding-bottom: 30px;
   }
 
-  .step-title,
   .step-description {
-    font-weight: 300;
+    font-size: 18px;
   }
 
-  .step-description {
+  .docs-module {
-    font-size: 18px;
+    margin-top: 35px;
   }
 
   .section-heading {
+    margin-top: 50px;
+    margin-bottom: 10px;
     font-size: 40px;
   }
 

docs/examples.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Ratchet · Getting Started
+title: Examples · Ratchet
 ---
 
 <div class="docs-sub-header">

docs/getting-started.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Ratchet · Getting Started
+title: Getting started · Ratchet
 ---
 
 <div class="docs-sub-header">
@@ -24,21 +24,22 @@ title: Ratchet &middot; Getting Started
       <ol class="docs-steps">
         <li class="step">
           <h3 class="step-title">1. Create your pages</h3>
-          <p class="step-description">Use the <a href="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples">example applications</a>. Customize the style too - make the prototype all your own.</p>
+          <p class="step-description">Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Customize the style too - make the prototype all your own.</p>
         </li>
         <li class="step">
           <h3 class="step-title">2. Connect pages with push.js</h3>
-          <p class="step-description">Read about <a href="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
+          <p class="step-description">Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
         </li>
         <li class="step">
           <h3 class="step-title">3. Save the prototype to your phone</h3>
-          <p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen".</p>
+          <p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen".</p>
         </li>
       </ol>
 
       <hr> 
 
-      <h2>Page setup</h2>
+      <h2 class="section-heading">Page setup</h2>
+      <p class="section-lead">Three simple rules for structuring your Ratchet pages</p>
       <ol class="docs-steps">
         <li class="step">
           <h3 class="step-title">1. Fixed bars come first</h3>
@@ -57,7 +58,8 @@ title: Ratchet &middot; Getting Started
 
       <hr> 
 
-      <h2>Basic template</h2>
+      <h2 id="pageLayout" class="section-heading">Basic template</h2>
+      <p class="section-lead">Use this basic template to get your app started.</p>
 {% highlight html %}
 <!DOCTYPE html>
 <html>
@@ -97,7 +99,7 @@ title: Ratchet &middot; Getting Started
             </a>
           </li>
           <li class="table-view-cell">
-            <a class="push-right" href="https\://www.github.com/maker/ratchet/">
+            <a class="push-right" href="https://www.github.com/maker/ratchet/">
               <strong>Ratchet on Github</strong>
             </a>
           </li>
@@ -119,7 +121,16 @@ title: Ratchet &middot; Getting Started
 </html>
 {% endhighlight %}
     </div>
+
+    <div class="column units-2 lg-units-4">
+      <div class="docs-module">
+        <h4 class="docs-module-title">Download Ratchet</h4>
+        <p>If you haven't already, download the cource code for Ratchet.</p>
+        <a href="#" class="btn btn-block btn-primary" data-ignore="push">Download Ratchet</a>
+      </div>
     </div>
+  </div>
+
   <div class="column units-2">
     <!-- Footer -->
     {% include footer.html %}

sass/docs.scss

@@ -250,7 +250,7 @@ body {
   margin-bottom: 0;
 }
 .section-heading {
-  font-size: 26px;
+  font-size: 22px;
   font-weight: 300;
 }
 .section-lead {
@@ -259,6 +259,47 @@ body {
   font-weight: 100;
 }
 
+// Steps
+// --------------------------------------------------
+
+.docs-steps {
+  margin-top: 20px;
+  padding: 0;
+  list-style: none;
+}
+.step {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+.step-title,
+.step-description {
+  font-weight: 300;
+}
+.step-title {
+  font-size: 18px
+}
+.step-title code {
+  font-size: 14px;
+}
+.step-description {
+  font-size: 14px;
+}
+
+// Docs modules 
+.docs-module {
+  margin-top: 20px;
+  padding: 20px;
+  border: $border-default;
+  border-radius: 3px;
+
+  .btn-block {
+    margin-bottom: 0;
+  }
+}
+.docs-module-title {
+  font-weight: 300;
+}
+
 
 // Overriding the button styles for the social
 // --------------------------------------------------
@@ -344,7 +385,7 @@ code {
   border-bottom: 1px solid #ddd;
 }
 .component-title {
-  margin-bottom: 15px;
+  margin-bottom: 10px;
   font-size: 24px;
   font-weight: 300;
   line-height: 34px;
@@ -352,6 +393,7 @@ code {
 .component-description {
   margin-bottom: 15px;
   font-size: 16px;
+  font-weight: 300;
 }
 .component-example {
   font-family: $font-family-default;
@@ -716,27 +758,27 @@ hr {
   }
 
   // Steps
-  .docs-steps {
+  .step-title {
-    margin-top: 50px;
+    font-size: 24px;
-    padding: 0;
-    list-style: none;
-  }
-  .step {
-    padding-top: 30px;
-    padding-bottom: 30px;
   }
-  .step-title,
+  .step-title code {
-  .step-description {
+    font-size: 18px;
-    font-weight: 300;
   }
   .step-description {
     font-size: 18px;
   }
 
+  // Docs modules 
+  .docs-module {
+    margin-top: 35px;
+  }
+
 
   // Content sections
   // --------------------------------------------------
   .section-heading {
+    margin-top: 50px;
+    margin-bottom: 10px;
     font-size: 40px;
   }
   .section-lead {