Derping on the docs. Still needs a complete rewrite.

assets/css/docs.css

@@ -190,8 +190,7 @@ h6 {
 .docs-header {
   height: 530px;
   margin-top: 60px;
-  background-color: #fff;
-  background-size: cover;
+  background-color: #fafafa;
 }
 
 .docs-header-text {
@@ -218,23 +217,23 @@ h6 {
   padding: 18px 40px;
   color: #fff;
   font-size: 24px;
-  font-weight: 700;
+  font-weight: 400;
   text-decoration: none;
   line-height: 1;
-  background-color: #f26629; /* Old browsers */
+  background-color: #007aff;
   border-radius: 3px;
+  -webkit-transition: background .2s linear;
+          transition: background .2s linear;
 }
 
 .docs-btn:hover {
   color: #fff;
-  background-color: #ff7234; /* Old browsers */
+  background-color: #218bff;
 }
 
 .docs-btn:active {
-  padding: 19px 40px 17px;
-  background-color: #cd2a02;
+  background-color: #006add;
   background-image: none;
-  box-shadow: inset 0 0 5px rgba(0,0,0,.15);
 }
 
 /* Styles for the social media buttons */
@@ -374,7 +373,6 @@ h6 {
 .section-informational {
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
-  background-color: #fafafa;
   padding-bottom: 70px;
 }
 
@@ -383,7 +381,6 @@ h6 {
 
 .steps {
   overflow: hidden;
-  padding-top: 40px;
   padding-left: 0;
   margin: 0;
 }
@@ -393,12 +390,32 @@ h6 {
   width: 306px;
   margin-right: 40px;
   list-style: none;
+  text-align: center;
+}
+
+.step-icon {
+  display: block;
+  width: 90px;
+  height: 90px;
+  margin: 0 auto 20px;
+  border: 1px solid #ddd;
+  border-radius: 45px;
+}
+.step-icon .icon {
+  font-size: 40px;
+  line-height: 90px;
+  background: -webkit-linear-gradient(#23e2bf, #1769f3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.step-icon .icon-download {
+  margin-top: -5px;
 }
 
 .step-title {
   margin: 0;
   font-size: 18px;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .step-description {
@@ -407,6 +424,10 @@ h6 {
   margin-bottom: 10px;
 }
 
+.step-description .icon {
+  font-size: 16px;
+}
+
 .steps .step:last-child {
   margin-right: 0;
 }
@@ -1009,54 +1030,60 @@ pre {
 @-webkit-keyframes fadeintext {
   0% {
    opacity: 0;
-   -webkit-transform: translateY(20px);
+   -webkit-transform: scale(.9);
   }
   50% {
    opacity: 0;
-   -webkit-transform: translateY(20px);
+   -webkit-transform: scale(.9);
   }
   100% {
    opacity: 1;
-   -webkit-transform: translateY(0);
+   -webkit-transform: scale(1);
   }
 }
 
 @-webkit-keyframes fadeinsocial {
   0% {
    opacity: 0;
+   -webkit-transform: scale(.9);
   }
-  85% {
+  50% {
    opacity: 0;
+   -webkit-transform: scale(.9);
   }
   100% {
    opacity: 1;
+   -webkit-transform: scale(1);
   }
 }
 
 @-moz-keyframes fadeintext {
   0% {
    opacity: 0;
-   -moz-transform: translateY(20px);
+   -moz-transform: scale(.9);
   }
   50% {
    opacity: 0;
-   -moz-transform: translateY(20px);
+   -moz-transform: scale(.9);
   }
   100% {
    opacity: 1;
-   -moz-transform: translateY(0);
+   -moz-transform: scale(1);
   }
 }
 
 @-moz-keyframes fadeinsocial {
   0% {
    opacity: 0;
+   -webkit-transform: scale(.9);
   }
   85% {
    opacity: 0;
+   -webkit-transform: scale(.9);
   }
   100% {
    opacity: 1;
+   -webkit-transform: scale(1);
   }
 }
 

index.html

@@ -5,23 +5,32 @@ layout: default
 <div class="docs-outer-wrapper docs-content">
   <section class="content-section section-informational" id="gettingStarted">
     <div class="docs-inner-wrapper">
-      <div class="section-header">
+      <!--<div class="section-header">
         <h2 class="section-title">Getting started</h2>
         <p class="section-description">Once you've downloaded Ratchet, here's what to do next.</p>
-      </div>
+      </div>-->
 
       <ol class="steps">
-          <li class="step">
-          <h3 class="step-title">1. Create your pages</h3>
+        <li class="step">
+          <div class="step-icon">
+            <span class="icon icon-pages"></span>
+          </div>
+          <h3 class="step-title">Create your pages</h3>
           <p class="step-description">Use these docs as a reference for all the available components and piece together the pages of your app. 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>
+          <div class="step-icon">
+            <span class="icon icon-refresh"></span>
+          </div>
+          <h3 class="step-title">Connect pages with push.js</h3>
           <p class="step-description">Read about <a href="#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 <img class="share-icon" src="img/icon-share.png"> button and "Add to Home Screen".</p>
+          <div class="step-icon">
+            <span class="icon icon-download"></span>
+          </div>
+          <h3 class="step-title">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-download"></span> button and "Add to Home Screen".</p>
         </li>
       </ol>
     </div>