Fix fonts and arrangement

website/source/assets/stylesheets/_docs.scss

@@ -2,22 +2,15 @@
 // Docs
 // --------------------------------------------------
 
-body.layout-atlas,
+$docs-font-size: 16px;
-body.layout-consul,
+
-body.layout-dnsimple,
-body.layout-dme,
-body.layout-cloudflare,
-body.layout-cloudstack,
-body.layout-google,
-body.layout-heroku,
-body.layout-mailgun,
-body.layout-digitalocean,
-body.layout-aws,
 body.layout-docs,
 body.layout-inner,
 body.layout-downloads,
 body.layout-intro{
   //background: $light-black image-url('sidebar-wire.png') left 62px no-repeat;
+  font-size: $docs-font-size - 2;
+
   >.container{
     .col-md-8[role=main]{
       min-height: 800px;
@@ -51,61 +44,32 @@ body.layout-intro{
 
       > a{
         padding: 10px 8px;
-        font-size: 15px;
+        font-size: 13px;
         color: $blue-dark;
 
-        &:before{
-          @include bez-1-transition();
-        }
-
         &:hover{
           background-color: transparent !important;
-
-          &:before{
-            @include bez-1-transition();
-          }
         }
       }
     }
 
     $parent-active-state: -14px;
-    $parent-default-state: -10px;
+    $parent-default-state: -14px;
     $child-active-state: -4px;
-    $child-default-state: 0px;
+    $child-default-state: -4px;
 
     //first teir li
     > li {
       margin: 0 0 0 10px;
 
-      &.active {
-        >a{
-          color: $green-dark;
-          font-weight: 600;
-          border-right: 1px solid $green-faint;
-
-          &:hover{
-            &:before{
-              left: $parent-default-state;
-            }
-          }
-
-          &:before{
-            @include rotate(90deg);
-            opacity: 1;
-          }
-        }
-
-        .nav {
-          display: block;
-        }
-      }
-
       > a {
         -webkit-font-smoothing: antialiased;
 
         &:hover{
+          color: #000;
+
           &:before{
-            left: $parent-active-state;
+            opacity: 1;
           }
         }
 
@@ -122,6 +86,20 @@ body.layout-intro{
           @include img-retina("caret-light.png", "caret-light@2x.png", 6px, 9px);
         }
       }
+
+      &.active {
+        >a{
+          color: $green-dark;
+
+          &:before{
+            opacity: 1;
+          }
+        }
+
+        .nav {
+          display: block;
+        }
+      }
     }
 
     //nested ul.nav
@@ -130,26 +108,39 @@ body.layout-intro{
       padding-top: 10px;
       padding-bottom: 10px;
       margin-bottom: 15px;
-      border-right: 1px solid $green-faint;
-      border-bottom: 1px solid $green-faint;
 
       > li{
         margin-left: 10px;
 
+        > a {
+          &:before{
+            content: '';
+            position: absolute;
+            width: 8px;
+            height: 12px;
+            top: 10px;
+            left: $child-default-state;
+            overflow: hidden;
+            background: image-url("caret-light.png") 0 0 no-repeat;
+            opacity: .3;
+            @include img-retina("caret-light.png", "caret-light@2x.png", 6px, 9px);
+          }
+
+          &:hover {
+            color: #000;
+
+            &:before {
+              opacity: 1;
+            }
+          }
+        }
+
         &.active{
           > a{
             color: $green-dark;
-            font-weight: 600;
-
-            &:hover{
-              &:before{
-                left: $child-default-state;
-              }
-            }
 
             &:before{
-              //background: url(triangle-sprite.png) 0 0 no-repeat;
+              opacity: 1;
-              //@include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 5px, 19px);
             }
           }
         }
@@ -157,25 +148,6 @@ body.layout-intro{
         > a{
           -webkit-font-smoothing: antialiased;
           padding: 6px 15px;
-
-          &:hover{
-            &:before{
-              left: $child-active-state;
-            }
-          }
-
-          &:before{
-            opacity: .75;
-            content: '';
-            position: absolute;
-            width: 5px;
-            height: 7px;
-            top: 12px;
-            left: $child-default-state;
-            overflow: hidden;
-            //background: url(triangle-sprite.png) 0 -13px no-repeat;
-            //@include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 5px, 19px);
-          }
         }
       }
     }
@@ -202,16 +174,17 @@ body.layout-intro{
 
   p, li, .alert {
     color: $blue-dark;
-    font-size: 18px;
+    font-size: $docs-font-size;
     font-family: $font-family-open-sans;
     font-weight: $font-weight-reg;
     line-height: 1.84em;
-    margin: 0 0 18px;
+    margin: 0 0 $docs-font-size;
     -webkit-font-smoothing: antialiased;
   }
 
   pre {
-    margin: 0 0 18px;
+    font-size: ($docs-font-size - 3);
+    margin: 0 0 $docs-font-size;
 
     // This will force the code to scroll horizontally on small screens
     // instead of wrapping.
@@ -223,14 +196,10 @@ body.layout-intro{
 
   a{
     color: $green-dark;
-    border-bottom: 1px solid $green-dark;
+    text-decoration: none;
-    @include transition(all 300ms ease-in);
 
     &:hover{
-      color: $blue-dark;
+      text-decoration: underline;
-      border-bottom: 2px solid $blue-dark;
-      text-decoration: none;
-      @include transition(all 300ms ease-in);
     }
   }
 
@@ -243,7 +212,7 @@ body.layout-intro{
   h1, .h1, h2, .h2, h3, .h3, h4, .h4{
     color: $gray-dark;
     margin-top: 54px;
-    margin-bottom: 18px;
+    margin-bottom: $docs-font-size;
     @include open-sb();
   }
 

website/source/layouts/docs.erb

@@ -75,18 +75,6 @@
           </ul>
         </li>
 
-        <li<%= sidebar_current("docs-upgrade") %>>
-          <a href="/docs/upgrade/index.html">Upgrading</a>
-          <ul class="nav">
-            <li<%= sidebar_current("docs-upgrade-upgrading") %>>
-              <a href="/docs/upgrade/index.html">Upgrading Nomad</a>
-            </li>
-            <li<%= sidebar_current("docs-upgrade-specific") %>>
-              <a href="/docs/upgrade/upgrade-specific.html">Specific Version Details</a>
-            </li>
-          </ul>
-        </li>
-
         <li<%= sidebar_current("docs-drivers") %>>
           <a href="/docs/drivers/index.html">Task Drivers</a>
           <ul class="nav">
@@ -205,6 +193,8 @@
           </ul>
         </li>
 
+        <hr>
+
         <li<%= sidebar_current("docs-http") %>>
           <a href="/docs/http/index.html">HTTP API</a>
         </li>
@@ -230,8 +220,20 @@
           </ul>
         </li>
 
+        <li<%= sidebar_current("docs-upgrade") %>>
+          <a href="/docs/upgrade/index.html">Upgrading</a>
+          <ul class="nav">
+            <li<%= sidebar_current("docs-upgrade-upgrading") %>>
+              <a href="/docs/upgrade/index.html">Upgrading Nomad</a>
+            </li>
+            <li<%= sidebar_current("docs-upgrade-specific") %>>
+              <a href="/docs/upgrade/upgrade-specific.html">Specific Version Details</a>
+            </li>
+          </ul>
+        </li>
+
         <li<%= sidebar_current("docs-faq") %>>
-          <a href="/docs/faq.html">Frequently Asked Questions</a>
+          <a href="/docs/faq.html">FAQ</a>
         </li>
       </ul>
     </div>