diff --git a/DESIGN.md b/DESIGN.md index e55eeb8..db61cc0 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -190,12 +190,41 @@ snap is worse than a calm fixed width. | Badges | Quiet hairline pill, muted sentence-case text, Galaxy dot on mocks; "Mock — reason"; never removed | REQUIREMENTS §5, NN/g hierarchy | | Cards | Cover · title (clamp 3) · desc (clamp 2) · date · read time; no non-differentiating metadata | NN/g metadata | | Pagination | Newer/Older + windowed numbers, 44px targets, aria-current | NN/g pagination | -| Article | Back "← All news"; meta category · author · date · read time; italic muted captions; TOC at ≥3 headings; post-nav | editorial convention | +| Article | Back "← All news"; h1 → standfirst (description) → meta (category · author · date · read time) → cover → inline TOC → prose; italic muted captions; TOC at ≥3 headings; post-nav | Guardian/BBC anatomy | | Forms | Visible labels above fields; placeholders are examples only; buttons start with a verb | GOV.UK forms, NN/g | | Login | One line + button + one small-print line; no reassurance prose | auth brevity | | Footer | Identity line → Contact · Search · Disclaimer · Privacy · Site settings · Content editor → © line; no implementation talk in UI copy | NN/g footers | | Search results | Links lay out as flowing text (mark-safe); date chip; "Press Enter for all results" hint | — | +## Page composition (archetypes) + +Every page follows one of three archetypes; a new page picks one instead of +inventing a section order. + +| Archetype | Pages | Order | +|---|---|---| +| Portal landing | `/` | Hero (h1 + subtitle + CTA pair + one-line Latest teaser) → Services tiles (Moon) → Latest news 3-up + "All news" (white) | +| Section landing | `/news`, `/search`, `/proposals`, `/dashboard`, `/support` | Galaxy hero band carrying the h1 + one-line subtitle → single content band (Moon = utility, white = editorial listing) → footer | +| Document | `/news/`, `/pages/` | Back link → h1 → standfirst → meta → cover → inline TOC → prose (→ post-nav on articles); no hero band — the document IS the page | + +- Home is task-first (NN/g homepage principles: clear starting points for the + top 1–4 tasks — for scientists that's proposals/data/support, not reading + news). The hero teaser is the freshness signal (deep-links the newest + article); the 3-card section below is the browse layer — different + granularity, not redundant. +- Document order is press anatomy (Guardian/BBC/Reuters): headline → + standfirst → byline/meta → lead image → body. The inline TOC sits between + lead image and body (Wikipedia/GOV.UK contents position) so the editorial + head stays unbroken and the list is adjacent to what it indexes. +- Back affordances: articles "← All news", static pages "← Home" (footer- and + deep-link-reached documents must not be dead ends). Auth (`/login`) is the + sole exception to the archetypes: one focused card, no hero, no sections. +- Service tiles carry a stroke glyph (`.ico` family: currentColor, round caps, + aria-hidden; 26px Galaxy) ABOVE the label — never instead of it (NN/g icon + usability: icons are ambiguous alone; beside an always-visible label they + differentiate otherwise-uniform tiles and speed grid scanning). Glyphs are + wayfinding, not decoration — they don't count against the one-accent budget. + ## Do not - No new hues, tints, or grays — derive via `color-mix` from brand tokens only. diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 04a1d4f..a54ba4d 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -48,15 +48,6 @@ const links = [ - {/* Demo disclosure — GOV.UK phase-banner pattern: one slim, honest banner - instead of implementation talk scattered through the UI. Not sticky; - it scrolls away and the header sticks below it. */} -
-
- Demo - This is a demonstration of the CTAO Science Portal — content is sample data. -
-
diff --git a/src/pages/index.astro b/src/pages/index.astro index 2f64d22..4937b64 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -11,13 +11,23 @@ const iso = (d) => d.toISOString().slice(0, 10); // category/author are identical across all articles, so cards omit them (NN/g). const readMin = (p) => Math.max(1, Math.round((p.body ?? '').split(/\s+/).length / 220)); // Services per the Science Portal spec; unbuilt ones are labelled, never faked. +// Tile icons: hand-drawn stroke glyphs in the header-icon family (.ico — +// currentColor, round caps), aria-hidden. NN/g icon research: icons alone are +// ambiguous, but NEXT TO an always-visible label they differentiate otherwise +// uniform tiles and speed up grid scanning. const services = [ - { title: 'Proposals', href: '/proposals', desc: 'Submit observation proposals, including ToO / MWL requests.', badge: 'mock' }, - { title: 'Data Explorer', href: 'https://padc-ctao-data-explorer.obspm.fr/', ext: true, desc: 'Search and download CTAO science data products.', badge: 'ext' }, - { title: 'Dashboard', href: '/dashboard', desc: 'Your proposals, data products and support tickets in one place.', badge: 'mock' }, - { title: 'User Support', href: '/support', desc: 'Help desk, FAQ, user forum and mailing lists.', badge: 'mock' }, - { title: 'Software', desc: 'Science analysis tools and pipelines.', badge: 'tbd' }, - { title: 'Documentation', desc: 'User guides and technical documentation.', badge: 'tbd' }, + { title: 'Proposals', href: '/proposals', desc: 'Submit observation proposals, including ToO / MWL requests.', badge: 'mock', + icon: '' }, + { title: 'Data Explorer', href: 'https://padc-ctao-data-explorer.obspm.fr/', ext: true, desc: 'Search and download CTAO science data products.', badge: 'ext', + icon: '' }, + { title: 'Dashboard', href: '/dashboard', desc: 'Your proposals, data products and support tickets in one place.', badge: 'mock', + icon: '' }, + { title: 'User Support', href: '/support', desc: 'Help desk, FAQ, user forum and mailing lists.', badge: 'mock', + icon: '' }, + { title: 'Software', desc: 'Science analysis tools and pipelines.', badge: 'tbd', + icon: '' }, + { title: 'Documentation', desc: 'User guides and technical documentation.', badge: 'tbd', + icon: '' }, ]; --- @@ -39,13 +49,19 @@ const services = [
- {/* Surface rhythm (DESIGN.md): services on Moon Gray, editorial news on white */} + {/* Section order is task-first: Services directly under the hero, news after. + NN/g homepage principles — the homepage must give clear starting points + for the user's top tasks; for scientists that is proposals/data/support, + not reading news. Freshness is still signalled above the fold by the + one-line hero teaser, so the 3-card news section can sit below. + Surface rhythm (DESIGN.md): services on Moon Gray, editorial news on white. */}

