Split CSS into base and theme, link them separately
- Move shared structural styles to frontend/src/assets/pagerite.css with conservative variables, and purple theme overrides to frontend/src/assets/themes/purple/theme.css. - Backend now links the base and theme stylesheets as separate files so they can be swapped or augmented. - Add blocking="render" to stylesheet links to avoid FOUC. - Drop redundant defer from module script tags. - Update related docs and comments.
This commit is contained in:
@@ -132,9 +132,11 @@ evolves.
|
||||
|
||||
## Styling
|
||||
|
||||
- A single shared `frontend/src/assets/style.css` covers the server-rendered
|
||||
pages and the Vue components. Vue may add per-component styles on top where
|
||||
needed.
|
||||
- The base stylesheet `frontend/src/assets/pagerite.css` provides the layout,
|
||||
typography and interaction rules with conservative CSS variables. A theme layer
|
||||
(`frontend/src/assets/themes/purple/theme.css` by default) overrides those
|
||||
variables and adds the visual styling. Vue may add per-component styles on top
|
||||
where needed.
|
||||
- Fonts, the shared stylesheet, pygments styles and the default banner SVG
|
||||
live under `frontend/src/assets/` and are emitted as hashed assets under
|
||||
`/_/assets/` (Fraunces for headings, Literata for body, Fira Code for code —
|
||||
|
||||
Reference in New Issue
Block a user