Improved search button and results, added blur to content

(cherry picked from commit 99371e971406090a2dba7b9b69f514a8f87afce3)

_layouts/default.html

@@ -59,7 +59,7 @@ layout: table_wrappers
             </nav>
           {% endif %}
         </div>
-        <div class="main-content-wrap">
+        <div id="main-content-wrap" class="main-content-wrap">
           {% unless page.url == "/" %}
             {% if page.parent %}
               <nav aria-label="Breadcrumb" class="breadcrumb-nav">

_sass/search.scss

@@ -181,3 +181,12 @@
   align-items: center;
   justify-content: center;
 }
+
+.search-results,
+.search-button {
+    border: 1px solid rgba($link-color, 0.3);
+}
+
+.blur {
+  filter: blur(5px);
+}

assets/js/just-the-docs.js

@@ -113,10 +113,12 @@ function initSearch() {
     var docs = data;
     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');
+      mainContentWrap.classList.remove('blur');
     }
 
     jtd.addEvent(searchInput, 'keydown', function(e){
@@ -195,6 +197,7 @@ function initSearch() {
 
       if (results.length > 0) {
         searchResults.classList.add('active');
+        mainContentWrap.classList.add('blur');
         var resultsList = document.createElement('ul');
         resultsList.classList.add('search-results-list');
         searchResults.appendChild(resultsList);