ctao
0772462742
Portal code only; editorial content lives in the ctao/content repo on the demo machine's Gitea and is overlaid at build time (see README.md and deploy/README.md). Live demo: https://astro.isl-dev.grid.cyfronet.pl
2.1 KiB
2.1 KiB
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--linkso they pass AA on white), Interstellar Indigo#00009C. Cherenkov is an ACCENT (the 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.xandREQUIREMENTS: 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.cssmirrors the.prosestyles so the CMS editor preview matches articles 1:1. When you touch.proseor 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, so keep them. - All
animation/transitionrules sit in the singleprefers-reduced-motion: no-preferenceblock at the end of global.css. - Scroll-driven effects need
vite.build.cssMinify: 'esbuild'(astro.config.mjs): the default minifier breaksanimation-timeline. --header-hdrives 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).