site: make the doc link more linky.

googleapis · Sep 10, 2014 · 297cd57 · 297cd57
1 parent ffa60ee
commit 297cd57
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 20 deletions.
diff --git a/docs/css/main.css b/docs/css/main.css
@@ -357,7 +357,9 @@ h2, h3 {
 .featuring-links {
     list-style: none;
     margin: 0;
-    padding: 0;
+    padding: 8px;
+    background-color: #eee;
+    border-radius: 5px;
 }
 
 .btn,
@@ -402,6 +404,68 @@ h2, h3 {
     width: 2em;
 }
 
+.docs-link {
+    text-align: center;
+    font-size: 1.4em;
+    font-weight: normal;
+    margin-bottom: 1.3em;
+}
+
+.docs-link img {
+    background-color: #5d6061;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    padding: 4px;
+    width: 4%;
+    margin-top: -3px;
+    margin-left: 8px;
+    margin-right: 8px;
+    /* Transitions */
+        -webkit-transition: all 0.5s ease;
+        -moz-transition: all 0.5s ease;
+        -ms-transition: all 0.5s ease;
+        -o-transition: all 0.5s ease;
+        transition: all 0.5s ease;
+}
+
+.docs-link a {
+    color: #4285f4;
+    text-decoration: none;
+    /* Transitions */
+        -webkit-transition: all 0.3s ease;
+        -moz-transition: all 0.3s ease;
+        -ms-transition: all 0.3s ease;
+        -o-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+}
+
+.docs-link .supplementary-text {
+    font-size: .8em;
+    color: rgba(93, 96, 97, .8);
+}
+
+.docs-link a:hover .link-text {
+    text-decoration: underline;
+}
+
+.docs-link a:hover img {
+    background-color: #4285f4;
+    -webkit-border-radius: 80px;
+    -moz-border-radius: 80px;
+    border-radius: 80px;
+    transform: rotate(135deg);
+    -webkit-box-shadow: 4px 4px 4px #eee;
+    -moz-box-shadow: 4px 4px 4px #eee;
+    box-shadow: 4px 4px 4px #eee;
+}
+
+.docs-link a:active img {
+    -webkit-box-shadow: 4px 4px 4px #ddd;
+    -moz-box-shadow: 4px 4px 4px #ddd;
+    box-shadow: 4px 4px 4px #ddd;
+}
+
 .ext-link {
     display: block;
     padding: 1em;
@@ -880,7 +944,7 @@ h2, h3 {
    Modify as content requires.
    ========================================================================== */
 
-@media only screen and (min-width: 35em) {
+@media only screen and (min-width: 36em) {
 
     /*
      Main
@@ -902,10 +966,6 @@ h2, h3 {
         display: inline-block;
     }
 
-    .featuring-links li:first-child {
-        display: block;
-    }
-
     .featuring-links .btn {
         display: inline-block;
         padding: 1em 2.4em;
@@ -1139,6 +1199,14 @@ h2, h3 {
         padding: 1em 1.5em;
     }
 
+    /*
+    Doc Link
+    */
+    .docs-link {
+        font-size: 1.7em;
+        margin-bottom: 1.1em;
+    }
+
     /*
     Featuring
     */
@@ -1151,10 +1219,6 @@ h2, h3 {
         font-size: 1em;
     }
 
-    .featuring-links li:first-child {
-        display: inline-block;
-    }
-
     .featuring-links .btn {
         margin-right: 0.5em;
     }

diff --git a/docs/home.html b/docs/home.html
@@ -19,13 +19,12 @@ <h2>One-line npm install</h2>
 
   <section class="block featuring">
     <div class="container">
+      <div class="docs-link">
+        <a href="#/docs" title="gcloud-node docs">
+          <span class="supplementary-text">See the</span><img src="img/icon-lang-nodejs.svg" alt="Node.js icon"><span class="link-text">API Documentation</span>
+        </a>
+      </div>
       <ul class="featuring-links">
-        <li>
-          <a href="#/docs" title="gcloud-node docs" class="btn">
-            <img src="img/icon-lang-nodejs.svg" alt="Node.js icon" />
-            Docs
-          </a>
-        </li>
         <li>
           <a href="https://github.com/GoogleCloudPlatform/gcloud-node" title="gcloud-node on GitHub" class="ext-link">
             <img src="img/icon-link-github.svg" alt="GitHub icon" />
@@ -59,7 +58,7 @@ <h2>One-line npm install</h2>
       <div class="col col-left">
         <h3 class="block-title">What is it?</h3>
 
-        <p><code>gcloud-node</code> is a client library for accessing Google Cloud Platform services that significantly reduces the boilerplate code you have to write. The library is provides high-level API abstractions so they're easier to understand. And, it embraces idioms of Node.js, such as returning Readable streams or errors as the first object in callbacks. All this means you spend more time creating code that matters to you.</p> 
+        <p><code>gcloud-node</code> is a client library for accessing Google Cloud Platform services that significantly reduces the boilerplate code you have to write. The library is provides high-level API abstractions so they're easier to understand. And, it embraces idioms of Node.js, such as returning Readable streams or errors as the first object in callbacks. All this means you spend more time creating code that matters to you.</p>
         <p><code>gcloud-node</code> is configured to access Google Cloud services and authorize (OAuth2) automatically on your behalf. With a one line install and a private key, you are up and ready to go. Better yet, if you are running on a Google Compute Engine instance, the one line install is enough!</p>
 
       </div><!-- end of .col.col-left -->
@@ -86,13 +85,13 @@ <h4>Retrieve Datastore Entities</h4>
    <section class="block">
       <div class="container clearfix">
   	  <h3 class="block-title">FAQ</h3>
-  
+
   	  <h4 class="">What is the relationship between <code>gcloud-node</code> and the <code>gcloud</code> commandline tool?</h4>
   	  <p>Both the <code>gcloud</code> commandline tool and <code>gcloud-node</code> are part of the Google Cloud SDK: a collection of tools and libraries that enable you to easily create and manage resources on Google Cloud Platform. The <code>gcloud</code> commandline tool can be used to manage both your development workflow and your Google Cloud Platform resources while <code>gcloud-node</code> is the Google Cloud Client Library for Node.js.</p>
-  
+
   	  <h4 class="">What is the relationship between <code>gcloud-node</code> and the <code>Google APIs NodeJS Client</code>?</h4>
   	  <p>The <code>Google APIs NodeJS Client</code> is a client library for using the broad set of Google APIs. <code>gcloud-node</code> is built specifically for the Google Cloud Platform and is the recommended way to integrate Google Cloud APIs into your Node.js applications. If your application requires both Google Cloud and other Google APIs, the 2 libraries may be used by your application.</p>
-  
+
       </div>
   </section> <!-- end of FAQ -->
 </article><!-- end of .main -->