Improved search interface

_layouts/default.html

@@ -46,7 +46,7 @@ layout: table_wrappers
         <div class="search">
           <div class="search-input-wrap">
             <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
-            <svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg>
+            <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
           </div>
           <div id="search-results" class="search-results"></div>
         </div>
@@ -55,7 +55,7 @@ layout: table_wrappers
         <nav aria-label="Auxiliary" class="aux-nav">
           <ul class="aux-nav-list">
             {% for link in site.aux_links %}
-              <li class="aux-nav-list-item"><a href="{{ link.last }}">{{ link.first }}</a></li>
+              <li class="aux-nav-list-item"><a href="{{ link.last }}" class="site-button">{{ link.first }}</a></li>
             {% endfor %}
           </ul>
         </nav>
@@ -114,6 +114,8 @@ layout: table_wrappers
     <a href="#" id="search-button" class="search-button">
       <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
     </a>
+
+    <div class="search-overlay"></div>
   {% endif %}
 
 </body>

_sass/code.scss

@@ -15,6 +15,7 @@ pre.highlight,
 figure.highlight {
   padding: $sp-3;
   margin-bottom: 0;
+  border-radius: $border-radius;
   -webkit-overflow-scrolling: touch;
   background-color: $code-background-color;
 
@@ -26,7 +27,6 @@ figure.highlight {
 
 .highlighter-rouge {
   margin-bottom: $sp-3;
-  border-radius: $border-radius;
 }
 
 .highlight .c { color: #586e75; } // comment //

_sass/layout.scss

@@ -3,7 +3,7 @@
 //
 
 .side-bar {
-  z-index: 100;
+  z-index: 0;
   display: flex;
   flex-wrap: wrap;
   background-color: $sidebar-color;
@@ -48,15 +48,13 @@
 }
 
 .main-header {
-  @include container;
+  z-index: 0;
   display: none;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     height: $header-height;
     background-color: $body-background-color;
     border-bottom: $border $border-color;
@@ -83,7 +81,14 @@
 }
 
 .site-nav {
+  display: none;
+
+  &.nav-open {
+    display: block;
+  }
+
   @include mq(md) {
+    display: block;
     padding-top: $sp-8;
     padding-bottom: $gutter-spacing-sm;
     overflow-y: auto;
@@ -97,7 +102,6 @@
   align-items: center;
 
   @include mq(md) {
-    z-index: 101;
     height: $header-height;
     max-height: $header-height;
     border-bottom: $border $border-color;
@@ -137,17 +141,22 @@
   height: 100%;
   padding: $gutter-spacing-sm;
   align-items: center;
+}
 
-  @include mq(md) {
+@include mq(md) {
+  .site-header .site-button {
     display: none;
   }
 }
 
-.site-title:hover,
+.site-title:hover {
-.site-button:hover {
   background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
 }
 
+.site-button:hover {
+  background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 100%);
+}
+
 // stylelint-disable selector-max-type
 
 body {

_sass/navigation.scss

@@ -125,37 +125,30 @@
   }
 }
 
-// Small screen nav
+// Aux nav
-
-.site-nav {
-  display: none;
-
-  &.nav-open {
-    display: block;
-  }
-  @include mq(md) {
-    display: block;
-  }
-}
 
 .aux-nav {
-  align-self: center;
+  height: 100%;
+  overflow-x: auto;
+  @include fs-2;
 
   .aux-nav-list {
+    display: flex;
+    height: 100%;
     padding: 0;
     margin: 0;
     list-style: none;
-    @include fs-2;
   }
 
   .aux-nav-list-item {
     display: inline-block;
-    margin-right: $sp-2;
+    height: 100%;
-    @include fs-2;
+    padding: 0;
+    margin: 0;
+  }
 
-    &:last-child {
+  @include mq(md) {
-      margin-right: 0;
+    padding-right: $gutter-spacing-sm;
-    }
   }
 }
 

_sass/search.scss

@@ -4,85 +4,99 @@
 
 .search {
   position: relative;
-  z-index: 99;
+  z-index: 2;
   flex-grow: 1;
-  height: 100%;
+  height: $sp-10;
-  margin-bottom: $sp-3;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
 
   @include mq(md) {
-    margin-bottom: 0;
+    height: 100%;
+    max-width: $search-results-width;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 
 .search-input-wrap {
-  display: flex;
+  position: relative;
   height: 100%;
-  padding: $sp-2;
+  margin-right: $sp-2;
-  background-color: $search-background-color;
+  margin-left: $sp-2;
-  border-radius: $border-radius;
+  transition: margin linear 100ms;
-  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;
+    margin-right: 0;
-    padding-right: 0;
+    margin-left: 0;
-    padding-bottom: 0;
+    transition: none;
-    padding-left: 0;
-    background-color: $body-background-color;
-    border-radius: 0;
-    box-shadow: none;
   }
 }
 
 .search-input {
-  align-self: center;
+  position: absolute;
   width: 100%;
-  padding-top: $sp-1;
+  height: 100%;
-  padding-bottom: $sp-1;
+  padding-top: $sp-2;
+  padding-right: $gutter-spacing-sm;
+  padding-bottom: $sp-2;
+  padding-left: #{$gutter-spacing-sm + $sp-4 * 1.2 + $sp-2};
   background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
-  order: 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);
+  transition: width ease 200ms;
   @include fs-4;
 
+  @include mq(md) {
+    max-width: $search-results-width;
+    padding-left: #{$gutter-spacing + $sp-5};
+    background-color: $body-background-color;
+    border-radius: 0;
+    box-shadow: none;
+    @include fs-3;
+  }
+
   &:focus {
     outline: 0;
-    box-shadow: none;
 
-    + .search-icon {
+    + .search-label .search-icon {
       fill: $link-color;
     }
   }
-
-  @include mq(md) {
-    background-color: $body-background-color;
-    @include fs-3;
-  }
 }
 
-.search-icon {
+.search-label {
-  width: 1.2rem;
+  position: absolute;
-  height: 1.2rem;
+  display: flex;
-  align-self: center;
+  height: 100%;
-  margin-right: $sp-2;
+  padding-left: $gutter-spacing-sm;
-  fill: $grey-dk-000;
+
-  order: 1;
+  @include mq(md) {
+    padding-left: $gutter-spacing;
+  }
+
+  .search-icon {
+    width: #{$sp-4 * 1.2};
+    height: #{$sp-4 * 1.2};
+    align-self: center;
+    fill: $grey-dk-000;
+  }
 }
 
 .search-results {
   position: absolute;
-  z-index: 100;
   display: none;
   width: 100%;
+  max-height: calc(100vh - 100%);
+  overflow-y: auto;
   background: $search-background-color;
-  border-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
 
-  &.active {
-    display: block;
-  }
-
   @include mq(md) {
     width: $search-results-width;
   }
@@ -90,7 +104,6 @@
 
 .search-results-list {
   padding-left: 0;
-  margin-top: $sp-1;
   margin-bottom: $sp-1;
   list-style: none;
   @include fs-4;
@@ -187,6 +200,42 @@
   border: 1px solid rgba($link-color, 0.3);
 }
 
-.blur {
+.search-overlay {
-  filter: blur(5px);
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transition: opacity ease 200ms;
+}
+
+.search-active {
+  overflow: hidden;
+
+  .search-input-wrap {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .search-input {
+    border-radius: 0;
+    box-shadow: none;
+
+    @include mq(md) {
+      width: $search-results-width;
+    }
+  }
+
+  .search-results {
+    display: block;
+  }
+
+  .search-overlay {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+  }
 }

_sass/support/_variables.scss

@@ -94,8 +94,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5  rem == 24px
 $sp-6: map-get($spacers, sp-6) !default; // 2    rem == 32px
 $sp-7: map-get($spacers, sp-7) !default; // 2.5  rem == 40px
 $sp-8: map-get($spacers, sp-8) !default; // 3    rem == 48px
-$sp-9: map-get($spacers, sp-9) !default; // 4    rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 3.5  rem == 56px
-$sp-10: map-get($spacers, sp-10) !default; // 4.5  rem == 48px
+$sp-10: map-get($spacers, sp-10) !default; // 4  rem == 64px
 
 //
 // Borders
@@ -118,7 +118,7 @@ $nav-list-item-height-sm: $sp-8 !default;
 $nav-list-expander-right: true;
 $content-width: 800px !default;
 $header-height: 60px !default;
-$search-results-width: 500px !default;
+$search-results-width: $content-width - $nav-width !default;
 
 //
 // Media queries in pixels

assets/js/just-the-docs.js

@@ -111,12 +111,10 @@ function initSearch() {
     var docs = docs;
     var searchInput = document.getElementById('search-input');
     var searchResults = document.getElementById('search-results');
-    var mainContentWrap = document.getElementById('main-content-wrap');
 
     function hideResults() {
       searchResults.innerHTML = '';
-      searchResults.classList.remove('active');
+      document.body.classList.remove('search-active');
-      mainContentWrap.classList.remove('blur');
     }
 
     function update() {
@@ -138,8 +136,9 @@ function initSearch() {
       });
 
       if (results.length > 0) {
-        searchResults.classList.add('active');
+        window.scroll(0, window.scrollY + searchInput.getBoundingClientRect().top);
-        mainContentWrap.classList.add('blur');
+        document.body.classList.add('search-active');
+
         var resultsList = document.createElement('ul');
         resultsList.classList.add('search-results-list');
         searchResults.appendChild(resultsList);