add Google site-search input to header nav

Slim pill-shaped search input. Submits site:qipaobuzz.com queries
to Google in a new tab. Vermilion focus ring matches the Chinese
magazine palette.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Code
2026-05-01 17:50:40 +08:00
parent d298fc9f0f
commit e32ba094df

View File

@@ -147,6 +147,27 @@ const ads = site.ads;
}
nav.nav a:hover { color: var(--accent); }
/* Site search — slim Google-redirect input, Chinese magazine palette */
.site-search { display: inline-flex; }
.site-search input {
background: var(--bg-card);
border: 1px solid var(--line);
color: var(--ink);
font-family: inherit;
font-size: 13px;
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); }
.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; }
/* ========== Index post cards ========== */
@@ -700,6 +721,10 @@ const ads = site.ads;
<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:qipaobuzz.com '+this.q.value),'_blank');this.q.value='';">
<input type="search" name="q" placeholder="Search…" aria-label="Search qipaobuzz" required />
</form>
</nav>
</div>
</header>