feat(template): header background theming — opacity, position, dark inversion #171

Merged

jmiller merged 5 commits from feature/header-background-theming into dev

2026-07-18 20:13:07 +00:00

jmiller commented

2026-07-18 19:38:09 +00:00

Owner

Summary

Self-contained header background theming for MokoOnyx, cherry-picked onto dev cleanly (no cascade conflicts).

Header background theming

New CSS variables: --header-background-position, --header-background-opacity, --header-background-filter (plus previously-unconsumed --header-background-attachment/-position now wired up in template.css).
Background image moved onto a .container-header::before pseudo-element so --header-background-opacity fades only the artwork, not the logo/menu.
Light: header-background.svg, cover, position: bottom, #dfdfdf backdrop, 0.35 opacity.
Dark: same treatment, #1a1f2b backdrop, and filter: invert(1) to inverse the monochrome SVG (mirrors light, inverted).
Added header-background.svg branding asset.

Palette parity

All four theme files (light/dark × standard/custom) now declare an identical variable set; added missing --color-active to the light palette.

Cleanup

Removed unused codeception.yml (inherited Cassiopeia boilerplate, never used).
Removed stale source/.build-trigger.

Notes

sync_custom_vars.php needs no change: it is variable-agnostic and propagates the new vars to deployed custom palettes automatically.
Changelog updated under [Unreleased].

Split out of chore/cascade-main-to-dev (PR #170) to avoid its unrelated main→dev cascade conflicts.

## Summary Self-contained header background theming for MokoOnyx, cherry-picked onto `dev` cleanly (no cascade conflicts). ### Header background theming - New CSS variables: `--header-background-position`, `--header-background-opacity`, `--header-background-filter` (plus previously-unconsumed `--header-background-attachment`/`-position` now wired up in `template.css`). - Background image moved onto a `.container-header::before` pseudo-element so `--header-background-opacity` fades **only the artwork**, not the logo/menu. - **Light:** `header-background.svg`, `cover`, `position: bottom`, `#dfdfdf` backdrop, `0.35` opacity. - **Dark:** same treatment, `#1a1f2b` backdrop, and `filter: invert(1)` to inverse the monochrome SVG (mirrors light, inverted). - Added `header-background.svg` branding asset. ### Palette parity - All four theme files (light/dark × standard/custom) now declare an identical variable set; added missing `--color-active` to the light palette. ### Cleanup - Removed unused `codeception.yml` (inherited Cassiopeia boilerplate, never used). - Removed stale `source/.build-trigger`. ### Notes - `sync_custom_vars.php` needs no change: it is variable-agnostic and propagates the new vars to deployed custom palettes automatically. - Changelog updated under `[Unreleased]`. > Split out of `chore/cascade-main-to-dev` (PR #170) to avoid its unrelated main→dev cascade conflicts.

jmiller added 5 commits 2026-07-18 19:38:11 +00:00

feat(template): add header background opacity + position theming 7430dba7e2

- Add --header-background-position and --header-background-opacity CSS vars to light/dark standard + custom palettes
- Light: switch header image to header-background.svg, size cover, position center
- Move header background image onto .container-header::before pseudo-element so --header-background-opacity fades only the image, not header content
- Wire up previously-unconsumed --header-background-attachment/-position in template.css
- Add header-background.svg branding asset
- Remove stale source/.build-trigger

(cherry picked from commit 7ebc5f6246)

chore: remove unused codeception.yml 396d5ea1ea

Inherited Cassiopeia boilerplate — never used. No tests/ dir, no Composer dep, never run in CI.

(cherry picked from commit 61489a0942)

style(template): soften light header background (#dfdfdf, position bottom, opacity 0.35) e78f843709

(cherry picked from commit 9752275387)

feat(template): dark header inversion + palette parity

Universal: Auto Version Bump / Version Bump (push) Successful in 17s

Details

2b84b78d55

- Add --header-background-filter var; dark inverts monochrome SVG (invert(1))
- Move dark header to header-background.svg, mirror light (cover/bottom/0.35)
- Mirror final light values into light.custom.css starter
- Add --color-active to light palette for full theme-file variable parity
- Changelog entries under [Unreleased]

(cherry picked from commit 15370993f6)