tim.mccarthy/pirats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply refreshed themes to both rules pages

Browse Source
This commit is contained in:
tim.mccarthy
2026-09-04 20:23:12 -07:00
parent 8b40864cc4
commit c4f5980fbb
4 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.md
+2
View File
@@ -8,6 +8,8 @@
## Polish
- [x] Apply the refreshed light and dark themes to the full rulebook and TL;DR rules.
- [x] Refresh both themes with legible texture and nautical flair, and give the Event Log / My Notes the regular panel surface.
- [x] Do a pass on condensing overly verbose UI elements. For example, "Current Difficulty" could be replaced by "Difficulty" and "The Obstacle List" could be replaced by "Obstacles"
frontend/src/lib/changelog.js
+2 -1
View File
@@ -6,10 +6,11 @@
// - Add a CHANGELOG entry only when a commit changes something players can
// see. Skip refactors, tests, and tooling. Keep wording player-facing.
export const VERSION = 49;
export const VERSION = 50;
// Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
export const CHANGELOG = [
{ version: 50, date: '2026-09-04', changes: ['The full rulebook and TL;DR rules now match the refreshed light and dark themes, with chart backgrounds and textured solid panels.'] },
{ version: 49, date: '2026-09-04', changes: ['Freshened both themes with nautical chart lines, woven panel textures, and richer sea-and-brass colors while keeping text clear.', 'The Event Log and My Notes now use the regular solid panel surface.'] },
{ version: 48, date: '2026-09-04', changes: ['Keep your own notes alongside the Event Log. Notes save automatically between sessions, including when you close the panel, and stay intact when the game rewinds or you create a new Pi-Rat.'] },
{ version: 47, date: '2026-09-04', changes: ['Rewrote character suggestions with scrappy pirate looks, distinctive smells, first words, and crew quirks that fit Yeld.'] },
src/pirats/rules-tldr.html
+37 -14
View File
@@ -14,39 +14,55 @@ document.documentElement.dataset.theme =
</script>
<style>
:root {
--bg-dark: #9fc9e2;
--bg-ocean: #cde6f5;
--gold: #a8770f;
--neon-cyan: #0c8d96;
--bg-dark: #8dbcc4;
--bg-ocean: #c9e4e5;
--gold: #8c6010;
--neon-cyan: #08747d;
--red-suit: #c92a35;
--black-suit: #2c3245;
--glass-bg: rgba(248, 241, 221, 0.92);
--glass-bg: #f8f1dd;
--glass-border: rgba(168, 119, 15, 0.35);
--text-primary: #33291a;
--text-muted: #7d6e54;
--text-muted: #6e604b;
--well-bg: rgba(51, 41, 26, 0.06);
--row-border: rgba(168, 119, 15, 0.2);
--solid-bg: rgba(255, 250, 236, 0.95);
--solid-bg: #fffaec;
--shadow-panel: 0 8px 32px rgba(36, 62, 87, 0.2);
/* Match the app's chart backdrop and opaque sailcloth panels. */
--bg: var(--bg-ocean);
--bg-deep: var(--bg-dark);
--chart-line: color-mix(in srgb, var(--neon-cyan) 9%, transparent);
--chart-glow: color-mix(in srgb, #fffaec 48%, transparent);
--weave: color-mix(in srgb, var(--text-primary) 3%, transparent);
--panel-sheen: color-mix(in srgb, var(--gold) 7%, transparent);
--panel-texture:
linear-gradient(135deg, var(--panel-sheen), transparent 48%),
repeating-linear-gradient(0deg, var(--weave) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, var(--weave) 0 1px, transparent 1px 5px);
--panel-highlight: inset 0 1px 0 color-mix(in srgb, var(--solid-bg) 70%, transparent);
--font-display: 'Pirata One', 'Alegreya SC', serif;
--font-heading: 'Alegreya SC', serif;
--font-body: 'Alegreya Sans', sans-serif;
}
:root[data-theme="dark"] {
--bg-dark: #0a0d13;
--bg-ocean: #131822;
--chart-line: color-mix(in srgb, var(--neon-cyan) 6%, transparent);
--chart-glow: color-mix(in srgb, var(--gold) 12%, transparent);
--weave: color-mix(in srgb, var(--text-primary) 2%, transparent);
--panel-sheen: color-mix(in srgb, var(--gold) 9%, transparent);
--bg-dark: #09131c;
--bg-ocean: #101f27;
--gold: #d9a23c;
--neon-cyan: #41c9bd;
--red-suit: #e8606e;
--black-suit: #dfe6ef;
--glass-bg: rgba(27, 33, 46, 0.85);
--glass-bg: #1c2c32;
--glass-border: rgba(217, 162, 60, 0.25);
--text-primary: #efe7d3;
--text-muted: #a89e8a;
--well-bg: rgba(10, 13, 19, 0.5);
--row-border: rgba(217, 162, 60, 0.12);
--solid-bg: rgba(10, 13, 19, 0.9);
--solid-bg: #293c42;
--shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.4);
}
@@ -55,7 +71,14 @@ document.documentElement.dataset.theme =
html { scroll-behavior: smooth; }
body {
background: radial-gradient(circle at 50% 50%, var(--bg-ocean) 0%, var(--bg-dark) 100%);
background-color: var(--bg-deep);
background-image:
radial-gradient(ellipse at 15% 0%, var(--chart-glow), transparent 55%),
repeating-linear-gradient(30deg, transparent 0 159px, var(--chart-line) 159px 160px),
repeating-linear-gradient(150deg, transparent 0 159px, var(--chart-line) 159px 160px),
repeating-radial-gradient(circle at 85% 15%, transparent 0 119px, var(--chart-line) 119px 120px, transparent 120px 240px),
radial-gradient(ellipse at 50% 20%, var(--bg), var(--bg-deep));
background-attachment: fixed;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
@@ -66,10 +89,10 @@ body {
a { color: var(--neon-cyan); }
.glass-panel {
background: var(--glass-bg);
background: var(--panel-texture), var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
box-shadow: var(--shadow-panel);
box-shadow: var(--panel-highlight), var(--shadow-panel);
}
src/pirats/rules.html
+37 -14
View File
@@ -18,39 +18,55 @@ document.documentElement.dataset.theme =
If you re-theme the app, update these values too. The theme is read from
the same localStorage key the SPA uses ("pirats-theme"). */
:root {
--bg-dark: #9fc9e2;
--bg-ocean: #cde6f5;
--gold: #a8770f;
--neon-cyan: #0c8d96;
--bg-dark: #8dbcc4;
--bg-ocean: #c9e4e5;
--gold: #8c6010;
--neon-cyan: #08747d;
--red-suit: #c92a35;
--black-suit: #2c3245;
--glass-bg: rgba(248, 241, 221, 0.92);
--glass-bg: #f8f1dd;
--glass-border: rgba(168, 119, 15, 0.35);
--text-primary: #33291a;
--text-muted: #7d6e54;
--text-muted: #6e604b;
--well-bg: rgba(51, 41, 26, 0.06);
--row-border: rgba(168, 119, 15, 0.2);
--solid-bg: rgba(255, 250, 236, 0.95);
--solid-bg: #fffaec;
--shadow-panel: 0 8px 32px rgba(36, 62, 87, 0.2);
/* Match the app's chart backdrop and opaque sailcloth panels. */
--bg: var(--bg-ocean);
--bg-deep: var(--bg-dark);
--chart-line: color-mix(in srgb, var(--neon-cyan) 9%, transparent);
--chart-glow: color-mix(in srgb, #fffaec 48%, transparent);
--weave: color-mix(in srgb, var(--text-primary) 3%, transparent);
--panel-sheen: color-mix(in srgb, var(--gold) 7%, transparent);
--panel-texture:
linear-gradient(135deg, var(--panel-sheen), transparent 48%),
repeating-linear-gradient(0deg, var(--weave) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, var(--weave) 0 1px, transparent 1px 5px);
--panel-highlight: inset 0 1px 0 color-mix(in srgb, var(--solid-bg) 70%, transparent);
--font-display: 'Pirata One', 'Alegreya SC', serif;
--font-heading: 'Alegreya SC', serif;
--font-body: 'Alegreya Sans', sans-serif;
}
:root[data-theme="dark"] {
--bg-dark: #0a0d13;
--bg-ocean: #131822;
--chart-line: color-mix(in srgb, var(--neon-cyan) 6%, transparent);
--chart-glow: color-mix(in srgb, var(--gold) 12%, transparent);
--weave: color-mix(in srgb, var(--text-primary) 2%, transparent);
--panel-sheen: color-mix(in srgb, var(--gold) 9%, transparent);
--bg-dark: #09131c;
--bg-ocean: #101f27;
--gold: #d9a23c;
--neon-cyan: #41c9bd;
--red-suit: #e8606e;
--black-suit: #dfe6ef;
--glass-bg: rgba(27, 33, 46, 0.85);
--glass-bg: #1c2c32;
--glass-border: rgba(217, 162, 60, 0.25);
--text-primary: #efe7d3;
--text-muted: #a89e8a;
--well-bg: rgba(10, 13, 19, 0.5);
--row-border: rgba(217, 162, 60, 0.12);
--solid-bg: rgba(10, 13, 19, 0.9);
--solid-bg: #293c42;
--shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.4);
}
@@ -59,7 +75,14 @@ document.documentElement.dataset.theme =
html { scroll-behavior: smooth; }
body {
background: radial-gradient(circle at 50% 50%, var(--bg-ocean) 0%, var(--bg-dark) 100%);
background-color: var(--bg-deep);
background-image:
radial-gradient(ellipse at 15% 0%, var(--chart-glow), transparent 55%),
repeating-linear-gradient(30deg, transparent 0 159px, var(--chart-line) 159px 160px),
repeating-linear-gradient(150deg, transparent 0 159px, var(--chart-line) 159px 160px),
repeating-radial-gradient(circle at 85% 15%, transparent 0 119px, var(--chart-line) 119px 120px, transparent 120px 240px),
radial-gradient(ellipse at 50% 20%, var(--bg), var(--bg-deep));
background-attachment: fixed;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
@@ -70,10 +93,10 @@ body {
a { color: var(--neon-cyan); }
.glass-panel {
background: var(--glass-bg);
background: var(--panel-texture), var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
box-shadow: var(--shadow-panel);
box-shadow: var(--panel-highlight), var(--shadow-panel);
}
.rules-page {