Design tweaks on docs

docs/sass/_search.scss

@@ -5,6 +5,7 @@
 
   input {
     width: 100%;
+    padding: 0.5rem;
   }
 }
 
@@ -14,17 +15,33 @@
   background: white;
   color: black;
   padding: 1rem;
-  width: 100%;
   box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
   max-height: 500px;
   overflow: auto;
+  width: 150%;
+  right: 0;
 
   &__items {
     list-style: none;
   }
 
+  li {
+    margin-top: 1rem;
+    border-bottom: 1px solid #ccc;
+    font-size: 0.9rem;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
+
   &__item {
     margin-bottom: 1rem;
-    font-size: 0.9rem;
+
+    a {
+      font-size: 1.2rem;
+      display: inline-block;
+      margin-bottom: 0.5rem;
+    }
   }
 }

docs/static/search.js

@@ -156,6 +156,11 @@ function initSearch() {
     }
 
     var results = index.search(term, options);
+    if (results.length === 0) {
+      $searchResults.style.display = "none";
+      return;
+    }
+
     currentTerm = term;
     for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
       var item = document.createElement("li");

docs/templates/index.html

@@ -20,7 +20,7 @@
                 <a class="white" href="https://github.com/Keats/gutenberg" class="nav-link">GitHub</a>
 
                 <div class="search-container">
-                    <input id="search" type="search" placeholder="Search the docs">
+                    <input id="search" type="search" placeholder="🔎 Search the docs">
 
                     <div class="search-results">
                         <div class="search-results__items"></div>