search dropdown

Author: ArthurFlag

assets/css/global.css

@@ -20,7 +20,7 @@
 }
 
 mark {
-  @apply bg-transparent font-bold text-blue-500 dark:text-blue-800;
+  @apply bg-transparent font-bold text-blue-500 dark:text-blue-400;
 }
 
 /* Hide the clear (X) button for search inputs */

assets/css/utilities.css

@@ -250,7 +250,7 @@
   font-size: 90%;
 }
 @utility topbar-button {
-  @apply text-white font-semibold min-h-10 px-2 bg-blue-400/50 rounded-md border-1 border-blue-300  inline-flex justify-center items-center gap-1.5 hover:bg-blue-400/70 hover:border-blue-200 transition-colors;
+  @apply text-white font-semibold min-h-10 px-2 bg-blue-300/50 rounded-md border-1 border-blue-300  inline-flex justify-center items-center gap-1.5 hover:bg-blue-400/70 hover:border-blue-200 transition-colors;
   svg {
    font-size: 19px;
   }

hugo_stats.json

@@ -172,9 +172,12 @@
       "bg-blue-500",
       "bg-gradient-to-br",
       "bg-gradient-to-r",
+      "bg-gray-0",
       "bg-gray-100",
+      "bg-gray-100t",
       "bg-gray-400",
       "bg-gray-50",
+      "bg-gray-50/2",
       "bg-gray-700",
       "bg-green-400",
       "bg-green-500",
@@ -188,11 +191,13 @@
       "block",
       "border",
       "border-0",
+      "border-1",
       "border-b",
       "border-b-4",
       "border-blue",
       "border-blue-300",
       "border-divider-light",
+      "border-gray-100",
       "border-gray-200",
       "border-gray-400",
       "border-green-400",
@@ -240,7 +245,10 @@
       "dark:border-b-blue-600",
       "dark:border-divider-dark",
       "dark:border-gray-400",
+      "dark:border-gray-600",
       "dark:border-gray-700",
+      "dark:border-gray-800",
+      "dark:border-gray-900",
       "dark:border-green-400",
       "dark:border-l-magenta-dark",
       "dark:fill-blue-300",
@@ -293,7 +301,9 @@
       "focus:outline-none",
       "focus:ring-3-blue-light",
       "font-bold",
+      "font-light",
       "font-medium",
+      "font-mediux",
       "font-normal",
       "font-semibold",
       "footnote-backref",
@@ -551,8 +561,11 @@
       "text-gray-300",
       "text-gray-400",
       "text-gray-500",
+      "text-gray-600",
       "text-gray-700",
       "text-gray-800",
+      "text-gray-950",
+      "text-gray-9700",
       "text-left",
       "text-lg",
       "text-magenta-light",

layouts/partials/search-bar.html

@@ -10,6 +10,7 @@
     x-ref="searchBarInput"
     type="search"
     id="search-bar-input"
+    placeholder="Search"
     @focus="open = true;"
     @keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;"
     @keyup.escape.prevent="open = false;"
@@ -31,31 +32,25 @@
           {{ partial "utils/svg.html" "/icons/search.svg" }}
         </span>
   </div>
-  <div
-    id="search-bar-dropdown"
-    x-show="open"
-    x-cloak
-    x-ref="dropdown"
-    x-init="$nextTick(() => {
-      if (open) {
+  <div id="search-bar-dropdown" x-show="open" x-cloak x-ref="dropdown" x-init="$nextTick(() => {
+       if (open) {
         const containerRect = document.getElementById('search-bar-container').getBoundingClientRect();
         const rect = $refs.searchBarRef.getBoundingClientRect();
         $el.style.top = (rect.bottom + window.scrollY + 9) + 'px';
-        $el.style.left = (containerRect.right - Math.max(rect.width, 400)) + 'px';
-        $el.style.width = Math.max(rect.width, 400) + 'px';
+        $el.style.left = (containerRect.right - 600) + 'px';
+        $el.style.width = '600px';
       }
-    })"
-    x-effect="if (open) {
-      const containerRect = document.getElementById('search-bar-container').getBoundingClientRect();
-      const rect = $refs.searchBarRef.getBoundingClientRect();
-      $el.style.top = (rect.bottom + window.scrollY + 9) + 'px';
-      $el.style.left = (containerRect.right - Math.max(rect.width, 400)) + 'px';
-      $el.style.width = Math.max(rect.width, 400) + 'px';
-    }"
-    class="bg-background-light dark:bg-background-dark fixed z-[999] max-w-xl rounded-sm px-6 py-4 shadow-lg"
-  >
+      })" x-effect="if (open) {
+        const containerRect = document.getElementById('search-bar-container').getBoundingClientRect();
+        const rect = $refs.searchBarRef.getBoundingClientRect();
+        $el.style.top = (rect.bottom + window.scrollY + 9) + 'px';
+        $el.style.left = (containerRect.right - 600) + 'px';
+        $el.style.width = '600px';
+      }"
+    class="font-medium text-gray-400 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 rounded-sm mt-1 border-1 border-gray-100 dark:border-gray-700 fixed z-[999] max-w-xl p-6 shadow-md">
     <div id="search-bar-results">
-      {{- $emptyState := `<div class="p-2 text-gray-500 dark:text-gray-400">Start typing to search or try <button onclick="askAI('search-bar-input')" class="link">Ask AI</button></div>` }}
+      {{- $emptyState := `<div>Start typing to search or try <button onclick="askAI('search-bar-input')" class="link">Ask
+          AI</button>.</div>` }}
       {{- $emptyState | safe.HTML }}
       <!-- results -->
     </div>