search customized

_includes/search-lunr.html

@@ -51,7 +51,7 @@ var idx = lunr(function () {
 function lunr_search(term) {
     document.getElementById('lunrsearchresults').innerHTML = '<ul></ul>';
     if(term) {
-        document.getElementById('lunrsearchresults').innerHTML = "<p>Search results for '" + term + "'</p>" + 
+        document.getElementById('lunrsearchresults').innerHTML = "<h3 class='search_title'>Search results for '" + term + "'</h3>" + 
         "<div id='search_closer' onclick='search_close()'>\
             <img src='/assets/images/times.png' alt='closer'>\
         </div>" 
@@ -74,9 +74,9 @@ function lunr_search(term) {
                     <a href='" + url + "'>\
                         <div class='page_title'>\
                             <h3 class='title'>" + title + "</h3>\
-                            <p class='url'>"+ url +"</p>\
+                            <span class='url'>"+ url +"</span>\
                         </div>\
-                        <p class='body'>"+ body +"</p>\
+                        <span class='body'>"+ body +"</span>\
                     </a>\
                 </li>";
             }
@@ -94,7 +94,7 @@ function lunr_search(term) {
 </script>
 
 <form onSubmit="return lunr_search(document.getElementById('lunrsearch').value);">
-    <p><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search" /></p>
+    <h3><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search" /></h3>
 </form>
 <div id="lunrsearchresults" class="lunrsearchresults hidden">
   <ul></ul>

_sass/custom.scss

@@ -43,7 +43,7 @@ li {
   position: sticky;
   top: 0;
   z-index: 1000;
-
+  min-height: 80px;
   .toggle_mnu {
     background: transparent;
     border: 0;
@@ -107,9 +107,7 @@ li {
 }
 
 .home_intro {
-  padding-top: 30px;
   display: grid;
-  gap: 2em;
   align-items: start;
   .text_box {
     h2 {
@@ -132,7 +130,7 @@ li {
   display: block;
   margin-left: auto;
   margin-right: auto;
-  width: 70%;
+  width: 90%;
 }
 
 .page-content {
@@ -142,7 +140,7 @@ li {
 .content {
   grid-area: c;
   margin: 0 auto;
-  padding: 30px;
+  padding: 20px;
   .content_grid {
     display: flex;
     flex-wrap: wrap;
@@ -305,6 +303,7 @@ li {
     vertical-align: middle;
   }
 }
+
 /* Document style */
 .doc_page {
   .docs {
@@ -317,9 +316,7 @@ li {
     .intro_wrapper {
       grid-area: top;
       padding: 20px;
-      background: $background-color;
+      color: $background-color;
-      color: $text-color;
-      /* grid-area: c; */
     }
     .sidebar_left {
       grid-area: bottom;
@@ -403,6 +400,70 @@ li {
     }
   }
 }
+
+/* search block */
+
+.search {
+  position: fixed;
+  top: 44px;
+  position: fixed;
+  z-index: 1001;
+}
+.lunrsearchresults {
+  box-sizing: border-box;
+  position: fixed;
+  width: 96%;
+  left: 2%;
+  top: 80px;
+  border: 1px solid #828282;
+  box-shadow: inset 1px 1px 34px 9px rgba(0, 0, 0, 0.1);
+  border-radius: 7px;
+  background: lighten($brand-color, 90%);
+  color: $text-color;
+  padding: 20px;
+  max-height: 70vh;
+  overflow-y: auto;
+  .lunrsearchresult a {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+  #search_closer {
+    width: 20px;
+    height: auto;
+    cursor: pointer;
+    z-index: 9999;
+  }
+  ul {
+    li {
+      padding: 10px;
+    }
+    list-style-type: none;
+    margin-left: 0;
+    .page_title {
+      border-right: 1px solid $grey-color-light;
+    }
+  }
+}
+.search h3 {
+  color: $brand-color;
+}
+.lunrsearchresult .url {
+  color: $sidebar-color;
+}
+.lunrsearchresult a {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 20px;
+  color: $grey-color-dark;
+}
+.lunrsearchresult a:hover,
+.lunrsearchresult a:focus {
+  text-decoration: none;
+}
+.lunrsearchresult a:hover .title {
+  text-decoration: underline;
+}
+
 /* tags filters */
 
 .tag_filter {
@@ -451,8 +512,22 @@ li {
     padding: 20px;
   }
   .intro {
-    padding: 30px;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas: "a b";
+    .image_box {
+      grid-area: b;
+      img {
+        width: 100%;
+      }
+    }
+    .text_box {
+      grid-area: a;
+      align-self: center;
+    }
   }
+
   .home_intro {
     h1 {
       font-size: 56px;
@@ -485,39 +560,41 @@ li {
 
 @media screen and (min-width: 1024px) {
   .lunrsearchresults {
-    border: 1px solid;
+    border: 1px solid $grey-color;
+    box-shadow: inset 1px 1px 34px 9px rgba(0, 0, 0, 0.1);
     border-radius: 5px;
     margin-top: 0.2rem;
     display: grid;
     grid-template-columns: 1fr 50px;
-    background: $background-color;
+    background: lighten($brand-color, 90%);
     color: $text-color;
     padding: 20px;
     max-height: 70vh;
     overflow-y: auto;
     #search_closer {
+      width: 20px;
+      height: auto;
       cursor: pointer;
       z-index: 9999;
     }
     ul {
+      li {
+        padding: 10px;
+      }
       list-style-type: none;
       margin-left: 0;
       .page_title {
-        border-right: 1px solid;
+        border-right: 1px solid $grey-color-light;
       }
     }
   }
-  .lunrsearchresult .title {
+  .search h3 {
     color: $brand-color;
   }
-  .lunrsearchresult .url {
+  .lunrsearchresults
-    color: silver;
-  }
   .lunrsearchresult a {
-    display: grid;
     grid-template-columns: 1fr 2fr;
-    column-gap: 20px;
+    gap: 20px;
-    color: #777;
   }
   .lunrsearchresult a:hover,
   .lunrsearchresult a:focus {
@@ -529,10 +606,8 @@ li {
 
   .search {
     left: 360px;
-    top: 15px;
+    top: 13px;
     padding-right: 50px;
-    position: fixed;
-    z-index: 1001;
   }
 
   .hidden {
@@ -554,7 +629,7 @@ li {
     .docs_content {
       grid-area: d;
       max-width: 1000px;
-      padding: 40px;
+      padding-right: 40px;
     }
     .intro_wrapper {
       grid-area: c;
@@ -596,7 +671,6 @@ li {
   }
   .intro {
     max-width: 1000px;
-    padding: 5vw 40px 30px;
     display: grid;
     gap: 40px;
     grid-template-columns: 2fr 1fr;
@@ -620,6 +694,13 @@ li {
   }
 }
 @media screen and (min-width: 1440px) {
+  .search {
+    top: 22px;
+  }
+  .lunrsearchresults {
+  width: 60%;
+  left: 20%;
+  }
   .content .content_grid .content_item {
     width: 27%;
     margin: 10px;