From 99c69ef641ee047491767d9cdc4e53e969617c17 Mon Sep 17 00:00:00 2001
From: JT <jt@ofitsownkind.com>
Date: Wed, 23 Jul 2014 16:48:44 -0700
Subject: [PATCH] docs responsive header sans mobile

---
 website/source/layouts/_header.erb      |   4 +-
 website/source/stylesheets/_docs.less   |  51 +++++++++
 website/source/stylesheets/_header.less | 121 +++++++++-----------
 website/source/stylesheets/main.css     | 143 ++++++++++++------------
 4 files changed, 179 insertions(+), 140 deletions(-)
diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb
index c1729c4d5a..fd72bc5600 100644
--- a/website/source/layouts/_header.erb
+++ b/website/source/layouts/_header.erb
@@ -37,7 +37,7 @@
 <body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
 <div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
 	<div class="container">
-    <div class="col-xs-12 col-md-4">
+    <div class="col-sm-12 col-md-4 nav-logo">
 		  <div class="navbar-header">
   		    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
   	          <span class="sr-only">Toggle navigation</span>
@@ -49,7 +49,7 @@
   		</div>
     </div>
 
-    <div class="col-xs-12 col-md-8 nav-white">
+    <div class="col-sm-12 col-md-8 nav-white">
   		<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
   			<ul class="buttons nav navbar-nav navbar-right rls-sb">
   				<li class="first download terra-btn"><a href="/downloads.html">Download</a></li>
diff --git a/website/source/stylesheets/_docs.less b/website/source/stylesheets/_docs.less
index ba689fbdbd..89cf52dc7b 100755
--- a/website/source/stylesheets/_docs.less
+++ b/website/source/stylesheets/_docs.less
@@ -209,6 +209,57 @@ body.layout-intro{
 			}
 		}
 	}
+
+  body.page-sub{
+    >.container{
+      background-color: white;
+    }
+  }
+
+  .docs-sidebar{
+    margin-top: 0px;
+    margin-bottom: 0px;
+
+    .docs-sidenav{
+      padding-bottom: 0;
+
+      //all li > a
+      li{
+        > a{
+          color: black;
+          .transition( color 0.5s ease );
+        }
+
+        > a:hover,
+        > a:focus {
+          color: @purple;
+          .transition( color 0.5s ease );
+        }
+      }
+
+
+      > li {
+        >.nav{
+          li{
+            a{
+              color: black;
+
+              &:hover{
+                color: @purple;
+              }
+            }
+          }
+        }
+      }
+    }
+  }  
+
+  .bs-docs-section{
+    h1{
+      padding-top: 24px;
+      border-top: 1px solid #eeeeee;
+    }
+  }
 }
 
 @media (max-width: 480px) {
diff --git a/website/source/stylesheets/_header.less b/website/source/stylesheets/_header.less
index 73ac448296..fc60a931fc 100755
--- a/website/source/stylesheets/_header.less
+++ b/website/source/stylesheets/_header.less
@@ -12,7 +12,8 @@ body.page-sub{
         height: 90px;
         background-color: @purple;
 
-        .navbar-brand {
+        .nav-logo{
+            height: 90px;
         }
 
         .nav-white{
@@ -50,7 +51,7 @@ body.page-sub{
     }
 
     .navbar-toggle{
-        margin-top: 14px;
+        margin-top: 26px;
         margin-bottom: 14px;
         border: 2px solid @white;
         .icon-bar{
@@ -109,18 +110,18 @@ body.page-sub{
             content: "";
             position: absolute;
             left: 0;
-            top: 9px;
-            width: 6px;
-            height: 8px;
+            top: 7px;
+            width: 1px;
+            height: 12px;
             background-color: @purple;
             .skewY(24deg);
-            padding-right: 8px;
+            padding-right: 0;
         } 
 
         li > a {
             //border-bottom: 2px solid rgba(255, 255, 255, .2);
             line-height: 26px;
-            margin: 0 12px;
+            margin: 0 8px;
             padding: 0 0 0 4px;
         }
 
@@ -132,7 +133,7 @@ body.page-sub{
 
         li{
             &.first{
-                margin-right: 16px;
+                margin-right: 13px;
             }
 
             &.download{
@@ -157,11 +158,47 @@ body.page-sub{
             padding-bottom: 4px;
             padding-left: 32px;
             padding-right: 12px;
-            letter-spacing: 0.05em;           
+            letter-spacing: 0.05em;         
         }
     }
 }
 
+//at minimum 1200px
+@media (min-width: 1200px) {
+    body.page-sub{
+        #header{
+            .main-links.navbar-nav{
+                margin-top: 28px;
+
+                li + li{
+                    padding-left: 6px;
+                }
+
+                li + li::before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 9px;
+                    width: 6px;
+                    height: 8px;
+                    background-color: @purple;
+                    .skewY(24deg);
+                    padding-right: 8px;
+                }
+
+                li > a {
+                    //border-bottom: 2px solid rgba(255, 255, 255, .2);
+                    line-height: 26px;
+                    margin: 0 12px;
+                    padding: 0 0 0 4px;
+                }
+
+            }        
+        }        
+    }
+}
+
+//at greatest width 992px
 @media (max-width: 992px) {
     #header {
         .navbar-brand {
@@ -174,20 +211,19 @@ body.page-sub{
                 }
             }
         }
-
-        .buttons.navbar-nav{
-            li{
-                a{
-                    background: none !important;
-                    padding-left: 15px;
-                }
-            }
-        }
     }
 }
 
 @media (max-width: 768px) {
 
+    body.page-sub{
+        #header{
+            .nav-white{
+                background-color: transparent;
+            }
+        }
+    }
+
     //#footer,
     #header{
         .buttons.navbar-nav,
@@ -217,55 +253,6 @@ body.page-sub{
             }
         }
     }
-
-    #header{
-        .consul-gradient-bg();
-
-        .navbar-right{
-            float: none !important;
-        }
-
-        .navbar-brand {
-            &.logo{
-                span{
-                    margin-top: 0;
-                }
-            }
-        }
-
-        .navbar-nav > li{
-            float: none;
-        }
-
-        .buttons.navbar-nav{
-            margin-top: 15px;
-            margin-left: 0px;
-
-            li{
-                a{
-                    padding-left: 40px;
-                }
-                &.first{
-                    margin-right: 0;
-                    margin-bottom: 10px;
-                }
-
-                &.download{
-                    a{
-                        background: url(../images/icon-download.png)  8px 6px no-repeat !important;;
-                        .img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 20px, 20px);
-                    }
-                }
-
-                &.github{
-                    a{
-                        background: url(../images/icon-github.png)  8px 6px no-repeat !important;;
-                        .img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 20px, 20px);
-                    }
-                }
-            }
-        }
-    }
 }
 
 @media (max-width: 480px) {
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index 276e2b3598..8a50f6650f 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -84,6 +84,9 @@ body.page-sub #header {
   height: 90px;
   background-color: #822ff7;
 }
