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

feat: round 2 — responsive header (width-math tiers), brand footer, editorial article, modern search; 2026 upgrades (view transitions, text-wrap, self-hosted fonts, inline SVG icons, color-mix, subgrid, container queries)

Browse Source
This commit is contained in:
ctao
2026-07-24 23:14:09 +02:00
parent a8c0e802e2
commit ea4ebd2d70
7 changed files with 153 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Base.astro
+31 -18
View File
@@ -21,11 +21,9 @@ const links = [
<title>{title}</title>
<meta name="description" content={description} />
<link rel="icon" href="/brand/CTAO_Logo_positive.svg" type="image/svg+xml" />
{/* Brand typography (BRAND D.3): Inter (body) + Space Grotesk (headlines).
Google Fonts for the demo; self-host woff2 for production. */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Space+Grotesk:wght@500..700&display=swap" rel="stylesheet" />
{/* Brand typography (BRAND D.3): Inter (body) + Space Grotesk (headlines),
self-hosted latin woff2 (variable) — @font-face lives in global.css. */}
<link rel="preload" href="/fonts/space-grotesk-latin.woff2" as="font" type="font/woff2" crossorigin />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
@@ -44,11 +42,17 @@ const links = [
</nav>
<span class="spacer"></span>
<a class="navlink" href="/search">Search</a>
<a class="navlink navlink--edit" href="/admin" title="Content editor (demo CMS)">✎ Editor</a>
<a class="navlink navlink--edit" href="/admin" title="Content editor (demo CMS)">
<svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><path d="M17 3l4 4L8 20l-5 1 1-5L17 3z" /></svg>
Editor
</a>
<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">
<summary><span class="menu-icon" aria-hidden="true"></span>Menu</summary>
<summary>
<svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><path class="i-menu" d="M3 6h18M3 12h18M3 18h18" /><path class="i-close" d="M5 5l14 14M19 5 5 19" /></svg>
Menu
</summary>
<nav aria-label="Main navigation">
{links.map((l) => l.ext ? (
<a class="external" href={l.href} target="_blank" rel="noopener">{l.label}</a>
@@ -56,7 +60,7 @@ const links = [
<a href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a>
))}
<a href="/search">Search</a>
<a href="/admin">✎ Editor</a>
<a href="/admin">Editor</a>
</nav>
</details>
</div>
@@ -67,16 +71,25 @@ const links = [
<footer class="footer">
{/* Bottom menu required by SPEC §3.3.1: disclaimers, privacy, contact, settings, search.
Placeholder links = <a> without href (valid HTML placeholder-link semantics). */}
<div class="container inner">
<span class="flash" aria-hidden="true"></span>
<a>Disclaimer</a>
<a>Privacy</a>
<a>Contact</a>
<a>Site settings</a>
<a href="/search">Search</a>
<span class="note">Science Portal Core demo (Cyfronet / SUSS-PORT team). Sample content
imported from ctao.org; footer links are placeholders. Statically generated from
Markdown (git-based CMS).</span>
<div class="container">
<div class="foot-top">
<img src="/brand/AAFF_CTAO_Logo_RGB_Monochrome-negative.svg" alt="CTAO" />
<p>Science Portal — news, observation proposals, data and user services of the
Cherenkov Telescope Array Observatory.</p>
</div>
<nav class="foot-links" aria-label="Footer">
<a>Disclaimer</a>
<a>Privacy</a>
<a>Contact</a>
<a>Site settings</a>
<a href="/search">Search</a>
</nav>
<div class="foot-note">
<span class="flash" aria-hidden="true"></span>
<span>Science Portal Core demo (Cyfronet / SUSS-PORT team). Sample content
imported from ctao.org; footer links are placeholders. Statically generated from
Markdown (git-based CMS).</span>
</div>
</div>
</footer>
</body>