feat(search): ✨ add inline search field

www/static/dergstyle.css

@@ -29,6 +29,7 @@ body {
 
 	--highlight_0: #ee9015b1;
 	--highlight_1: #ee9015;
+	--highlight_1a: #ee901540;
 	--highlight_2: #edd29e;
 
 	--text_1: #FFFFFF;
@@ -39,8 +40,10 @@ body {
 
 	  --content-padding: 	max(0.5rem, min(1rem, var(--content-total-margin)));
 	  --content-margin:   max(0px, calc(var(--content-total-margin) - 1rem));
-	
-    color: var(--text_1);
+	  
+	width: 100vw;
+    
+	color: var(--text_1);
     background: var(--bg_1);
     margin: 0px;
 
@@ -48,6 +51,11 @@ body {
 	
     min-height: 100vh;
 	padding-bottom: 4rem;
+
+	overflow-y: overlay;
+	overflow-x: clip;
+
+	scrollbar-gutter: stable;
 }
 
 @media only screen and (max-width: 600px) {
@@ -68,6 +76,23 @@ body {
 	}
 }
 
+/* width */
+::-webkit-scrollbar {
+width: 3px;
+height: 3px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+background: var(--highlight_1);
+}
+  
+
 :link {
 	color: var(--highlight_1);
 	font-style: italic;
@@ -174,6 +199,7 @@ a:hover {
 	min-height: 100%;
 
 	background: var(--bg_2);
+	min-width: 0;
 }
 
 body::before {
@@ -197,10 +223,37 @@ body::before {
 	z-index: 10;
 	pointer-events: none;
 	
-  transition: opacity 0.2s;
+	transition: opacity 0.2s;
 }
-body.htmx-request::before {
-	opacity: 1;	
+.htmx-indicator {
+	position: relative;
+}
+.htmx-indicator::before {
+	content: '';
+
+	position: absolute;
+
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	
+	width: 100%;
+	height: 100%;
+	
+	background-image: url('/static/three-dots.svg');
+	background-repeat: no-repeat;
+	background-position: center;
+	
+	opacity: 0;
+	
+	z-index: 10;
+	pointer-events: none;
+	
+	transition: opacity 0.2s;
+}
+.htmx-request::before {
+	opacity: 0.5;	
 	
 	transition-delay: 0.5s;
 }

www/static/modest.css

@@ -200,4 +200,7 @@ article {
     & ol {
         padding-left: 2em;
     }
+    & li {
+        margin-bottom: 1em;
+    }
 }

www/static/styles/post_navbar.css

@@ -30,12 +30,112 @@
         }
     }
 
-    & > ._path {
+    & ._search_field {
+        position: relative;
+        
+        width: 1.3em;
+        height: auto;
+        
+        margin-right: 0.2em;
+
+        overflow-x: clip;
+        
+        /*transition: width 0.5s ease;*/
+        
+        & > input {
+            color: var(--text_1);
+
+            height: 1em;
+            width: 100%;
+
+            font-size: 1em;
+
+            background-color: transparent;
+            
+            outline: none;
+
+            border: none;
+
+            padding-left: 1.3rem;
+        }
+        
+        & .fa-icn {
+            position: absolute;
+            left: 0.1em;
+            top: 0.3em;
+            
+            pointer-events: none;
+        }
+        
+        &:focus-within, &:hover, &:has(:focus) {
+            width: min(20em, 60vw);
+            min-width: min(20em, 60vw);
+            
+            & ._search_list {
+                display: block;
+                opacity: 1;
+            }
+            & input {
+                border-bottom: 0.15em solid var(--bg_2);
+            }
+        }
+        
+        & ._search_list {
+            display: none;
+            opacity: 0;
+            
+            background: var(--bg_2);
+            
+            transition: opacity 0.3s ease 0.5s;
+            transition: visibility 0s none 1s;
+            
+            width: 100%
+            max-height: 50vh;
+            overflow-y: scroll;
+            
+            padding: 0.5em;
+            
+            z-index: 6;
+            
+            & li {
+                border-bottom: 1px solid var(--highlight_1);
+                
+                &:hover {
+                    background: var(--highlight_1a);
+                }
+            }
+        }
+    }
+
+    & ._path {
         width: 100%;
         height: 1.5rem;
+        padding-left: 0.5rem;
+        padding-right: 0.6rem;
+
+        background: var(--highlight_1);
+        
+        font-size: 1.1rem;
+    
+        display: flex;
+        flex-direction: row;
+        list-style-type: none;
+    
+        white-space: nowrap; 
+        
+        & > a {
+            color: var(--text_1);
+            padding-right: 0.2rem;
+        }
+    }
+    
+    & ._path_list {
+        width: 100%;
+        height: 100%;
+        
+        margin-right: 1em;
         
         font-style: italic;
-        padding-left: 0.5rem;
     
         background: var(--highlight_1);
         
@@ -49,7 +149,7 @@
         overflow-y: hidden;
     
         white-space: nowrap; 
-
+        
         & a {
             color: var(--text_1);
             padding-right: 0.2rem;

www/static/styles/toc.css

@@ -15,7 +15,7 @@
   box-shadow: -0.2em 0.2em 0.2em black;
   
   --toc-fg: #cecece;
-  --toc-bg: #EE901544;
+  --toc-bg: var(--highlight_1a);
   
   background-color: var(--bg_2);
   

www/static/toc.js

@@ -182,21 +182,19 @@ class TocNavBarUpdater {
   trackingRebuildCallback() {
     this._removeNavbarElements();
 
-    this.navbar_dom = document.querySelector('#main_navbar_path');
+    this.navbar_dom = document.querySelector('#main_navbar_path_list');
   }
 
   trackingUpdateCallback(element) {
     this._removeNavbarElements();
     
-    const navbar_prev_node = this.navbar_dom.children[this.navbar_dom.children.length -1];
-
     element.path.forEach(pathItem => {
       let newNode = document.createElement('li');
 
       const pathURL = location.pathname + '#' + pathItem.id + location.search;
       newNode.innerHTML = "<a href=" + pathURL + "> #<sub>" + pathItem.level + '</sub>' + pathItem.name + '</a>'
       
-      this.navbar_dom.insertBefore(newNode, navbar_prev_node);
+      this.navbar_dom.appendChild(newNode);
       this.added_navbar_elements.push(newNode);
     });