mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-09-25 09:53:08 +02:00
34 lines
1.7 KiB
Markdown
34 lines
1.7 KiB
Markdown
# CSS Architecture
|
|
|
|
## Source files (`app/public/assets/css/`)
|
|
|
|
- **`variables.css`** — all CSS custom properties (colors, spacing, sizing tokens)
|
|
- **`colors.css`** — colour tokens (referenced by `variables.css`)
|
|
- **`reset.css`** / **`modern-normalize.min.css`** — resets
|
|
- **`base.css`** — base element styles
|
|
- **`common.css`** — shared components (header/nav, search bar, accessibility, buttons)
|
|
- **`typography.css`** — type scale
|
|
- **`utilities.css`** — utility classes and spacing tokens
|
|
- **`style.css`** — main public entry point (via `@import` chain)
|
|
- Page-specific: **`public.css`** (home), **`tfe.css`**, **`repertoire.css`**, **`content-page.css`** (about/licences), **`system.css`** (admin system dashboard), **`file-access.css`**, **`admin.css`** (admin section)
|
|
- Form: **`form-base.css`** + **`form-admin.css`** (plus FilePond vendor CSS)
|
|
|
|
## Build / bundling
|
|
|
|
Source CSS is **bundled and minified** by `scripts/build-css.mjs` (lightningcss)
|
|
into `app/public/assets/dist/*.min.css`:
|
|
|
|
- `base.min.css` — resolves the `@import` chain in `style.css` into one file (eliminates ~17 sequential imports)
|
|
- `admin.min.css` — minified `admin.css`
|
|
- `form.min.css` — `form-base.css` + `form-admin.css` + FilePond vendor CSS
|
|
- plus individual `.min.css` for the page-specific files
|
|
|
|
Run with `just build-css` / `just dev-build`. Never commit hand-edits into
|
|
`dist/` — they are generated.
|
|
|
|
## Rules
|
|
|
|
- Colour values live in `variables.css`/`colors.css` as custom properties; avoid hardcoding hex/rgb in other files.
|
|
- Admin and public share the same token names — no separate admin theme.
|
|
- `modern-normalize.min.css` and FilePond vendor CSS are third-party (minified — do not edit).
|