Merge pull request #172 from phel-lang/update-search-bar

Update search bar

Author: Chemaclass

css/components/header.css

@@ -519,6 +519,10 @@ body.menu-open {
     -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
   }
 
+  .dark .mobile-menu-overlay.active {
+    background: #151a24f6;
+  }
+
   .dark .mobile-menu__nav a {
     background: var(--color-dark-surface);
     border-color: var(--color-dark-border);

css/components/search.css

@@ -47,6 +47,32 @@
   color: var(--color-gray-light);
 }
 
+/* Keyboard shortcut indicator */
+.search-shortcut {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 3px 8px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--color-gray-light);
+  background-color: var(--color-light-bg-secondary);
+  border: 1px solid var(--color-light-border);
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--ease-out);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  line-height: 1;
+}
+
+/* Hide shortcut when input has content or is focused */
+.site-header__search.has-content .search-shortcut,
+#search:focus + .search-shortcut {
+  opacity: 0;
+  pointer-events: none;
+}
+
 /* Custom clear button for search input */
 #search::-webkit-search-cancel-button {
   -webkit-appearance: none;
@@ -390,6 +416,12 @@
   color: var(--color-dark-text-muted);
 }
 
+.dark .search-shortcut {
+  color: var(--color-dark-text-muted);
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: #3a3a3a;
+}
+
 .dark #search::-webkit-search-cancel-button {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
   opacity: 0.8;

templates/header.html

@@ -20,6 +20,7 @@
         <!-- Search (always visible, but styled differently on mobile) -->
         <div class="site-header__search">
             <input type="search" id="search" autocomplete="off" placeholder="Search the documentation and API…">
+            <kbd class="search-shortcut" id="search-shortcut" aria-hidden="true">/</kbd>
             <div id="search-results" class="search-results">
                 <ul id="search-results__items" class="search-results__items"></ul>
             </div>