From 24891dcdfb42b6987fbb9610f68ac19b57a3ed5c Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 18 Jan 2014 12:11:55 -0800
Subject: [PATCH] add docs button

---
 docs-assets/css/docs.css | 30 +++++++++++++++++++++++++-----
 index.html               |  5 +++--
 lib/sass/docs.scss       | 32 ++++++++++++++++++++++++++------
 3 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 0fd058b..8fa5ed5 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -667,10 +667,35 @@ body {
   padding-bottom: 50px;
 }
 .docs-header-content .button {
+  padding: 15px 30px;
+  font-size: 18px;
+  color: #00d1fe;
+  border-color: #00d1fe;
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+}
+.docs-header-content .button:hover {
+  color: #63e3ff;
+  border-color: #63e3ff;
+}
+.docs-header-content .button:active {
+  opacity: .5;
+  background-color: transparent;
+}
+.docs-header-content .button-primary {
+  margin-left: 10px;
   color: #fff;
   border-color: #00d1fe;
   background-color: #00d1fe;
 }
+.docs-header-content .button-primary:hover {
+  color: #fff;
+  border-color: #63e3ff;
+  background-color: #63e3ff;
+}
+.docs-header-content .button-primary:active {
+  background-color: #63e3ff;
+}
 
 .docs-title,
 .docs-subtitle {
@@ -943,11 +968,6 @@ hr {
     padding-top: 100px;
     padding-bottom: 130px;
   }
-  .docs-header-content .button {
-    max-width: 300px;
-    margin-right: auto;
-    margin-left: auto;
-  }
 
   .docs-subtitle {
     margin-bottom: 30px;
diff --git a/index.html b/index.html
index 81785fd..f794b1f 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,9 @@ base_url: "./"
   </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="http://maker.github.com/ratchet/ratchet.zip" class="button button-filled button-block" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
+    <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>  
+    <a data-ignore="push" href="/components" class="button button-outlined">View the docs</a>
+    <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
   </div>
 </div>
 
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index dea4c18..a7b6c60 100644
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@@ -59,9 +59,35 @@ body {
   padding-bottom: 50px;
 
   .button {
+    padding: 15px 30px;
+    font-size: 18px;
+    color: #00d1fe;
+    border-color: #00d1fe;
+    @include transition(all .2s linear);
+
+    &:hover {
+      color: #63e3ff;
+      border-color: #63e3ff;
+    }
+    &:active {
+      opacity: .5;
+      background-color: transparent;
+    }
+  }
+  .button-primary {
+    margin-left: 10px;
     color: #fff;
     border-color: #00d1fe;
     background-color: #00d1fe;
+
+    &:hover {
+      color: #fff;
+      border-color: #63e3ff;
+      background-color: #63e3ff;
+    }
+    &:active {
+      background-color: #63e3ff;
+    }
   }
 }
 .docs-title,
@@ -353,12 +379,6 @@ hr {
   .docs-header-content {
     padding-top: 100px;
     padding-bottom: 130px;
-    
-    .button {
-      max-width: 300px;
-      margin-right: auto;
-      margin-left: auto;
-    }
   }
   .docs-subtitle {
     margin-bottom: 30px;