add Google site-search input to header nav
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>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user