From 7c797aace6ef86d38c056ebf06afc580304e0abe Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 11 May 2024 21:38:30 -0700
Subject: [PATCH] Improve search styling

---
 index.html | 24 +++++++++++++-----------
 style.css  | 30 +++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index df02776..5087dd3 100644
--- a/index.html
+++ b/index.html
@@ -43,17 +43,19 @@
       </svg>
     </a>
 
-    <form role="search">
-      <label for="query" class="visually-hidden">Search this site</label>
-      <input type="search" name="query" id="query" pattern=".*\w+.*" required>
-      <button>
-        <svg role="img" aria-labelledby="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
-          <title id="search-icon">Search</title>
-          <circle cx="9" cy="9" r="7" stroke="#000" />
-          <line x1="14" y1="14" x2="22" y2="22" stroke="#000" stroke-linecap="round" />
-        </svg>
-      </button>
-    </form>
+    <search>
+      <form>
+        <label for="query" class="visually-hidden">Search this site</label>
+        <input type="search" name="query" id="query" pattern=".*\w+.*" required>
+        <button>
+          <svg role="img" aria-labelledby="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <title id="search-icon">Search</title>
+            <circle cx="9" cy="9" r="7" stroke="#000" />
+            <line x1="14" y1="14" x2="20" y2="20" stroke="#000" stroke-linecap="round" />
+          </svg>
+        </button>
+      </form>
+    </search>
 
     <nav>
       <a id="edit" href="/">
diff --git a/style.css b/style.css
index 34908d7..82c4dce 100644
--- a/style.css
+++ b/style.css
@@ -68,6 +68,15 @@ header * {
   gap: 4px;
 }
 
+header search {
+  flex-grow: 1;
+  justify-content: end;
+}
+
+form {
+  position: relative;
+}
+
 .visually-hidden {
   position: absolute;
   width: 1px;
@@ -80,11 +89,22 @@ header * {
 }
 
 input {
+  inline-size: 32ch;
   min-block-size: 20px;
   font-size: 16px;
-  padding: 4px;
+  padding: 4px 24px 4px 4px;
   background: hsl(0deg 100% 100%);
   border: 1px solid hsl(216deg 30% 80%);
+  border-radius: 4px;
+  outline: 2px solid hsl(216deg 30% 80% / 0);
+  outline-offset: 1px;
+  transition: outline-color 400ms, border-color 400ms;
+
+  &:focus-within {
+    border-color: transparent;
+    outline-color: hsl(216deg 50% 50%);
+    transition: outline-color 200ms, border-color 200ms;
+  }
 }
 
 /* Hide magnifying glass on Safari */
@@ -104,6 +124,10 @@ header > nav {
   header > nav {
     display: initial;
   }
+
+  header search {
+    justify-content: center;
+  }
 }
 
 .footer-links {
@@ -127,6 +151,10 @@ form > button {
   border: none;
   cursor: pointer;
   padding: 0;
+  width: 20px;
+  position: absolute;
+  inset-inline-end: 4px;
+  inset-block-end: 0;
 }
 
 h1 {
-- 
2.47.3