diff options
| -rw-r--r-- | README.md | 28 | ||||
| -rw-r--r-- | docs/THEMES.md | 81 | ||||
| -rw-r--r-- | internal/web/static/base.css | 9 | ||||
| -rw-r--r-- | internal/web/static/themes/advent.css | 3 | ||||
| -rw-r--r-- | internal/web/static/themes/benedictines.css | 1 | ||||
| -rw-r--r-- | internal/web/static/themes/desert_fathers.css | 3 | ||||
| -rw-r--r-- | internal/web/static/themes/dominicans.css | 1 | ||||
| -rw-r--r-- | internal/web/static/themes/easter.css | 1 | ||||
| -rw-r--r-- | internal/web/static/themes/epiphany.css | 1 | ||||
| -rw-r--r-- | internal/web/static/themes/franciscans.css | 3 | ||||
| -rw-r--r-- | internal/web/static/themes/lent.css | 1 | ||||
| -rw-r--r-- | internal/web/static/themes/marian.css | 3 | ||||
| -rw-r--r-- | internal/web/static/themes/memento_mori.css | 22 | ||||
| -rw-r--r-- | internal/web/static/themes/nativity.css | 1 | ||||
| -rw-r--r-- | internal/web/static/themes/ordinary.css | 3 | ||||
| -rw-r--r-- | internal/web/static/themes/pentecost.css | 1 | ||||
| -rw-r--r-- | internal/web/static/themes/transfiguration.css | 1 |
17 files changed, 102 insertions, 61 deletions
@@ -213,20 +213,24 @@ only; the file itself is never rewritten. ## Themes `lectio-web` ships 14 built-in, colour-only themes (they set colours — with -all fonts, spacing, borders and layout fixed in `base.css`). A theme may -additionally set `--theme-font` to change the reading face, and a monospace -reading face can be turned on for any theme (see `web_mono` and the "mono" -top-bar toggle below): +all spacing, borders and layout fixed in `base.css`). Each theme now also +sets a distinct typeface — serif variants (plain, old-style, classic or +Iowan), humanist sans, or plain sans — so themes are told apart by face as +well as palette, on top of which a monospace reading face can be turned on +for any theme (see `web_mono` and the "mono" top-bar toggle below): -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, -monospace), `dominicans` (black & white). +Religious orders: `transfiguration` (dark, gold/olive, serif — the +default), `desert_fathers` (light, sand/umber, Iowan serif), `benedictines` +(dark, black/gold, old-style serif), `franciscans` (dark, brown/terracotta, +humanist sans), `memento_mori` (dark, bare monospace — no role colours, just +plain text), `dominicans` (black & white, classic serif). -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). +Liturgical seasons and feasts: `advent` (dark violet, classic serif), +`nativity` (light white/gold, old-style serif), `lent` (dark ashen violet, +serif), `easter` (light radiant gold, Iowan serif), `pentecost` +(red/white/gold, humanist sans), `ordinary` (light green, sans), `epiphany` +(dark indigo/gold, serif), `marian` (light blue/white/gold, old-style +serif). 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 b170047..f9ebf07 100644 --- a/docs/THEMES.md +++ b/docs/THEMES.md @@ -23,10 +23,14 @@ single exception below. 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. +so leaving it unset keeps the default serif. base.css also declares a named +font-family palette in `:root` — `--font-serif`, `--font-serif-old`, +`--font-serif-classic`, `--font-serif-iowan`, `--font-sans`, +`--font-sans-humanist` (plus the pre-existing `--font-mono`) — all system-font +stacks, no webfonts. Every built-in theme sets `--theme-font` to one of +these, so each has its own distinct reading face (see the table below); +`memento_mori` sets it to `--font-mono`. Set this one variable if you want a +different reading face — never a bare `font-family` on an element. **Monospace for any theme.** Independently of the theme, `lectio-web` can force the reading face to monospace: set `web_mono = true` in your config, or flip the @@ -102,39 +106,48 @@ a:hover, a:focus { color: var(--accent); } Religious orders: -- **transfiguration** (dark) — bg `#262e28`, fg `#e6dec6`, accent `#d3b380` - (gold), muted `#99a18c`, link/refrain `#97ad6e` (olive), border `#4a5347`. - Verse numbers use the gold accent rather than muted, matching the source - transfiguration theme. -- **desert_fathers** (light) — sand `#ede4d3` / umber `#4a3f2f`, accent - ochre `#b8894a`. -- **benedictines** (dark) — black habit `#17130f` / parchment `#e8dcc0`, - accent gold `#c9a227`. -- **franciscans** (dark, warm) — undyed brown `#31271f` / `#e0d5c3`, accent - tau/terracotta `#a8703a`, link/refrain olive. -- **memento_mori** (dark, greyscale) — ash `#1a1a1a` / bone `#d8d4cc`; - `#7a4a42` (dried blood) is reserved for the `.error` role only. -- **dominicans** (black & white) — white habit `#f6f5f3` / black cappa - `#1c1c1c`; greyscale only, no accent colour. +- **transfiguration** (dark, serif `--font-serif`) — bg `#262e28`, fg + `#e6dec6`, accent `#d3b380` (gold), muted `#99a18c`, link/refrain `#97ad6e` + (olive), border `#4a5347`. Verse numbers use the gold accent rather than + muted, matching the source transfiguration theme. +- **desert_fathers** (light, Iowan serif `--font-serif-iowan`) — sand + `#ede4d3` / umber `#4a3f2f`, accent ochre `#bd7a24`. +- **benedictines** (dark, old-style serif `--font-serif-old`) — black habit + `#17130f` / parchment `#e8dcc0`, accent gold `#c9a227`. +- **franciscans** (dark, warm, humanist sans `--font-sans-humanist`) — + undyed brown `#31271f` / `#e0d5c3`, accent tau/terracotta `#b56626`, + link/refrain olive. +- **memento_mori** (dark, bare monospace `--font-mono`, no role colours) — + ash `#121212` / bone-grey `#c9c9c9`; every reading role (muted, accent, + link, refrain) resolves to the same plain foreground — headings and + verse numbers are distinguished only by base.css's bold/size, not colour. + `#7a4a42` (dried blood) is reserved for the `.error` role, the theme's + only non-bare colour. +- **dominicans** (black & white, classic serif `--font-serif-classic`) — + white habit `#f6f5f3` / black cappa `#1c1c1c`; greyscale only, no accent + colour. Liturgical seasons and feasts: -- **advent** (dark violet) — `#241b33` / `#e6e0ef`, accent violet - `#8a6db0`, refrain rose `#b0708a`. -- **nativity** (light, white/gold) — `#faf6ec` / `#3a3226`, accent gold - `#c9a227`, refrain evergreen `#4a7a5a`. -- **lent** (dark, ashen violet) — `#2a2530` / `#cfc8d2`, accent muted - violet `#7a6a86`, refrain dried rose `#8a6a72`. -- **easter** (light, radiant white/gold) — `#fdfbf4` / `#33302a`, accent - bright gold `#d4af37`. -- **pentecost** (red/white/gold) — scarlet `#4d1418` / cream `#f5ecdb`, - 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`. +- **advent** (dark violet, classic serif `--font-serif-classic`) — + `#241b33` / `#e6e0ef`, accent violet `#9a63d6`, refrain rose `#b0708a`. +- **nativity** (light, white/gold, old-style serif `--font-serif-old`) — + `#faf6ec` / `#3a3226`, accent gold `#c9a227`, refrain evergreen `#4a7a5a`. +- **lent** (dark, ashen violet, serif `--font-serif`) — `#2a2530` / + `#cfc8d2`, accent muted violet `#7a6a86`, refrain dried rose `#8a6a72`. +- **easter** (light, radiant white/gold, Iowan serif `--font-serif-iowan`) — + `#fdfbf4` / `#33302a`, accent bright gold `#d4af37`. +- **pentecost** (red/white/gold, humanist sans `--font-sans-humanist`) — + scarlet `#4d1418` / cream `#f5ecdb`, accent gold `#e2b74a`, refrain soft + gold `#e0c074`. +- **ordinary** (light green, sans `--font-sans`) — `#eef2e6` / `#33382e`, + accent green `#4f8a2a`. +- **epiphany** (dark, indigo/gold, serif `--font-serif`) — indigo night + `#131a2e` / starlight `#e6e8f2`, accent star gold `#d9bf6a`, refrain gold + `#c9a94e`. +- **marian** (light, blue/white/gold, old-style serif `--font-serif-old`) — + white-blue `#f3f6fb` / navy `#23303f`, accent Marian blue `#255fbf`, + 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/static/base.css b/internal/web/static/base.css index e66610e..4e942d5 100644 --- a/internal/web/static/base.css +++ b/internal/web/static/base.css @@ -14,6 +14,15 @@ --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; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; + /* Named font-family palette: a theme selects a reading face by setting + * --theme-font to one of these (see docs/THEMES.md). System-font stacks + * only -- no webfonts (CSP). */ + --font-serif: Georgia, "Times New Roman", serif; + --font-serif-old: "Palatino Linotype", Palatino, "Book Antiqua", serif; + --font-serif-classic: "Times New Roman", "Liberation Serif", serif; + --font-serif-iowan: "Iowan Old Style", "Palatino Linotype", Georgia, serif; + --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + --font-sans-humanist: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; --measure: 42rem; --space-1: 0.5rem; --space-2: 1rem; diff --git a/internal/web/static/themes/advent.css b/internal/web/static/themes/advent.css index 0378d7c..df84fde 100644 --- a/internal/web/static/themes/advent.css +++ b/internal/web/static/themes/advent.css @@ -5,10 +5,11 @@ --bg: #241b33; --fg: #e6e0ef; --muted: #7a7088; - --accent: #8a6db0; /* violet */ + --accent: #9a63d6; /* violet */ --link: #9a86c0; --refrain: #b0708a; /* rose */ --border: #372c4a; + --theme-font: var(--font-serif-classic); } .heading { diff --git a/internal/web/static/themes/benedictines.css b/internal/web/static/themes/benedictines.css index 5c628b5..99a0132 100644 --- a/internal/web/static/themes/benedictines.css +++ b/internal/web/static/themes/benedictines.css @@ -9,6 +9,7 @@ --link: #b08d3a; --refrain: #a68b4a; --border: #2e261c; + --theme-font: var(--font-serif-old); } .heading { diff --git a/internal/web/static/themes/desert_fathers.css b/internal/web/static/themes/desert_fathers.css index 0fc9583..e66f835 100644 --- a/internal/web/static/themes/desert_fathers.css +++ b/internal/web/static/themes/desert_fathers.css @@ -5,10 +5,11 @@ --bg: #ede4d3; /* sand */ --fg: #4a3f2f; /* umber */ --muted: #8a7a5f; - --accent: #b8894a; /* ochre */ + --accent: #bd7a24; /* ochre */ --link: #7d6b47; --refrain: #9a7b3f; --border: #cbbfa6; + --theme-font: var(--font-serif-iowan); } .heading { diff --git a/internal/web/static/themes/dominicans.css b/internal/web/static/themes/dominicans.css index 28f82f6..9523912 100644 --- a/internal/web/static/themes/dominicans.css +++ b/internal/web/static/themes/dominicans.css @@ -9,6 +9,7 @@ --link: #383838; /* dark grey */ --refrain: #4d4d4a; /* grey */ --border: #dcdad4; + --theme-font: var(--font-serif-classic); } .heading { diff --git a/internal/web/static/themes/easter.css b/internal/web/static/themes/easter.css index 258a38c..0c7eac1 100644 --- a/internal/web/static/themes/easter.css +++ b/internal/web/static/themes/easter.css @@ -9,6 +9,7 @@ --link: #4a8a9a; --refrain: #c9a227; --border: #ece7d8; + --theme-font: var(--font-serif-iowan); } .heading { diff --git a/internal/web/static/themes/epiphany.css b/internal/web/static/themes/epiphany.css index 6f6a96e..97d1cc5 100644 --- a/internal/web/static/themes/epiphany.css +++ b/internal/web/static/themes/epiphany.css @@ -9,6 +9,7 @@ --link: #8fa2d8; /* cool starlight blue */ --refrain: #c9a94e; /* deeper gold */ --border: #262f4a; + --theme-font: var(--font-serif); } .heading { diff --git a/internal/web/static/themes/franciscans.css b/internal/web/static/themes/franciscans.css index 212204c..1154182 100644 --- a/internal/web/static/themes/franciscans.css +++ b/internal/web/static/themes/franciscans.css @@ -5,10 +5,11 @@ --bg: #31271f; /* undyed brown, dark */ --fg: #e0d5c3; --muted: #9c8b76; - --accent: #a8703a; /* tau/terracotta */ + --accent: #b56626; /* tau/terracotta */ --link: #7a8a5a; /* olive */ --refrain: #8a9b6a; /* olive */ --border: #4d3f33; + --theme-font: var(--font-sans-humanist); } .heading { diff --git a/internal/web/static/themes/lent.css b/internal/web/static/themes/lent.css index c4fb929..144dc22 100644 --- a/internal/web/static/themes/lent.css +++ b/internal/web/static/themes/lent.css @@ -9,6 +9,7 @@ --link: #86788f; --refrain: #8a6a72; /* dried rose */ --border: #3a3440; + --theme-font: var(--font-serif); } .heading { diff --git a/internal/web/static/themes/marian.css b/internal/web/static/themes/marian.css index 776b116..81d75a0 100644 --- a/internal/web/static/themes/marian.css +++ b/internal/web/static/themes/marian.css @@ -5,10 +5,11 @@ --bg: #f3f6fb; /* white robe, faint blue */ --fg: #23303f; /* navy ink */ --muted: #7f8ea3; /* dusty blue-grey */ - --accent: #2f5fa6; /* Marian blue */ + --accent: #255fbf; /* Marian blue */ --link: #3a6fb5; --refrain: #b08d3a; /* gold crown */ --border: #d3dced; + --theme-font: var(--font-serif-old); } .heading { diff --git a/internal/web/static/themes/memento_mori.css b/internal/web/static/themes/memento_mori.css index f6e5174..c7fd053 100644 --- a/internal/web/static/themes/memento_mori.css +++ b/internal/web/static/themes/memento_mori.css @@ -1,16 +1,18 @@ -/* memento_mori -- religious-order palette, dark greyscale. Colour only; - * see docs/THEMES.md. `#7a4a42` (dried blood) is reserved for the +/* memento_mori -- bare monospace, no role colours. Colour only; see + * docs/THEMES.md. Every reading role resolves to the same plain + * foreground -- no accent/muted/refrain distinction, just bare text on a + * neutral dark ground. `#7a4a42` (dried blood) is reserved for the * error/alert accent only -- it must not be used for any other role. */ :root { - --bg: #1a1a1a; /* ash */ - --fg: #d8d4cc; /* bone */ - --muted: #6b6862; - --accent: #c4bdb0; /* bone */ - --link: #9a968e; - --refrain: #8a8680; - --border: #333330; - --error: #7a4a42; /* dried blood -- error/alert accent only */ + --bg: #121212; /* austere near-black */ + --fg: #c9c9c9; /* plain bone-grey */ + --muted: #c9c9c9; /* = fg (verse numbers + citation render same as body) */ + --accent: #c9c9c9; /* = fg (headings distinguished only by base.css bold/size) */ + --link: #c9c9c9; /* = fg */ + --refrain: #c9c9c9; /* = fg */ + --border: #2a2a2a; + --error: #7a4a42; /* dried blood -- the only colour, error role only */ /* the one non-colour override: a monospace reading face (see base.css). */ --theme-font: var(--font-mono); } diff --git a/internal/web/static/themes/nativity.css b/internal/web/static/themes/nativity.css index a808f4f..a97fee4 100644 --- a/internal/web/static/themes/nativity.css +++ b/internal/web/static/themes/nativity.css @@ -9,6 +9,7 @@ --link: #b8894a; --refrain: #4a7a5a; /* evergreen */ --border: #e6dcc6; + --theme-font: var(--font-serif-old); } .heading { diff --git a/internal/web/static/themes/ordinary.css b/internal/web/static/themes/ordinary.css index 26025fc..1f645d0 100644 --- a/internal/web/static/themes/ordinary.css +++ b/internal/web/static/themes/ordinary.css @@ -5,10 +5,11 @@ --bg: #eef2e6; --fg: #33382e; --muted: #8a9080; - --accent: #5a7a3f; /* green */ + --accent: #4f8a2a; /* green */ --link: #6a8a5a; --refrain: #7a9a4f; --border: #d8e0cc; + --theme-font: var(--font-sans); } .heading { diff --git a/internal/web/static/themes/pentecost.css b/internal/web/static/themes/pentecost.css index 747d62e..411a605 100644 --- a/internal/web/static/themes/pentecost.css +++ b/internal/web/static/themes/pentecost.css @@ -9,6 +9,7 @@ --link: #eac86a; /* light gold */ --refrain: #e0c074; /* soft gold */ --border: #6e2328; /* crimson */ + --theme-font: var(--font-sans-humanist); } .heading { diff --git a/internal/web/static/themes/transfiguration.css b/internal/web/static/themes/transfiguration.css index bd9cc25..8fb85aa 100644 --- a/internal/web/static/themes/transfiguration.css +++ b/internal/web/static/themes/transfiguration.css @@ -10,6 +10,7 @@ --refrain: #97ad6e; /* olive, same as link for this theme */ --border: #4a5347; --vnum: #d3b380; /* gold, not muted, for this theme */ + --theme-font: var(--font-serif); } .heading { |