site: re-do doc link.

googleapis · Sep 11, 2014 · 7efd8bd · 7efd8bd
1 parent 5fab052
commit 7efd8bd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 36 deletions.
diff --git a/docs/css/main.css b/docs/css/main.css
@@ -345,7 +345,7 @@ h2, h3 {
  Featuring
 */
 
-.featuring .block-title {
+.featuring {
     text-align: center;
 }
 
@@ -356,7 +356,7 @@ h2, h3 {
 
 .featuring-links {
     list-style: none;
-    margin: 0;
+    margin: auto;
     padding: 8px;
     background-color: #eee;
     border-radius: 5px;
@@ -408,16 +408,17 @@ h2, h3 {
     text-align: center;
     font-size: 1.4em;
     font-weight: normal;
-    margin-bottom: 1.3em;
+    margin-bottom: 1em;
 }
 
 .docs-link img {
-    background-color: #5d6061;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
+    display: none;
+    border: 1px solid transparent;
+    -webkit-border-radius: 80px;
+    -moz-border-radius: 80px;
+    border-radius: 80px;
     padding: 4px;
-    width: 4%;
+    width: 40px;
     margin-top: -3px;
     margin-left: 8px;
     margin-right: 8px;
@@ -441,29 +442,25 @@ h2, h3 {
 }
 
 .docs-link .supplementary-text {
-    font-size: .8em;
-    color: rgba(93, 96, 97, .8);
+    text-decoration: none;
 }
 
-.docs-link a:hover .link-text {
+.docs-link .link-text {
     text-decoration: underline;
 }
 
 .docs-link a:hover img {
-    background-color: #4285f4;
-    -webkit-border-radius: 80px;
-    -moz-border-radius: 80px;
-    border-radius: 80px;
+    border: 1px solid #ccc;
     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;
+    -webkit-box-shadow: 4px 4px 4px #ccc;
+    -moz-box-shadow: 4px 4px 4px #ccc;
+    box-shadow: 4px 4px 4px #ccc;
 }
 
 .ext-link {
@@ -480,6 +477,10 @@ h2, h3 {
         transition: all 0.3s ease;
 }
 
+.featuring-links li:last-child .ext-link {
+    border-bottom: none;
+}
+
 .ext-link:hover {
     background: #f6f6f6;
 }
@@ -944,7 +945,7 @@ h2, h3 {
    Modify as content requires.
    ========================================================================== */
 
-@media only screen and (min-width: 36em) {
+@media only screen and (min-width: 37em) {
 
     /*
      Main
@@ -954,11 +955,19 @@ h2, h3 {
         font-size: 1em;
     }
 
+    /*
+     Docs Link
+     */
+    .docs-link img {
+        display: inline;
+    }
+
     /*
      Featuring
     */
 
     .featuring-links {
+        display: inline-block;
         text-align: center;
     }
 

diff --git a/docs/home.html b/docs/home.html
@@ -24,7 +24,7 @@ <h2>One-line npm install</h2>
     <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>
+          <img src="img/icon-lang-nodejs.svg" alt="Node.js icon"><span class="supplementary-text">See the</span> <span class="link-text">API Documentation</span>
         </a>
       </div>
       <ul class="featuring-links">

diff --git a/docs/img/icon-lang-nodejs.svg b/docs/img/icon-lang-nodejs.svg