_scss: cleanup navigation styles

This fixes various inconsistencies between the landing page and the
other pages by sharing more styles between both:

- fix homepage using a different color for the active tab
- fix homepage not having "hover" styles for the top navigation

I addition, this:

- fixes unwanted whitespace in the hamburger-menu on mobile
- fixes "active" menu item not being highlighted on mobile
- fixes left-side aligning of left-hand menu on desktop

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>

_includes/navigation.html

@@ -20,8 +20,8 @@
     </button>
 </div>
 <div class="nav-container hidden-sm hidden-xs">
-    <div id="tabs">
+    <div>
-        <ul class="tabs jsTOCHorizontal">
+        <ul class="nav navbar-nav">
         {%- for entry in site.data.toc.horizontalnav -%}
           <li><a href="{{ entry.path }}" id="{{ entry.node }}">{{ entry.title }}</a></li>
         {%- endfor -%}

_layouts/docs.html

@@ -50,7 +50,7 @@
                     <nav class="col-nav">
                         <div id="sidebar-nav" class="sidebar hidden-sm hidden-xs">
                             <div id="navbar" class="nav-sidebar">
-                                <ul class="nav jsTOCHorizontal hidden-md hidden-lg"></ul>
+                                <ul class="nav hidden-md hidden-lg"></ul>
                                 <ul class="nav" id="jsTOCLeftNav"></ul>
                             </div>
                         </div>

_scss/_landing.scss

@@ -56,24 +56,6 @@ body.landing {
       }
     }
 
-    @include md-width {
-      .navbar-nav > li > a {
-        font-weight: bold;
-        line-height: 25px;
-        padding-top: 17px;
-        padding-bottom: 9px;
-        border-bottom-style: solid;
-        border-bottom-width: 4px;
-        border-bottom-color: rgba(255, 255, 255, 0);
-      }
-    }
-
-    @include md-width {
-      .navbar-nav > li.active > a {
-        border-bottom-color: rgba(255, 255, 255, 0.5);
-      }
-    }
-
     .toggle-mode {
       margin-top: 15px;
 

_scss/_mobile.scss

@@ -54,6 +54,7 @@
     and (max-width : 900px) {
     .sidebar {
         position: fixed;
+        top:   55px; // top-navigation bar (without breadcrumbs)
         width: 100%;
         z-index: 100;
         background-color: $bg-sidebar;
@@ -197,7 +198,7 @@
     }
     .sidebar {
         background-color: $bg-sidebar;
-        top: 51px;
+        top: 55px; // top-navigation bar (without breadcrumbs)
         left: 0;
         display: block;
         padding: 0;
@@ -253,9 +254,6 @@
   and (min-device-width: 768px)
   and (max-device-width: 1024px)
   and (orientation: landscape) {
-    .search-form {
-        float: left;
-    }
     .ctrl-right {
         display: block;
     }

_scss/_navigation.scss

@@ -58,16 +58,12 @@
 
 .nav-sidebar ul {
     list-style: none;
-    padding: 0 15px;
+    padding: 0;
     text-align: left;
 
     li {
         display: block;
     }
-
-    @include lg-width {
-        padding: 0 0 0 7px; // left-padding to align with logo
-    }
 }
 
 .nav-sidebar .nav ul {
@@ -83,10 +79,18 @@
 .nav-sidebar ul li a:focus,
 .nav-sidebar ul li a:hover {
     border-bottom: none;
+    border-left:   4px solid rgba($primary-links, 0);
+}
+
+.nav-sidebar .nav > li > a {
+  padding-left: 22px; // left-padding to align with logo
+  @include before-md-width {
+    padding-right: 32px; // right-align with hamburger menu
+  }
 }
 
 .nav-sidebar ul li a.active,
-.nav-sidebar.nav>li>a:focus {
+.nav-sidebar.nav > li > a:focus {
     background:  $bg-sidebar-active;
     border-left: 4px solid $primary-links;
     font-weight: 600;
@@ -234,37 +238,36 @@ input:checked+.slider:before {
 /*
  * Tabs ************************************************************************
  */
-#tabs {
+
-    float: left;
+.navbar-nav > li > a {
-    margin: 0;
+  border-left:   4px solid rgba($white, 0.0);
-    padding-left: 8px;
+}
-    ul {
+.navbar-nav > li.active > a {
-        padding: 0;
+  border-left:   4px solid rgba($white, 0.75);
-    }
 }
 
-.tabs {
+@include md-width {
-    li {
+  .landing .navbar-nav > li > a {
-        float: left;
+    padding-top:    17px;
-        list-style: none;
+    padding-bottom:  9px;
-        a {
+  }
+  .navbar-nav > li > a {
     color:          $white;
-            padding: 17px 19px 14px 15px;
+    line-height:    25px;
-            float: left;
+    padding-top:    14px;
+    padding-bottom: 12px;
     font-weight:    600;
-            &:hover {
-                background: rgba(0, 0, 0, 0.17) !important;
-                border-bottom: 4px solid #fff;
-            }
-        }
-    }
-}
 
-.tabs li.active a {
+    &:hover {
-    background: transparent !important;
+      background-color: rgba(0, 0, 0, 0.17);
-    color: #fff;
+      border-bottom:    4px solid rgba($white, 0.75);
+    }
+  }
+  .navbar-nav > li.active > a {
     cursor:        default;
-    border-bottom: 4px solid #fff;
+    border-left:   none;
+    border-bottom: 4px solid rgba($white, 0.5);
+  }
 }
 
 /*

_scss/_night-mode.scss

@@ -61,8 +61,8 @@ body.night {
         background:  $bg-sidebar-night-active;
         border-left: 4px solid $primary-links;
     }
-    .tabs li.active a {
+    .navbar-nav > li.active > a {
-        border-bottom: 4px solid $primary-links;
+      border-color: $primary-links;
     }
     .slider {
         background-color: #344658;

_scss/_utilities.scss

@@ -82,7 +82,7 @@ img.inline {
  */
 .search-form {
     float: left;
-    margin: 5px 0 0;
+    margin: 5px 8px 0 0;
     & input[type=text] {
         background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat 10px 9px;
         border: 0;