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

feat: page composition per IA research — section order, tile icons, cross-page coherence

Browse Source
This commit is contained in:
ctao
2026-07-25 07:53:07 +02:00
parent 419e9a2dd1
commit d014445248
6 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+7 -12
View File
@@ -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 <details> under the title otherwise. */
.toc {