Improve display of search and results

src/less/website/navigation.less

-.book .book-body  {
-    .navigation {
+/*
+    Right/Left buttons to change page
+*/
+
+.navigation {
     position: absolute;
     top: @header-height;
     bottom: 0px;
@@ -30,9 +33,9 @@
     &.navigation-prev {
         left: 0px;
     }
-    }
+}
 
-    @media (max-width: @mobileMaxWidth) {
+@media (max-width: @mobileMaxWidth) {
     .navigation {
         position: static;
         top: auto;
@@ -46,5 +49,5 @@
             width: 100%;
         }
     }
-    }
 }
+

src/less/website/search.less

-.book-search {
+/*
+    Search input and results, works in sync with the "search" plugin
+*/
+
+#book-search-input {
     padding: 6px;
     background: transparent;
 
     position: absolute;
-    top: -50px;
+    top: 0px;
     left: 0px;
     right: 0px;
     transition: top 0.5s ease;
@@ -22,19 +26,10 @@
     }
 }
 
-body.with-search {
-    .book-summary {
-        .book-search {
-            top: 0px;
-        }
-
-        ul.summary {
-            top: 50px;
-        }
-    }
-}
-
 #book-search-results {
+    opacity: 1;
+
+    .search-results {
         .search-results-title {
             text-transform: uppercase;
             text-align: center;
@@ -43,68 +38,20 @@ body.with-search {
             opacity: 0.6;
         }
 
-    .search-results {
-        display: none;
-
-        ul.search-results-list {
-            list-style-type: none;
-            padding-left: 0;
-
-            li {
-                margin-bottom: @search-padding-default;
-                padding-bottom: @search-padding-default/3;
-
-                a {
-
-                }
-
-                /* Highlight results */
-                p em {
-                    background-color: @search-highlight-color;
-                    font-style: normal;
-                }
-            }
-        }
-
-        .no-results {
-            display: none;
-        }
-    }
-
-    &.open {
-        .search-results {
-            display: block;
-        }
-
-        .search-noresults {
-            display: none;
-        }
-    }
-
-    &.no-results {
-        .search-results {
-            .has-results {
-                display: none;
-            }
-
-            .no-results {
-                display: block;
-            }
-        }
-    }
-}
-
-#book-search-results {
-    opacity: 1;
-    .search-results {
         .has-results {
+            .search-results-item {
                 .gitbook-markdown(@md-color: @content-color, @md-line-height: @content-line-height);
+            }
 
             .search-results-item h3 {
                 margin-top: 0px;
                 margin-bottom: 0px;
             }
         }
+
+        .no-results {
+            padding: 40px 0px;
+        }
     }
 }
 
@@ -113,3 +60,11 @@ body.search-loading {
         opacity: 0.3;
     }
 }
+
+// When search is enabled, we hide the navigation left/right
+body.with-search {
+    .navigation {
+        display: none;
+    }
+}
+

src/less/website/summary.less

@@ -17,7 +17,7 @@
 
         ul.summary {
             position: absolute;
-            top: 0px;
+            top: @search-height;
             left: 0px;
             right: 0px;
             bottom: 0px;

src/less/website/variables.less

@@ -51,6 +51,7 @@
 @sidebar-link-completed-weight:       normal;
 
 // Search
+@search-height:                       50px;
 @search-padding-default:              1.5rem;
 @search-results-opacity:              0.95;
 @search-highlight-color:              rgba(255, 220, 0, 0.4);