search

Signed-off-by: Lee Calcote <[email protected]>

assets/scss/_navbar_project.scss

@@ -9,15 +9,15 @@
 }
 
 .nav-link-external {
-  border: 1px solid transparent;
+  border: 1px solid $primary;
   border-radius: 0.25rem;
-  color: $primary;
+  color: $secondary;
   background: transparent;
   transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
 }
 
 .nav-link-external:hover {
-  border: 1px solid $primary;
+  border: 1px solid $secondary;
   color: $primary;
   box-shadow: $light 0 0 5px;
   background-color: transparent;

assets/scss/_styles_project.scss

@@ -20,21 +20,23 @@
     align-content: center;
     // background-color: #EBC017;
     background-color:#2e2e31;
+    border-radius: 1rem; 
+
 
       .td-search__input {
         width: 100%;
         text-indent: 1.25em;
-        border-radius: 1rem; }
+        border-radius: 1rem; 
+      }
         .td-search__input:not(:focus) {
-          background: transparent; }
+          background: transparent;
+          border-radius: 1rem;  }
         .td-search__input.form-control:focus {
-          border-color: orange;
-          box-shadow: 0 0 0 2px red;
           color: inherit; }
     }
     .td-search__input.form-control:focus {
 
-      background-color: #EBC017;
+      // background-color: #EBC017;
     }    
 
 }
@@ -254,7 +256,7 @@ a:not([href]):not([class]):hover {
 .td-sidebar-toc {
   line-height: 1.25rem;
   border-left: 1px solid $border-color;
-  background-color: $td-sidebar-toc-bg-color;
+  background-image: linear-gradient(to top, #1e2117, #1d1912, #18120e, #0f0a09, #000000);
   @supports (position: sticky) {
     position: sticky;
     top: 4rem;

hugo.toml

@@ -126,15 +126,15 @@ github_project_repo = "https://github.com/layer5io/docs"
 github_branch = "master"
 
 # Google Custom Search Engine ID. Remove or comment out to disable search.
-gcs_engine_id = "f475448a7bc1d43a4"
+# gcs_engine_id = "f475448a7bc1d43a4"
 # Layer5 search engine link https://cse.google.com/cse?cx=f475448a7bc1d43a4
 # Customization link https://programmablesearchengine.google.com/controlpanel/lookandfeel?cx=f475448a7bc1d43a4
 
 # Enable Algolia DocSearch
 algolia_docsearch = false
 
 # Enable Lunr.js offline search
-offlineSearch = false
+offlineSearch = true
 
 # Enable syntax highlighting and copy buttons on code blocks with Prism
 prism_syntax_highlighting = false

layouts/partials/hotkey.html

@@ -1,13 +1,14 @@
 <style>
-  #searchKey {
+  /* #searchKey {
     font-size: 16px;
     font-weight: bold;
-    color: black;
+    color: white;
     background-color: #cccccc;
     border-radius: 6px;
     margin: 0px;
-  }
+  } */
 </style>
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/main.min.css" />
 <script>
   function focusSearchBar() {
     var searchBar = document.querySelector(".td-search-input");
@@ -23,10 +24,17 @@
     }
   });
 
+  searchKey.addEventListener('mousedown', () =>{
+      event.preventDefault();
+      focusSearchBar();
+  });
+
   document.addEventListener("DOMContentLoaded", function () {
-    var searchKey = document.createElement("div");
-    searchKey.id = "searchKey";
 
+    var searchKey = document.getElementById("searchKey");
+    if (searchKey) {
+      searchBar.focus();
+    }
     var searchElement = document.querySelector(".td-search-input");
     if (searchElement) {
       searchElement.appendChild(searchKey);

layouts/partials/navbar.html

@@ -22,7 +22,9 @@
                 <div class="td-search">
                     <div class="td-search__icon"></div>
                     <input type="search" class="td-search__input form-control td-search-input" placeholder="Search"
-                           aria-label="Search this site…" autocomplete="off"></div>
+                           aria-label="Search this site…" autocomplete="off">
+                    <button id="searchKey" style="margin-left:-2rem;" class="kbc-button kbc-button-xs">/</button> 
+                        </div>
             </div>
         </div>
     </nav>