website: Add "Api Docs" button next to "Download"

* Added Docs button and `button` class.
* Refactored download button style into `.button`
* Applied color overrides for download/docs buttons.
* Pointed docs link to latest available docs.

diff --git a/doc/index.html b/doc/index.html
index 151273b..61f1089 100644 (file)
--- a/doc/index.html
+++ b/doc/index.html
@@ -29,7 +29,8 @@
         lightweight and efficient, perfect for data-intensive real-time
         applications that run across distributed devices.</p>
 
-        <a href="#download" id="downloadbutton">Download</a>
+        <a href="#download" class="button" id="downloadbutton">Download</a>
+        <a href="http://nodejs.org/docs/latest/api/index.html" class="button" id="docsbutton">Docs</a>
     </div>
     <div id="quotes" class="clearfix">
         <h2>Node.js in the Industry</h2>

diff --git a/doc/pipe.css b/doc/pipe.css
index b1ed758..3da6d12 100644 (file)
--- a/doc/pipe.css
+++ b/doc/pipe.css
@@ -62,22 +62,36 @@ h1 a, h2 a, h3 a, h4 a
     font-size: 14px;
 }
 
-#intro #downloadbutton {
-    background-color: #8BC84B;
-    color: #46483e;
-    font-weight: bold;
-    font-size: 14px;
-    text-transform: uppercase;
-    padding: 7px 10px;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
+#intro .button {
+  font-weight: bold;
+  font-size: 14px;
+  text-transform: uppercase;
+  padding: 7px 10px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  margin: 0 5px;
+  color: #46483e;
+}
+
+#intro .button:hover {
+  text-decoration: none;
 }
 
+#intro #downloadbutton {
+  background-color: #8BC84B;
+}
 
 #intro #downloadbutton:hover {
-    text-decoration: none;
-    background-color: #73a53e;
+  background-color: #73a53e;
+}
+
+#intro #docsbutton {
+  background-color: #d2d8ba;
+}
+
+#intro #docsbutton:hover {
+  background-color: #aab293;
 }
 
 #quotes {