diff options
| -rw-r--r-- | README.md | 18 | ||||
| -rw-r--r-- | docs/THEMES.md | 23 | ||||
| -rw-r--r-- | internal/web/render_test.go | 4 | ||||
| -rw-r--r-- | internal/web/static/base.css | 4 | ||||
| -rw-r--r-- | internal/web/static/themes/dominicans.css | 49 | ||||
| -rw-r--r-- | internal/web/static/themes/epiphany.css | 49 | ||||
| -rw-r--r-- | internal/web/static/themes/marian.css | 49 | ||||
| -rw-r--r-- | internal/web/static/themes/memento_mori.css | 2 |
8 files changed, 184 insertions, 14 deletions
@@ -214,18 +214,20 @@ only; the file itself is never rewritten. ## Themes -`lectio-web` ships 12 built-in, colour-only themes (they set colours -only — no fonts, spacing, borders, or layout, which all live in the fixed -`base.css`): +`lectio-web` ships 15 built-in, colour-only themes (they set colours — and, +at most, one optional reading font via `--theme-font` — with all spacing, +borders and layout fixed in `base.css`): Religious orders: `transfiguration` (dark, gold/olive — the default), `desert_fathers` (light, sand/umber), `benedictines` (dark, black/gold), -`franciscans` (dark, brown/terracotta), `memento_mori` (dark, greyscale), -`deus_vult` (light, silver/white/red). +`franciscans` (dark, brown/terracotta), `memento_mori` (dark, greyscale, +monospace), `deus_vult` (light, silver/white/red), `dominicans` (light, +black/white/gold). -Liturgical seasons: `advent` (dark violet), `nativity` (light white/gold), -`lent` (dark ashen violet), `easter` (light radiant gold), `pentecost` -(red/white/gold), `ordinary` (light green). +Liturgical seasons and feasts: `advent` (dark violet), `nativity` (light +white/gold), `lent` (dark ashen violet), `easter` (light radiant gold), +`pentecost` (red/white/gold), `ordinary` (light green), `epiphany` (dark +indigo/gold), `marian` (light blue/white/gold). Set the default with `web_theme` in config, or pick one live from the "motyw" dropdown in the browser UI. diff --git a/docs/THEMES.md b/docs/THEMES.md index ba7627a..3366715 100644 --- a/docs/THEMES.md +++ b/docs/THEMES.md @@ -11,11 +11,22 @@ A theme file may set **colours** (and colours alone) on the roles listed below. It must never: - set a background image, gradient, shadow, animation or transition, -- change fonts, font sizes, spacing, borders' width/style, or layout, +- change font sizes, spacing, borders' width/style, or layout, - add rounded corners or any other chrome base.css doesn't already have. If a rule in your theme isn't a `color`, `background`/`background-color`, -or `border-color` declaration, it doesn't belong in a theme file. +or `border-color` declaration, it doesn't belong in a theme file — with the +single exception below. + +### The one non-colour override: `--theme-font` + +A theme may set the custom property `--theme-font` to change the **reading +typeface** (and only the typeface — base.css still owns every size and +spacing). base.css reads it as `--font-reading: var(--theme-font, <serif>)`, +so leaving it unset keeps the default serif. The built-in `memento_mori` +sets it to a monospace stack; every other built-in leaves it alone. Set this +one variable if you want a different reading face — never a bare +`font-family` on an element. ## The role variables and classes @@ -100,8 +111,10 @@ Religious orders: - **deus_vult** (light, silver/white/red) — silver-white `#edeff2` / steel `#2a2f34`, accent Templar red `#b31b25`, muted/border silver, refrain deep red `#8f2028`. +- **dominicans** (light, black/white/gold) — white habit `#f5f4f1` / black + cappa `#18181b`, accent shield gold `#96771e`, refrain gold `#857529`. -Liturgical seasons: +Liturgical seasons and feasts: - **advent** (dark violet) — `#241b33` / `#e6e0ef`, accent violet `#8a6db0`, refrain rose `#b0708a`. @@ -115,6 +128,10 @@ Liturgical seasons: accent gold `#e2b74a`, refrain soft gold `#e0c074`. - **ordinary** (light green) — `#eef2e6` / `#33382e`, accent green `#5a7a3f`. +- **epiphany** (dark, indigo/gold) — indigo night `#131a2e` / starlight + `#e6e8f2`, accent star gold `#d9bf6a`, refrain gold `#c9a94e`. +- **marian** (light, blue/white/gold) — white-blue `#f3f6fb` / navy + `#23303f`, accent Marian blue `#2f5fa6`, refrain gold `#b08d3a`. The exact hex values live in `internal/web/static/themes/*.css` — this list is a quick reference, the CSS files are the source of truth. diff --git a/internal/web/render_test.go b/internal/web/render_test.go index 7d8df18..126cb84 100644 --- a/internal/web/render_test.go +++ b/internal/web/render_test.go @@ -21,8 +21,8 @@ func TestBuiltinThemes(t *testing.T) { t.Setenv("XDG_CONFIG_HOME", t.TempDir()) // no user themes for _, name := range []string{ "transfiguration", "desert_fathers", "benedictines", "franciscans", - "memento_mori", "deus_vult", "advent", "nativity", "lent", "easter", - "pentecost", "ordinary", + "memento_mori", "deus_vult", "dominicans", "advent", "nativity", "lent", + "easter", "pentecost", "ordinary", "epiphany", "marian", } { if b, err := themeCSS(name); err != nil || len(b) == 0 { t.Errorf("built-in theme %s not embedded: %v", name, err) diff --git a/internal/web/static/base.css b/internal/web/static/base.css index 220badd..776c934 100644 --- a/internal/web/static/base.css +++ b/internal/web/static/base.css @@ -9,7 +9,9 @@ */ :root { - --font-reading: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif; + /* Reading typeface. A theme may override just this by setting --theme-font + * (the ONE sanctioned type override; base.css still owns sizing/spacing). */ + --font-reading: var(--theme-font, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif); --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --measure: 42rem; --space-1: 0.5rem; diff --git a/internal/web/static/themes/dominicans.css b/internal/web/static/themes/dominicans.css new file mode 100644 index 0000000..5a3a19f --- /dev/null +++ b/internal/web/static/themes/dominicans.css @@ -0,0 +1,49 @@ +/* dominicans -- religious-order palette (Order of Preachers), light: white + * habit, black cappa, gilt shield. Colour only; see docs/THEMES.md. + */ +:root { + --bg: #f5f4f1; /* white habit */ + --fg: #18181b; /* black cappa */ + --muted: #74746f; /* ash grey */ + --accent: #96771e; /* shield gold */ + --link: #6f6a58; + --refrain: #857529; /* gold */ + --border: #dad8d0; +} + +.heading { + color: var(--accent); +} + +.citation { + color: var(--muted); +} + +.vnum { + color: var(--muted); +} + +.refrain { + color: var(--refrain); +} + +a { + color: var(--link); +} + +a:hover, +a:focus { + color: var(--accent); +} + +.controls, +.version-label, +.reading-section + .reading-section { + border-color: var(--border); +} + +.controls input, +.controls select, +.controls button { + border-color: var(--border); +} diff --git a/internal/web/static/themes/epiphany.css b/internal/web/static/themes/epiphany.css new file mode 100644 index 0000000..6f6a96e --- /dev/null +++ b/internal/web/static/themes/epiphany.css @@ -0,0 +1,49 @@ +/* epiphany -- liturgical season palette, dark: indigo night sky, the star + * of Bethlehem in gold. Colour only; see docs/THEMES.md. + */ +:root { + --bg: #131a2e; /* indigo night */ + --fg: #e6e8f2; /* starlight */ + --muted: #7c85a0; /* dusk blue-grey */ + --accent: #d9bf6a; /* star gold */ + --link: #8fa2d8; /* cool starlight blue */ + --refrain: #c9a94e; /* deeper gold */ + --border: #262f4a; +} + +.heading { + color: var(--accent); +} + +.citation { + color: var(--muted); +} + +.vnum { + color: var(--muted); +} + +.refrain { + color: var(--refrain); +} + +a { + color: var(--link); +} + +a:hover, +a:focus { + color: var(--accent); +} + +.controls, +.version-label, +.reading-section + .reading-section { + border-color: var(--border); +} + +.controls input, +.controls select, +.controls button { + border-color: var(--border); +} diff --git a/internal/web/static/themes/marian.css b/internal/web/static/themes/marian.css new file mode 100644 index 0000000..776b116 --- /dev/null +++ b/internal/web/static/themes/marian.css @@ -0,0 +1,49 @@ +/* marian -- devotional palette (Our Lady), light: white robe, Marian-blue + * mantle, gold crown of twelve stars. Colour only; see docs/THEMES.md. + */ +:root { + --bg: #f3f6fb; /* white robe, faint blue */ + --fg: #23303f; /* navy ink */ + --muted: #7f8ea3; /* dusty blue-grey */ + --accent: #2f5fa6; /* Marian blue */ + --link: #3a6fb5; + --refrain: #b08d3a; /* gold crown */ + --border: #d3dced; +} + +.heading { + color: var(--accent); +} + +.citation { + color: var(--muted); +} + +.vnum { + color: var(--muted); +} + +.refrain { + color: var(--refrain); +} + +a { + color: var(--link); +} + +a:hover, +a:focus { + color: var(--accent); +} + +.controls, +.version-label, +.reading-section + .reading-section { + border-color: var(--border); +} + +.controls input, +.controls select, +.controls button { + border-color: var(--border); +} diff --git a/internal/web/static/themes/memento_mori.css b/internal/web/static/themes/memento_mori.css index 518e035..d99911b 100644 --- a/internal/web/static/themes/memento_mori.css +++ b/internal/web/static/themes/memento_mori.css @@ -11,6 +11,8 @@ --refrain: #8a8680; --border: #333330; --error: #7a4a42; /* dried blood -- error/alert accent only */ + /* the one non-colour override: a monospace reading face (see base.css). */ + --theme-font: ui-monospace, "Cascadia Code", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; } .heading { |