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

feat: design system — ambient motion, spacing/elevation/surface tokens, right-rail TOC, footer links, DESIGN.md

Browse Source
This commit is contained in:
ctao
2026-07-24 23:39:17 +02:00
parent ea4ebd2d70
commit 3b736af25e
10 changed files with 335 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Base.astro
+12 -9
View File
@@ -1,6 +1,7 @@
---
import '../styles/global.css';
const { title = 'CTAO Science Portal', description = 'CTAO Science Portal — demo' } = Astro.props;
// `ambient` opts a page into the whole-page drifting brand wash (home only — see DESIGN.md)
const { title = 'CTAO Science Portal', description = 'CTAO Science Portal — demo', ambient = false } = Astro.props;
const path = Astro.url.pathname;
const isActive = (href) => (href === '/' ? path === '/' : path.startsWith(href));
// Navigation = services from the Science Portal spec (REQUIREMENTS.md §2/§5).
@@ -25,7 +26,7 @@ const links = [
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>
<body class={ambient ? 'has-ambient' : undefined}>
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="container nav">
@@ -70,7 +71,7 @@ const links = [
</main>
<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). */}
Site settings has no target yet — placeholder link = <a> without href. */}
<div class="container">
<div class="foot-top">
<img src="/brand/AAFF_CTAO_Logo_RGB_Monochrome-negative.svg" alt="CTAO" />
@@ -78,17 +79,19 @@ const links = [
Cherenkov Telescope Array Observatory.</p>
</div>
<nav class="foot-links" aria-label="Footer">
<a>Disclaimer</a>
<a>Privacy</a>
<a>Contact</a>
<a href="/pages/disclaimer">Disclaimer</a>
<a href="/pages/privacy">Privacy</a>
<a href="/pages/contact">Contact</a>
<a>Site settings</a>
<a href="/search">Search</a>
</nav>
<div class="foot-note">
<span class="flash" aria-hidden="true"></span>
{/* The real brand flash — path taken from the official logo SVG (BRAND D.4).
Sole decorative accent in this view; static by design. */}
<svg class="flash" viewBox="85.3 15 15 15" aria-hidden="true"><path fill="currentColor" d="M94.7,23.8c1-1.4,3.3-2.1,5.2-2.7c-2,0.1-4.4,0.3-5.8-0.6c-1.4-1-2.1-3.3-2.7-5.2c0.1,2,0.3,4.4-0.6,5.8c-1,1.4-3.3,2.1-5.2,2.7c2-0.1,4.4-0.3,5.8,0.6c1.4,1,2.1,3.3,2.7,5.2C93.9,27.6,93.7,25.2,94.7,23.8z"/></svg>
<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>
imported from ctao.org; the Site settings link is a placeholder. Statically
generated from Markdown (git-based CMS).</span>
</div>
</div>
</footer>