Improved layout, unified spacing/font-sizes/border-radius/box-shadow

_includes/title.html

@@ -0,0 +1 @@
+{{ site.title }}

_layouts/default.html

@@ -10,8 +10,10 @@ layout: table_wrappers
 
   <div class="page-wrap">
     <div class="side-bar">
-      <a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 lh-tight">{{ site.title }}</a>
+      <div class="site-header">
-      <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
+        <a href="{{ site.url }}{{ site.baseurl }}" class="site-title">{% include title.html %}</a>
+        <a href="#" class="site-button fs-3 js-main-nav-trigger" data-text-toggle="Hide">Menu</a>
+      </div>
       <div class="navigation main-nav js-main-nav">
         {% include nav.html %}
       </div>
@@ -20,10 +22,10 @@ layout: table_wrappers
       </footer>
     </div>
     <div class="main-content-wrap js-main-content" tabindex="0">
-      <div class="page-header">
       <div class="main-content">
+        <div class="page-header js-page-header">
           {% if site.search_enabled != nil %}
-          <div class="search js-search">
+          <div class="search">
             <div class="search-input-wrap">
               <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
               <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
@@ -32,15 +34,14 @@ layout: table_wrappers
           </div>
           {% endif %}
           {% if site.aux_links != nil %}
-            <ul class="list-style-none text-small mt-md-1 mb-md-1 pb-4 pb-md-0 js-aux-nav aux-nav">
+            <ul class="list-style-none text-small aux-nav">
               {% for link in site.aux_links %}
                 <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
               {% endfor %}
             </ul>
           {% endif %}
         </div>
-      </div>
+        <div class="page">
-      <div class="main-content">
           {% unless page.url == "/" %}
             {% if page.parent %}
               <nav class="breadcrumb-nav">
@@ -78,6 +79,7 @@ layout: table_wrappers
         </div>
       </div>
     </div>
+  </div>
 
 </body>
 </html>

_sass/buttons.scss

@@ -21,7 +21,7 @@
   cursor: pointer;
   background-color: $base-button-color;
   border-width: 0;
-  border-radius: 3px;
+  border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
   appearance: none;
 

_sass/layout.scss

@@ -19,17 +19,13 @@
   z-index: 100;
   display: flex;
   flex-wrap: wrap;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
     flex-wrap: nowrap;
     position: absolute;
-    width: $nav-width + 16px;
+    width: $nav-width;
     height: 100%;
-    padding-top: $gutter-spacing * 2;
-    padding-bottom: 0;
     flex-direction: column;
     border-right: $border $border-color;
     align-items: flex-end;
@@ -48,7 +44,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    min-height: 600px;
     -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -56,20 +51,13 @@
 }
 
 .main-content {
-  padding-top: $gutter-spacing-sm;
-  @include container;
-
   @include mq(md) {
     position: relative;
     max-width: $content-width;
-    padding-top: $gutter-spacing;
-    padding-bottom: $gutter-spacing;
-    padding-left: $gutter-spacing * 1.5;
     margin-left: $nav-width;
   }
 
   @include mq(lg) {
-    padding-left: $gutter-spacing;
     margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
   }
 }
@@ -78,48 +66,99 @@
   outline: none;
 }
 
+.page {
+  @include container;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-top: $gutter-spacing;
+    padding-bottom: $gutter-spacing;
+  }
+}
+
 .page-header {
+  @include container;
+  display: none;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
     background-color: $body-background-color;
+    display: flex;
+    justify-content: flex-end;
+    height: $header-height;
+    border-bottom: $border $border-color;
   }
 
-  .main-content {
+  &.nav-open {
-    padding-top: 0;
+    display: block;
 
     @include mq(md) {
       display: flex;
-      justify-content: flex-end;
-      height: 60px;
-      padding-top: $sp-4;
-      padding-bottom: $sp-4;
-      border-bottom: $border $border-color;
     }
   }
 }
 
 .navigation,
-.site-title,
+.site-header,
 .site-footer {
 
-  @include container;
-
   width: 100%;
 
   @include mq(lg) {
-    width: $nav-width + 32px;
+    width: $nav-width;
   }
 }
 
 .navigation {
+  @include container;
+
   @include mq(md) {
     padding-top: $sp-8;
+    padding-bottom: $gutter-spacing-sm;
     overflow-y: auto;
     flex: 1 1 auto;
   }
 }
 
