updating the homepage.

docs/assets/css/docs.css

@@ -26,7 +26,7 @@ body {
 .docs-header {
   min-height: 700px;
   height: 100vh;
-  background-image: linear-gradient(45deg, #0a1855 0%, #f11651 100%);
+  background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
 }
 .docs-header:before {
   position: fixed;
@@ -35,8 +35,8 @@ body {
   right: 0;
   left: 0;
   background-image: url(../img/pattern.png);
-  background-size: 50%;
+  background-size: 30%;
-  opacity: .5;
+  opacity: .035;
   content: '';
 }
 
@@ -76,11 +76,16 @@ body {
 
 .docs-header-content {
   padding: 50px 10px;
+  -webkit-animation-name: fadeintext;
+  -moz-animation-name: fadeintext;
+  animation-name: fadeintext;
+  -webkit-animation-duration: 3s;
+  -moz-animation-duration: 3s;
+  animation-duration: 3s;
 }
 .docs-header-content .btn {
   display: block;
-  padding: 15px 30px 16px;
+  padding: 15px 60px 16px;
-  margin: 0 10px 10px;
   font-size: 18px;
   color: rgba(255, 255, 255, 0.7);
   border-color: rgba(255, 255, 255, 0.7);
@@ -492,6 +497,7 @@ hr {
     position: relative;
     top: 50%;
     -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
     transform: translateY(-50%);
   }
 
@@ -503,10 +509,6 @@ hr {
 
   .docs-header-content .btn {
     display: inline-block;
-    margin: 0;
-  }
-  .docs-header-content .btn-primary {
-    margin-left: 10px;
   }
 
   .docs-title {
@@ -1746,14 +1748,16 @@ hr {
   padding: 0;
 }
 
-@-webkit-keyframes fadeOverlay {
+@-webkit-keyframes fadeintext {
-  from {
+  0% {
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+    opacity: 0;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
   }
 
-  to {
+  50% {
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+    opacity: 0;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+  }
+
+  100% {
+    opacity: 1;
   }
 }

docs/index.html

@@ -4,17 +4,8 @@ title: Ratchet
 ---
 
 <div class="docs-header">
-  <!-- <div class="container column-group">
-    <div class="column units-2">
-      <header class="docs-nav">
-        <h1 class="docs-title">Ratchet</h1>
-      </header>
-    </div>
-  </div> -->
-
   <div class="docs-header-content">
     <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
-    <a data-ignore="push" href="/components" class="btn btn-outlined">View the docs</a>
     <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>

sass/docs.scss

@@ -26,7 +26,7 @@ body {
 .docs-header {
   min-height: 700px;
   height: 100vh;
-  background-image: linear-gradient(45deg, #0a1855 0%,#f11651 100%);
+  background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
 
   &:before {
     position: fixed;
@@ -73,11 +73,12 @@ body {
 }
 .docs-header-content {
   padding: 50px 10px;
+  @include animation-name(fadeintext);
+  @include animation-duration(3s);
 
   .btn {
     display: block;
-    padding: 15px 30px 16px;
+    padding: 15px 60px 16px;
-    margin: 0 10px 10px;
     font-size: 18px;
     color: rgba(255,255,255,.7);
     border-color: rgba(255,255,255,.7);
@@ -528,8 +529,7 @@ hr {
   .docs-header-content {
     position: relative;
     top: 50%;
-    -webkit-transform: translateY(-50%);
+    @include transform(translateY(-50%));
-            transform: translateY(-50%);
   }
   .docs-subtitle {
     margin-bottom: 30px;
@@ -539,10 +539,6 @@ hr {
   .docs-header-content {
     .btn {
       display: inline-block;
-      margin: 0;
-    }
-    .btn-primary {
-      margin-left: 10px;
     }
   }
   .docs-title {
@@ -807,7 +803,14 @@ hr {
 }
 
 // Animations
-@-webkit-keyframes fadeOverlay {
+@-webkit-keyframes fadeintext {
-  from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
+  0% {
-  to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
+   opacity: 0;
+  }
+  50% {
+   opacity: 0;
+  }
+  100% {
+   opacity: 1;
+  }
 }

sass/mixins.scss

@@ -25,9 +25,10 @@
 
 }
 
+
 // Transforms
 // --------------------------------------------------
-@mixin transform($transform) {
+@mixin transform($transform...) {
   -webkit-transform: $transform;
       -ms-transform: $transform;
           transform: $transform;