From fbcb8b3a9c8d373c1b2637be33295724977b1005 Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Fri, 1 May 2026 17:50:26 +0800
Subject: [PATCH] add Google site-search input to header nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Slim pill-shaped search input next to the nav links. On submit,
opens Google with site:hype404.com prefixed to the query in a new
tab. No external API or signup needed. Phosphor lime focus ring
with accent-soft glow matches the dark CRT palette. Width expands
on focus (150px → 200px).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layouts/Layout.astro | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e210236..03c251e 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -178,6 +178,33 @@ const year = new Date().getFullYear();
     }
     nav.nav a:hover::after { transform: scaleX(1); }
 
+    /* Site search — slim Google-redirect input */
+    .site-search { display: inline-flex; }
+    .site-search input {
+      background: var(--bg-soft);
+      border: 1px solid var(--line-strong);
+      color: var(--ink);
+      font-family: inherit;
+      font-size: 13px;
+      letter-spacing: 0.04em;
+      padding: 6px 14px;
+      border-radius: 999px;
+      width: 150px;
+      transition: width 0.2s ease, border-color 0.15s, box-shadow 0.15s;
+    }
+    .site-search input::placeholder {
+      color: var(--ink-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      font-size: 11px;
+    }
+    .site-search input:focus {
+      outline: none;
+      width: 200px;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-soft);
+    }
+
     main { padding: 0 0 64px; }
 
     /* ========== Reveal animation for cards ========== */
@@ -752,6 +779,10 @@ const year = new Date().getFullYear();
           <a href="/">Home</a>
           <a href="/about/">About</a>
           <a href="/rss.xml">RSS</a>
+          <form class="site-search" role="search"
+                onsubmit="event.preventDefault();window.open('https://www.google.com/search?q='+encodeURIComponent('site:hype404.com '+this.q.value),'_blank');this.q.value='';">
+            <input type="search" name="q" placeholder="Search…" aria-label="Search hype404" required />
+          </form>
         </nav>
       </div>
     </header>