mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-09-25 01:53:03 +02:00
36 lines
2.0 KiB
Markdown
36 lines
2.0 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`**, **`not-found.css`** (404), **`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` (+ FilePond vendor CSS, for the CSV import dialog)
|
|
- `form.min.css` — `form-base.css` + `form-admin.css` + FilePond vendor CSS
|
|
- `form-base.min.css` — `form-base.css` standalone (partage pages without FilePond)
|
|
- `partage-form.min.css` — `form-base.css` + FilePond vendor CSS (partage pages with FilePond)
|
|
- plus individual `.min.css` for the page-specific files (`public`, `tfe`, `repertoire`, `content-page`, `not-found`, `system`, `file-access`)
|
|
|
|
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).
|