Services

{services.map((s) => (
+

{s.href ? (s.ext ? {s.title} diff --git a/src/pages/news/[slug].astro b/src/pages/news/[slug].astro index 058ea6e..9651f55 100644 --- a/src/pages/news/[slug].astro +++ b/src/pages/news/[slug].astro @@ -26,9 +26,17 @@ const readMin = Math.max(1, Math.round((post.body ?? '').split(/\s+/).length / 2
← All news + {/* Editorial anatomy (Guardian/BBC/Reuters convention): headline → + standfirst → byline/meta → lead image → body. The standfirst is the + description made visible — cards already show it, the article should too. */}

{post.data.title}

+

{post.data.description}

{/* Meta order: category · author · date · reading time */}
{post.data.category}{post.data.author}··{readMin} min read
+ {post.data.cover && } + {/* TOC sits between lead image and body (Wikipedia/GOV.UK contents + position): the press head above stays unbroken, and the list is + adjacent to the content it indexes. */} {toc.length >= 3 && (
On this page @@ -39,7 +47,6 @@ const readMin = Math.max(1, Math.round((post.body ?? '').split(/\s+/).length / 2
)} - {post.data.cover && }
diff --git a/src/pages/pages/[slug].astro b/src/pages/pages/[slug].astro index c6674bf..6123694 100644 --- a/src/pages/pages/[slug].astro +++ b/src/pages/pages/[slug].astro @@ -12,6 +12,9 @@ const { Content } = await render(page); ---
+ {/* Static pages are footer-reached documents; same back affordance as + articles ("← All news") so deep links aren't dead ends. */} + ← Home

{page.data.title}

diff --git a/src/styles/global.css b/src/styles/global.css index 1091b17..fa56788 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -127,15 +127,6 @@ img { max-width: 100%; height: auto; display: block; } official logo, never a CSS approximation. Budget: one accent per view; static. */ .flash { width: 12px; height: 12px; color: var(--cherenkov); flex: none; } -/* Demo disclosure — GOV.UK phase-banner pattern: slim Moon bar above the - header (scrolls away; the header sticks below it). Galaxy-on-tint pairs - computed ≥16:1 (same pairing as .cat chips). */ -.phase-banner { background: var(--moon); border-bottom: 1px solid var(--border); font-size: 0.8rem; } -.phase-banner .container { display: flex; align-items: center; gap: 10px; padding-top: 6px; padding-bottom: 6px; } -.phase-tag { - flex: none; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; - color: var(--galaxy); background: var(--tint-cherenkov); border-radius: var(--radius-pill); padding: 2px 10px; -} /* Header — Galaxy Blue band, reverse (white) logo per BRAND B.1.2 */ .site-header { background: var(--galaxy); position: sticky; top: 0; z-index: 10; } @@ -404,8 +395,10 @@ a.page-step { color: var(--link); } span.page-step { color: var(--muted); } /* disabled end stop — non-interactive */ .page-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 44px; color: var(--muted); } -/* Service tiles — card tokens, text-first */ +/* Service tiles — card tokens; stroke glyph above an always-visible label + (NN/g: icons differentiate and speed scanning only when labelled) */ .tile { padding: var(--space-m); gap: 8px; } +.tile .ico { width: 26px; height: 26px; stroke-width: 1.75; stroke-linejoin: round; color: var(--galaxy); } .tile h3 { margin: 0; } .tile .badge-mock, .tile .badge-ext { margin: auto 0 0; align-self: flex-start; } @@ -422,8 +415,10 @@ span.page-step { color: var(--muted); } /* disabled end stop — non-interactive color: var(--muted); font-size: 0.9rem; margin-bottom: var(--space-l); } .article .cover { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--space-l); } -/* Lead paragraph — slightly larger and muted */ -.prose > p:first-of-type { font-size: 1.08rem; color: var(--muted); } +/* Standfirst — the description shown as the visible lead under the headline + (Guardian/BBC anatomy). Replaces the old first-prose-paragraph lead styling + so an article never shows two competing leads. */ +.article .standfirst { margin: 0 0 var(--space-s); font-size: 1.12rem; line-height: 1.55; color: var(--muted); } /* Article TOC (MDN/Stripe pattern, rendered only when ≥3 h2/h3): sticky right rail on wide screens, collapsed
under the title otherwise. */ .toc {