33 lines
1.8 KiB
Markdown
33 lines
1.8 KiB
Markdown
# Design handoff
|
|
|
|
All styling lives in **`src/styles/global.css`** — design tokens in `:root`
|
|
(colors, type scale, spacing, radius, shadows, `--header-h`) + plain-CSS
|
|
components below them. No frameworks, no preprocessors, no runtime JS for
|
|
presentation. Pages are `.astro` templates (plain HTML).
|
|
|
|
## Brand (official: CTAO Brand Guidelines, April 2024 — PDF in the project docs)
|
|
|
|
- Colors: Galaxy Blue `#00004A`, Cherenkov Blue `#00E4D8`, Moon Gray
|
|
`#F5F5F5`, Cosmic Azure `#007AFF` (links/focus), Interstellar Indigo
|
|
`#00009C`. Cherenkov is an ACCENT (brand book rations it — currently:
|
|
primary CTA, hero subtitle, logo flash); it fails AA as text on white.
|
|
- Type: **Inter** for everything, **Space Grotesk** (weight 500) only for
|
|
communicative headlines (h1/h2). Sizes come from the `--fs-*` scale.
|
|
- Logo files in `public/brand/`; always "CTAO", min 100px wide, no effects.
|
|
|
|
## Practical notes (the non-obvious ones)
|
|
|
|
- **`public/admin/preview.css` mirrors the `.prose` styles** so the CMS
|
|
editor preview matches articles 1:1 — when you touch `.prose` or its
|
|
tokens, update the mirror (both files carry a KEEP IN SYNC comment).
|
|
- Fonts ship **inlined as data: URIs** in global.css (no font requests, no
|
|
swap flash). The woff2 files in `public/fonts/` look unused but feed the
|
|
CMS preview — keep them.
|
|
- All `animation`/`transition` rules sit in the single
|
|
`prefers-reduced-motion: no-preference` block at the end of global.css.
|
|
- Scroll-driven effects need `vite.build.cssMinify: 'esbuild'`
|
|
(astro.config.mjs) — the default minifier breaks `animation-timeline`.
|
|
- `--header-h` drives the sticky-header offsets (anchors, TOC rail, reading
|
|
progress); change the header height only through the token.
|
|
- Deterministic gate before pushing: `npm run check` (build + link check).
|