mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
Scope: variables.css, search.css, todo/04-accessibility.md - variables.css: add @media (prefers-color-scheme: dark) block scoped to body:not(.admin-body); overrides all semantic tokens with dark equivalents: --bg-* (#111→#333 range), --text-* (#eee/aaa/777), --border-* (#333/#444), --accent-primary lightened to #b87fd4 (4.5:1 contrast on #111 background), --accent-secondary stays #9557b5, --accent-foreground flipped to #111111 for dark buttons, --accent-muted adjusted to rgba(184,127,212,0.15), status colours muted for dark (success #4db886, error #e05555, warning #d4a830); new --search-error-{bg,border,color} tokens added to :root (light: #fff0f0/#c00) and overridden in dark (#2a1515/#e05555) - search.css: replace three hardcoded hex values in .search-error rule with var(--search-error-bg/border/color) so dark mode applies cleanly - Admin pages are entirely unaffected: .admin-body body class is excluded from the dark-mode selector; system.css already has its own dark palette
CSS Architecture
File Structure
- variables.css - CSS custom properties (variables) for colors and theme values
- colors.css - Reference documentation of all color values used in the project
- common.css - Shared styles: reset, header/nav, search bar, accessibility utilities
- main.css - Home page styles
- admin.css - Admin section styles
- system.css - System page styles
- search.css - Search/Directory page styles
- apropos.css - About page styles
- tfe.css - Individual thesis page styles
- easymde.min.css - EasyMDE editor styles (minified, third-party)
- modern-normalize.min.css - Modern normalize reset (minified, third-party)
Imports
All CSS files automatically import variables.css to access CSS custom properties.
Variables
Shared Variables (public pages)
--purple,--purple-dark,--purple-light- Purple palette--black,--white- Base colors--grey-light- Light grey background--border-color- Border color--text-muted- Muted text color
Admin Variables
--admin-bg,--admin-bg-alt- Background colors--admin-border- Border color--admin-text,--admin-text-muted- Text colors--admin-purple- Accent color--admin-input-bg- Input background