Improve display of search and results

src/less/website/navigation.less

-.book .book-body  {
-    .navigation {
-        position: absolute;
-        top: @header-height;
-        bottom: 0px;
-        margin: 0;
-        max-width: 150px;
-        min-width: 90px;
+/*
+    Right/Left buttons to change page
+*/
 
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        flex-direction: column;
+.navigation {
+    position: absolute;
+    top: @header-height;
+    bottom: 0px;
+    margin: 0;
+    max-width: 150px;
+    min-width: 90px;
 
-        font-size: 40px;
-        color: @navigation-color;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
 
-        text-align: center;
+    font-size: 40px;
+    color: @navigation-color;
 
-        .transition(all 350ms ease);
+    text-align: center;
 
-        &:hover {
-            text-decoration: none;
-            color: @navigation-hover-color;
-        }
+    .transition(all 350ms ease);
 
-        &.navigation-next {
-            right: 0px;
-        }
-        &.navigation-prev {
-            left: 0px;
-        }
+    &:hover {
+        text-decoration: none;
+        color: @navigation-hover-color;
+    }
+
+    &.navigation-next {
+        right: 0px;
+    }
+    &.navigation-prev {
+        left: 0px;
     }
+}
 
-    @media (max-width: @mobileMaxWidth) {
-        .navigation {
-            position: static;
-            top: auto;
-            max-width: 50%;
-            width: 50%;
-            display: inline-block;
-            float: left;
-
-            &.navigation-unique {
-                max-width: 100%;
-                width: 100%;
-            }
+@media (max-width: @mobileMaxWidth) {
+    .navigation {
+        position: static;
+        top: auto;
+        max-width: 50%;
+        width: 50%;
+        display: inline-block;
+        float: left;
+
+        &.navigation-unique {
+            max-width: 100%;
+            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,89 +26,32 @@
     }
 }
 
-body.with-search {
-    .book-summary {
-        .book-search {
-            top: 0px;
-        }
-
-        ul.summary {
-            top: 50px;
-        }
-    }
-}
-
 #book-search-results {
-    .search-results-title {
-        text-transform: uppercase;
-        text-align: center;
-        font-weight: 200;
-        margin-bottom: 35px;
-        opacity: 0.6;
-    }
+    opacity: 1;
 
     .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-results-title {
+            text-transform: uppercase;
+            text-align: center;
+            font-weight: 200;
+            margin-bottom: 35px;
+            opacity: 0.6;
         }
 
-        .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 {
-            .gitbook-markdown(@md-color: @content-color, @md-line-height: @content-line-height);
+            .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;
+        }
     }
 }
 
@@ -112,4 +59,12 @@ body.search-loading {
     #book-search-results {
         opacity: 0.3;
     }
-}
\ No newline at end of file
+}
+
+// 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);