+body.page-sub #header .nav-logo {
+  height: 90px;
+}
 body.page-sub #header .nav-white {
   height: 90px;
   background-color: white;
@@ -112,7 +115,7 @@ body.page-sub #header .main-links.navbar-nav li > a {
   color: #ffffff;
 }
 #header .navbar-toggle {
-  margin-top: 14px;
+  margin-top: 26px;
   margin-bottom: 14px;
   border: 2px solid #ffffff;
 }
@@ -169,20 +172,20 @@ body.page-sub #header .main-links.navbar-nav li > a {
   content: "";
   position: absolute;
   left: 0;
-  top: 9px;
-  width: 6px;
-  height: 8px;
+  top: 7px;
+  width: 1px;
+  height: 12px;
   background-color: #822ff7;
   -webkit-transform: skewY(24deg);
   -moz-transform: skewY(24deg);
   -ms-transform: skewY(24deg);
   -o-transform: skewY(24deg);
   transform: skewY(24deg);
-  padding-right: 8px;
+  padding-right: 0;
 }
 #header .main-links.navbar-nav li > a {
   line-height: 26px;
-  margin: 0 12px;
+  margin: 0 8px;
   padding: 0 0 0 4px;
 }
 #header .buttons.navbar-nav {
@@ -190,7 +193,7 @@ body.page-sub #header .main-links.navbar-nav li > a {
   margin-left: 30px;
 }
 #header .buttons.navbar-nav li.first {
-  margin-right: 16px;
+  margin-right: 13px;
 }
 #header .buttons.navbar-nav li.download a {
   padding-left: 30px;
@@ -223,6 +226,34 @@ body.page-sub #header .main-links.navbar-nav li > a {
   padding-right: 12px;
   letter-spacing: 0.05em;
 }
+@media (min-width: 1200px) {
+  body.page-sub #header .main-links.navbar-nav {
+    margin-top: 28px;
+  }
+  body.page-sub #header .main-links.navbar-nav li + li {
+    padding-left: 6px;
+  }
+  body.page-sub #header .main-links.navbar-nav li + li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 9px;
+    width: 6px;
+    height: 8px;
+    background-color: #822ff7;
+    -webkit-transform: skewY(24deg);
+    -moz-transform: skewY(24deg);
+    -ms-transform: skewY(24deg);
+    -o-transform: skewY(24deg);
+    transform: skewY(24deg);
+    padding-right: 8px;
+  }
+  body.page-sub #header .main-links.navbar-nav li > a {
+    line-height: 26px;
+    margin: 0 12px;
+    padding: 0 0 0 4px;
+  }
+}
 @media (max-width: 992px) {
   #header .navbar-brand.logo span {
     width: 120px;
@@ -230,12 +261,11 @@ body.page-sub #header .main-links.navbar-nav li > a {
     margin-top: 12px;
     background-size: 120px 39px;
   }
