Implement search, loading on demand

1 files changed, 20 insertions, 14 deletions

diff --git a/assets/book.scss b/assets/book.scss
index 8a94551..d5f3f87 100644
--- a/assets/book.scss
+++ b/assets/book.scss
@@ -138,22 +138,28 @@ ul.pagination {
 }
 
 .book-search {
-  border: 0;
-  border-bottom: $padding-1 solid $gray-200;
-  outline: none;
-  // padding: $padding-4 $padding-8 $padding-4 $padding-16+$padding-4;
-  padding: $padding-4 $padding-8 $padding-4 0;
-  margin-bottom: $padding-4;
-  width: 100%;
-
-  // background: url("svg/search.svg") left center no-repeat;
-  // background-size: $padding-16;
-
-  &:focus {
-    border-bottom-color: $body-font-color;
+  #book-search-input {
+    border: 0;
+    border-bottom: $padding-1 solid $gray-200;
+    outline: none;
+    padding: $padding-4 $padding-8 $padding-4 $padding-16 + $padding-4;
+
+    width: 85%;
+  
+    background: url("svg/search.svg") left center no-repeat;
+    background-size: $padding-16;
+  
+    &:focus {
+      border-bottom-color: $body-font-color;
+    }
+  }
+
+  #book-search-results li:last-child {
+    margin-bottom: $padding-16 * 2;
   }
 }
 
+
 .book-toc {
   flex: 0 0 $toc-width;
   font-size: $font-size-12;
@@ -196,7 +202,7 @@ ul.pagination {
 
 .book-posts {
   min-width: $body-min-width;
-  max-width: $sm-breakpoint;
+  max-width: $body-min-width * 2;
   flex-grow: 1;
   padding: $padding-16;