+.site-header {
+  display: flex;
+  align-items: center;
+
+  @include mq(md) {
+    height: $header-height;
+    min-height: $header-height;
+    max-height: $header-height;
+    z-index: 101;
+    border-bottom: $border $border-color;
+  }
+}
+
+.site-title {
+  @include container;
+  flex-grow: 1;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
+  color: $body-heading-color;
+  @include fs-6;
+}
+
+.site-button {
+  height: 100%;
+  padding: $gutter-spacing-sm;
+  display: flex;
+  align-items: center;
+
+  @include mq(md) {
+    display: none;
+  }
+}
+
 // stylelint-disable selector-max-type
 
 body {
@@ -135,15 +174,15 @@ body {
 // stylelint-enable selector-max-type
 
 .site-footer {
+  @include container;
   position: absolute;
   bottom: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
+  background-color: $sidebar-color;
 
   @include mq(md) {
     position: static;
-    align-self: flex-end;
     justify-self: end;
-    background-color: $sidebar-color;
   }
 }

_sass/navigation.scss

@@ -2,32 +2,11 @@
 // Main nav, breadcrumb, etc...
 //
 
-.site-title {
-  display: block;
-  flex: 1 1 auto;
-  color: $body-heading-color;
-  background-color: $sidebar-color;
-
-  @include mq(md) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 101;
-    height: 60px;
-    padding-top: $sp-4;
-    border-bottom: $border $border-color;
-  }
-}
-
 .navigation-list {
   padding: 0;
-  margin-top: $sp-4;
+  margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-
-  @include mq(md) {
-    margin-top: 0;
-  }
 }
 
 .navigation-list-child-list {
@@ -90,8 +69,7 @@
 
 // Small screen nav
 
-.main-nav,
+.main-nav {
-.aux-nav {
   display: none;
 
   &.nav-open {
@@ -102,13 +80,8 @@
   }
 }
 
-.navigation-list-toggle {
+.aux-nav {
-  position: absolute;
+  align-self: center;
-  right: $sp-4;
-
-  @include mq(md) {
-    display: none !important;
-  }
 }
 
 // Breadcrumb nav

_sass/search.scss

@@ -5,51 +5,35 @@
 .search {
   position: relative;
   z-index: 99;
-  display: none;
   flex-grow: 1;
-  padding: $sp-2;
+  height: 100%;
   margin-bottom: $sp-3;
-  background-color: $white;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
 
   @include mq(md) {
-    display: block;
-    padding-top: $sp-1;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 0;
     margin-bottom: 0;
-    background-color: transparent;
-    box-shadow: none;
-  }
-
-  &.nav-open {
-    display: block;
-  }
-}
-
-.search-results-wrap {
-  display: none;
-
-  &.active {
-    position: absolute;
-    top: $sp-1;
-    z-index: 100;
-    display: block;
-    width: 300px;
-    margin-top: $gutter-spacing;
-    background: lighten($body-background-color, 1%);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
   }
 }
 
 .search-input-wrap {
   display: flex;
+  height: 100%;
   background-color: $body-background-color;
+  padding: $sp-2;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+  @include mq(md) {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
 }
 
 .search-input {
+  align-self: center;
   width: 100%;
   padding-top: $sp-1;
   padding-bottom: $sp-1;
@@ -69,14 +53,10 @@
     }
   }
 
-  @include fs-5;
+  @include fs-4;
-
-  @include mq(sm) {
-    @include fs-3;
-  }
 
   @include mq(md) {
-    @include fs-2;
+    @include fs-3;
   }
 }
 
@@ -87,13 +67,31 @@
   order: 1;
 }
 
+.search-results-wrap {
+  position: absolute;
+  display: none;
+  z-index: 100;
+  width: 100%;
+  border-radius: $border-radius;
+  background: lighten($body-background-color, 1%);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+  &.active {
+    display: block;
+  }
+}
+
 .search-results-list {
   padding-left: 0;
   margin-top: $sp-1;
   margin-bottom: $sp-1;
   list-style: none;
+  @include fs-4;
+
+  @include mq(md) {
     @include fs-3;
   }
+}
 
 .search-results-list-item {
   padding: 0;

_sass/support/_variables.scss

@@ -118,13 +118,6 @@ $border-color: $grey-lt-100 !default;
 
 $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
-$nav-width: 232px !default;
+$nav-width: 264px !default;
 $content-width: 800px !default;
-
+$header-height: 60px !default;
-$media-queries: (
-  xs: 320px,
-  sm: 500px,
-  md: 740px,
-  lg: 800px,
-  xl: 1316px
-) !default;

_sass/tables.scss

@@ -9,7 +9,8 @@
   max-width: 100%;
   margin-bottom: $sp-5;
   overflow-x: auto;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
 }
 
 table {
@@ -35,38 +36,12 @@ td {
   }
 }
 
-thead,
-tbody:first-child {
-  tr {
-    &:first-of-type {
-      th,
-      td {
-        &:first-of-type {
-          border-top-left-radius: $border-radius;
-        }
-
-        &:last-of-type {
-          border-top-right-radius: $border-radius;
-        }
-      }
-    }
-  }
-}
-
 tbody {
   tr {
     &:last-of-type {
       th,
       td {
         border-bottom: 0;
-
-        &:first-of-type {
-          border-bottom-left-radius: $border-radius;
-        }
-
-        &:last-of-type {
-          border-bottom-right-radius: $border-radius;
-        }
       }
     }
   }

assets/js/just-the-docs.js

@@ -10,19 +10,17 @@ function removeEvent(el, type, handler) {
 // Show/hide mobile menu
 
 function toggleNav(){
-  const nav = document.querySelector('.js-main-nav');
+  const mainNav = document.querySelector('.js-main-nav');
-  const auxNav = document.querySelector('.js-aux-nav');
+  const pageHeader = document.querySelector('.js-page-header');
   const navTrigger = document.querySelector('.js-main-nav-trigger');
-  const search = document.querySelector('.js-search');
 
   addEvent(navTrigger, 'click', function(){
     var text = navTrigger.innerText;
     var textToggle = navTrigger.getAttribute('data-text-toggle');
 
-    nav.classList.toggle('nav-open');
+    mainNav.classList.toggle('nav-open');
-    auxNav.classList.toggle('nav-open');
+    pageHeader.classList.toggle('nav-open');
     navTrigger.classList.toggle('nav-open');
-    search.classList.toggle('nav-open');
     navTrigger.innerText = textToggle;
     navTrigger.setAttribute('data-text-toggle', text);
     textToggle = text;