use flex header

Author: ArthurFlag

hugo_stats.json

@@ -11,6 +11,7 @@
       "-v",
       "-z-10",
       ".NET",
+      "2xl:flex",
       ":",
       "AWS-Route-53",
       "Admin-Console",
@@ -200,6 +201,7 @@
       "border-green-400",
       "border-l-2",
       "border-l-magenta-light",
+      "border-none",
       "border-transparent",
       "border-white",
       "bottom-0",
@@ -291,7 +293,9 @@
       "flex-grow",
       "flex-none",
       "flex-shrink",
+      "flex-shrink-0",
       "flex-wrap",
+      "focus:outline-none",
       "focus:ring-3-blue-light",
       "font-bold",
       "font-medium",
@@ -445,6 +449,9 @@
       "ml-3",
       "ml-4",
       "ml-auto",
+      "mr-15",
+      "mr-24",
+      "mr-4",
       "mt-1",
       "mt-1.5",
       "mt-2",
@@ -477,6 +484,7 @@
       "outline-1",
       "outline-gray-200",
       "outline-hidden",
+      "outline-none",
       "outline-offset-[-1px]",
       "overflow-clip",
       "overflow-hidden",
@@ -602,15 +610,23 @@
       "truncate",
       "underline-offset-2",
       "w-1.5",
+      "w-100",
       "w-2",
+      "w-3",
+      "w-30",
+      "w-3items-center",
+      "w-40",
       "w-5",
+      "w-50",
       "w-65",
       "w-8",
       "w-[1200px]",
       "w-fit",
       "w-full",
       "w-screen",
       "whitespace-nowrap",
+      "x",
+      "xl:flex",
       "xl:flex-row",
       "xl:grid-cols-3",
       "xl:grid-cols-4",

layouts/partials/header.html

@@ -26,7 +26,8 @@
           </div>
         </a>
       </div>
-      <nav class="mt-1 hidden md:block">
+      <nav class="mt-1 hidden md:flex lg:flex xl:flex 2xl:flex">
+        {{/* main menu */}}
         <ul class="flex text-sm md:text-base lg:gap-4">
           {{ range site.Menus.main }}
             <li
@@ -44,8 +45,8 @@
         </ul>
       </nav>
     </div>
-    <div class="flex min-w-0  items-center justify-end gap-4">
-      <div class="topbar-button overflow-visible">
+    <div id="buttons" class="flex min-w-0 items-center justify-end gap-4 flex-shrink-0">
+      <div class="topbar-button">
          {{ partialCached "search-bar.html" "-" }}
       </div>
       <button

layouts/partials/search-bar.html

@@ -1,18 +1,13 @@
-<!-- search button, mobile (link off to the search page for now) -->
-<a href="/search" class="sm:hidden">
-  <span class="icon-svg">{{ partialCached "icon" "search" "search" }}</span>
-</a>
-<!-- search button -->
 <div
   x-ref="searchBarRef"
   x-data="{ open: false }"
   @click.outside="open = false;"
   @keyup.escape.window="open = false"
   id="search-bar"
-  class="relative items-center flex"
+  class="relative w-40 items-center flex"
 >
-  <div id="search-bar-keyboard-shortcuts" x-cloak :class="open && 'hidden'"
-    class="sm:hidden rounded-sm text-sm md:flex md:items-center"
+  <div id="search-bar-keyboard-shortcuts"
+    class="text-sm flex items-center"
     >
     <div>
       <span x-show="navigator.platform == 'MacIntel'" class="icon-svg icon-sm">{{ partialCached "icon"
@@ -40,7 +35,7 @@
             break;
           }
         }"
-    class="min-w-0 flex-grow px-2 text-white outline-hidden order-1"
+    class="flex-grow px-2 order-1 min-w-0 border-none outline-none focus:outline-none"
     tabindex="0"
   />
   <div id="search-bar-icon" class="order-2">
@@ -56,14 +51,14 @@
       if (open) {
         const rect = $refs.searchBarRef.getBoundingClientRect();
         $el.style.top = (rect.bottom + window.scrollY + 9) + 'px';
-        $el.style.left = rect.left + 'px';
+        $el.style.left = (rect.right - Math.max(rect.width, 400)) + 'px';
         $el.style.width = Math.max(rect.width, 400) + 'px';
       }
     })"
     x-effect="if (open) {
       const rect = $refs.searchBarRef.getBoundingClientRect();
       $el.style.top = (rect.bottom + window.scrollY + 9) + 'px';
-      $el.style.left = rect.left + 'px';
+      $el.style.left = (rect.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"