39 lines
2.1 KiB
Markdown
39 lines
2.1 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` (focus rings only; links use the
|
|
darkened `--link` so they pass AA on white), 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.
|
|
- Comments in the code cite `SPEC §…`, `BRAND D.x` and `REQUIREMENTS`: those
|
|
are the CTAO specification, the brand guidelines PDF and the team's
|
|
consolidated requirements, kept in the project's document folder at
|
|
Cyfronet, not in this repo.
|
|
- 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` (types + build + link
|
|
check, a few seconds).
|