-  #header .buttons.navbar-nav li a {
-    background: none !important;
-    padding-left: 15px;
-  }
 }
 @media (max-width: 768px) {
+  body.page-sub #header .nav-white {
+    background-color: transparent;
+  }
   #header .buttons.navbar-nav,
   #header .main-links.navbar-nav {
     display: block;
@@ -258,66 +288,6 @@ body.page-sub #header .main-links.navbar-nav li > a {
     padding-left: 0;
     line-height: 22px;
   }
-  #header {
-    background: #694a9c;
-    /* Old browsers */
-    background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%);
-    /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #694a9c), color-stop(100%, #cd2028));
-    /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(left, #694a9c 0%, #cd2028 100%);
-    /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(left, #694a9c 0%, #cd2028 100%);
-    /* Opera 11.10+ */
-    background: -ms-linear-gradient(left, #694a9c 0%, #cd2028 100%);
-    /* IE10+ */
-    background: linear-gradient(to right, #694a9c 0%, #cd2028 100%);
-    /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#694a9c', endColorstr='#cd2028', GradientType=1);
-    /* IE6-9 */
-  }
-  #header .navbar-right {
-    float: none !important;
-  }
-  #header .navbar-brand.logo span {
-    margin-top: 0;
-  }
-  #header .navbar-nav > li {
-    float: none;
-  }
-  #header .buttons.navbar-nav {
-    margin-top: 15px;
-    margin-left: 0px;
-  }
-  #header .buttons.navbar-nav li a {
-    padding-left: 40px;
-  }
-  #header .buttons.navbar-nav li.first {
-    margin-right: 0;
-    margin-bottom: 10px;
-  }
-  #header .buttons.navbar-nav li.download a {
-    background: url(../images/icon-download.png) 8px 6px no-repeat !important;
-    background-image: url("../images/icon-download.png");
-    background-size: 20px 20px;
-  }
-  #header .buttons.navbar-nav li.github a {
-    background: url(../images/icon-github.png) 8px 6px no-repeat !important;
-    background-image: url("../images/icon-github.png");
-    background-size: 20px 20px;
-  }
-}
-@media (max-width: 768px) and only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min--moz-device-pixel-ratio: 2), (max-width: 768px) and only screen and (-o-min-device-pixel-ratio: 2/1), (max-width: 768px) and only screen and (min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min-resolution: 192dpi), (max-width: 768px) and only screen and (min-resolution: 2dppx) {
-  #header .buttons.navbar-nav li.download a {
-    background-image: url("../images/icon-download@2x.png");
-    background-size: 20px 20px;
-  }
-}
-@media (max-width: 768px) and only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min--moz-device-pixel-ratio: 2), (max-width: 768px) and only screen and (-o-min-device-pixel-ratio: 2/1), (max-width: 768px) and only screen and (min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min-resolution: 192dpi), (max-width: 768px) and only screen and (min-resolution: 2dppx) {
-  #header .buttons.navbar-nav li.github a {
-    background-image: url("../images/icon-github@2x.png");
-    background-size: 20px 20px;
-  }
 }
 #footer-wrap {
   background-color: white;
@@ -1168,6 +1138,37 @@ body.layout-intro > .container .col-md-8[role=main] > div {
   body.layout-intro > .container .col-md-8[role=main]::before {
     border-left: 9999px solid white;
   }
+  body.page-sub > .container {
+    background-color: white;
+  }
+  .docs-sidebar {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+  .docs-sidebar .docs-sidenav {
+    padding-bottom: 0;
+  }
+  .docs-sidebar .docs-sidenav li > a {
+    color: black;
+    -webkit-transition: color 0.5s ease;
+    transition: color 0.5s ease;
+  }
+  .docs-sidebar .docs-sidenav li > a:hover,
+  .docs-sidebar .docs-sidenav li > a:focus {
+    color: #822ff7;
+    -webkit-transition: color 0.5s ease;
+    transition: color 0.5s ease;
+  }
+  .docs-sidebar .docs-sidenav > li > .nav li a {
+    color: black;
+  }
+  .docs-sidebar .docs-sidenav > li > .nav li a:hover {
+    color: #822ff7;
+  }
+  .bs-docs-section h1 {
+    padding-top: 24px;
+    border-top: 1px solid #eeeeee;
+  }
 }
 @media (max-width: 480px) {
   .bs-docs-section img {
