ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Apple-grade pass — scale, type, photographic hero, de-noise, single-signal chrome, lighter header

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012jWfn3RwPfFGTtBddm36Uy
This commit is contained in:
ctao
2026-07-25 11:47:30 +02:00
committed by ctao
co-authored by Claude Fable 5
parent 3202b853a7
commit eaf511a976
11 changed files with 525 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Base.astro
+11 -10
View File
@@ -62,9 +62,11 @@ const links = [
))}
</nav>
<span class="spacer"></span>
{/* Site search lives in the header (desktop: compact field; ≤1024px: the
magnifier <details> below). Plain GET form — works without JS; with JS
the shared suggest dropdown appears (search-client.js). */}
{/* Site search. Desktop ≥1025px: a VISIBLE quiet field — NN/g's
magnifying-glass-icon research: hiding search behind an icon
measurably reduces discoverability and usage; a visible input is
recommended when search matters (200+ articles, spec-required).
Plain GET form (works without JS); suggestions via search-client.js. */}
<form class="nav-search" role="search" aria-label="Site search" action="/search" method="get">
<label class="sr-only" for="hdr-q">Search news</label>
<svg class="ico search-ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4.3-4.3" /></svg>
@@ -72,10 +74,9 @@ const links = [
<ul class="suggest" id="hdr-suggest"></ul>
<p class="sr-only" id="hdr-suggest-status" role="status" aria-live="polite"></p>
</form>
<a class="login-mock" href="/login">Sign in</a>
{/* ≤1024px: magnifier button reveals a full-width search row. name="header-panel"
pairs it with the menu as a native exclusive group — opening one closes
the other, no JS (exclusive-accordion behavior of <details name>). */}
{/* ≤1024px: the magnifier reveals a search row under the header (NN/g
mobile-search pattern). name="header-panel" pairs it with the menu as
a native exclusive group — opening one closes the other, no JS. */}
<details class="search-pop" name="header-panel">
<summary aria-label="Search">
<svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4.3-4.3" /></svg>
@@ -88,6 +89,7 @@ const links = [
<p class="sr-only" id="pop-suggest-status" role="status" aria-live="polite"></p>
</form>
</details>
<a class="login-mock" href="/login">Sign in</a>
{/* Mobile disclosure menu — native <details>/<summary>, no JS; desktop hides it via CSS */}
<details class="menu" name="header-panel">
<summary aria-label="Menu">
@@ -106,9 +108,8 @@ const links = [
</header>
<script is:inline src="/search-client.js"></script>
<script is:inline>
// Header search suggestions (desktop field + mobile reveal); the forms are
// plain GET /search, so everything below is progressive enhancement.
newsSearch({ input: 'hdr-q', list: 'hdr-suggest', status: 'hdr-suggest-status', limit: 6, unit: 'suggestion' });
// Header search suggestions (icon-reveal row); the form is a plain
// GET /search, so everything below is progressive enhancement.
newsSearch({ input: 'pop-q', list: 'pop-suggest', status: 'pop-suggest-status', limit: 6, unit: 'suggestion' });
var pop = document.querySelector('.search-pop');
pop.addEventListener('toggle', function () {