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/pages/dashboard.astro
+3 -1
View File
@@ -27,7 +27,8 @@ const tickets = [
</div>
</section>
<section class="container page">
<section class="band--moon">
<div class="container page">
<span class="badge-mock">Mock — sample data, no live services connected</span>
<div class="dash-grid">
<div class="panel">
@@ -68,5 +69,6 @@ const tickets = [
</ul>
</div>
</div>
</div>
</section>
</Base>
src/pages/index.astro
+22 -18
View File
@@ -17,9 +17,8 @@ const services = [
{ title: 'Documentation', desc: 'User guides and technical documentation.', badge: 'tbd' },
];
---
<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory">
<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory" ambient>
<section class="hero-band">
<span class="flash" aria-hidden="true"></span>
<div class="container hero">
<div class="eyebrow">Cherenkov Telescope Array Observatory</div>
<h1>CTAO Science Portal</h1>
@@ -41,24 +40,29 @@ const services = [
newsSearch({ input: 'home-q', list: 'home-suggest', status: 'home-suggest-status', limit: 6, unit: 'suggestion(s)' });
</script>
<section class="container page">
<div class="section-head"><h2>Services</h2></div>
<div class="grid">
{services.map((s) => (
<article class="card tile">
<h3>{s.href
? (s.ext
? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
: <a href={s.href}>{s.title}</a>)
: s.title}</h3>
<p class="desc">{s.desc}</p>
{s.badge === 'mock' && <span class="badge-mock">Mock</span>}
{s.badge === 'ext' && <span class="badge-ext">External — LUX team</span>}
{s.badge === 'tbd' && <span class="badge-ext">Planned (TBD)</span>}
</article>
))}
{/* Surface rhythm (DESIGN.md): services on Moon Gray, editorial news on white */}
<section class="band--moon">
<div class="container page">
<div class="section-head"><h2>Services</h2></div>
<div class="grid">
{services.map((s) => (
<article class="card tile">
<h3>{s.href
? (s.ext
? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
: <a href={s.href}>{s.title}</a>)
: s.title}</h3>
<p class="desc">{s.desc}</p>
{s.badge === 'mock' && <span class="badge-mock">Mock</span>}
{s.badge === 'ext' && <span class="badge-ext">External — LUX team</span>}
{s.badge === 'tbd' && <span class="badge-ext">Planned (TBD)</span>}
</article>
))}
</div>
</div>
</section>
<section class="container page">
<div class="section-head">
<h2>Latest news</h2>
<a class="more" href="/news">All news →</a>
src/pages/news/[slug].astro
+24 -10
View File
@@ -13,13 +13,30 @@ const toc = headings.filter((h) => h.depth === 2 || h.depth === 3);
const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
---
<Base title={`${post.data.title} — CTAO`} description={post.data.description}>
<article class="container article">
<a class="back" href="/news">← All news</a>
<h1>{post.data.title}</h1>
<div class="meta"><span class="cat">{post.data.category}</span><span>{post.data.author}</span>·<time datetime={post.data.date.toISOString().slice(0, 10)}>{fmt(post.data.date)}</time></div>
{post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" />}
{/* TOC pattern (MDN/Stripe/NN-g): sticky right rail ≥1200px, collapsed <details>
under the title below that. CSS shows exactly one of the two (DESIGN.md). */}
<div class="container article-layout">
<article class="article">
<a class="back" href="/news">← All news</a>
<h1>{post.data.title}</h1>
<div class="meta"><span class="cat">{post.data.category}</span><span>{post.data.author}</span>·<time datetime={post.data.date.toISOString().slice(0, 10)}>{fmt(post.data.date)}</time></div>
{toc.length >= 3 && (
<details class="toc toc--inline">
<summary>On this page</summary>
<ol>
{toc.map((h) => (
<li class={h.depth === 3 ? 'd3' : undefined}><a href={`#${h.slug}`}>{h.text}</a></li>
))}
</ol>
</details>
)}
{post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" />}
<div class="prose">
<Content />
</div>
</article>
{toc.length >= 3 && (
<nav class="toc" aria-label="On this page">
<nav class="toc toc--rail" aria-label="On this page">
<strong>On this page</strong>
<ol>
{toc.map((h) => (
@@ -28,8 +45,5 @@ const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).forma
</ol>
</nav>
)}
<div class="prose">
<Content />
</div>
</article>
</div>
</Base>
src/pages/news/index.astro
-1
View File
@@ -10,7 +10,6 @@ const iso = (d) => d.toISOString().slice(0, 10);
---
<Base title="CTAO Science Portal — News" description="News and announcements of the CTAO">
<section class="hero-band">
<span class="flash" aria-hidden="true"></span>
<div class="container hero">
<div class="eyebrow">Cherenkov Telescope Array Observatory</div>
<h1>News &amp; Announcements</h1>
src/pages/proposals.astro
+3 -1
View File
@@ -10,7 +10,8 @@ import Base from '../layouts/Base.astro';
</div>
</section>
<section class="container page">
<section class="band--moon">
<div class="container page">
<span class="badge-mock">Mock — no submission logic</span>
<span class="badge-ext">Target: Proposal Handling System (APC team) integrated into the portal</span>
<div class="panel panel--narrow">
@@ -45,5 +46,6 @@ import Base from '../layouts/Base.astro';
<button class="btn" type="button">Submit proposal</button>
<p class="notice">Demonstration mock — the form does not store any data.</p>
</div>
</div>
</section>
</Base>
src/pages/search.astro
+3 -1
View File
@@ -10,7 +10,8 @@ import Base from '../layouts/Base.astro';
</div>
</section>
<section class="container page">
<section class="band--moon">
<div class="container page">
<form class="search-form" role="search" action="/search" method="get">
<label class="sr-only" for="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>
@@ -20,6 +21,7 @@ import Base from '../layouts/Base.astro';
<p class="notice" id="search-status" role="status" aria-live="polite">Type to search the news archive.</p>
<ol class="search-results" id="search-results"></ol>
<noscript><p class="notice">Search requires JavaScript. Browse all news on the <a href="/news">news page</a>.</p></noscript>
</div>
</section>
</Base>
src/pages/support.astro
+12 -10
View File
@@ -17,16 +17,18 @@ const channels = [
</div>
</section>
<section class="container page">
<span class="badge-mock">Mock — support services not yet connected</span>
<div class="grid">
{channels.map((c) => (
<article class="card tile">
<h3>{c.title}</h3>
<p class="desc">{c.desc}</p>
<span class="badge-mock">Mock</span>
</article>
))}
<section class="band--moon">
<div class="container page">
<span class="badge-mock">Mock — support services not yet connected</span>
<div class="grid">
{channels.map((c) => (
<article class="card tile">
<h3>{c.title}</h3>
<p class="desc">{c.desc}</p>
<span class="badge-mock">Mock</span>
</article>
))}
</div>
</div>
</section>
</Base>