Improve search styling

diff --git a/index.html b/index.html
index df027767d0baf467fb36bb2948bf679f50bc15c2..5087dd3cee3a51faa1c7060895b0f929adb2d9f2 100644 (file)
--- 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 34908d72f69d922d02559ca38d709bf6576d48e2..82c4dce46b4a5356ed591bdebb3091af05f5523d 100644 (file)
--- 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 {