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

Refresh nautical themes and use solid notebook panels

Browse Source
This commit is contained in:
tim.mccarthy
2026-09-04 20:19:17 -07:00
parent 145f526634
commit 8b40864cc4
7 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.md
+2
View File
@@ -8,6 +8,8 @@
## Polish
- [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"
- [x] Event log button should be the same size and position when expanded and collapsed in all screens
- [x] Align the "Current Difficulty" and "Successes" boxes
frontend/src/assets/css/base.css
+7 -3
View File
@@ -6,9 +6,13 @@
}
body {
background:
radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%),
radial-gradient(circle at 50% 60%, var(--bg) 0%, var(--bg-deep) 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);
font-family: var(--font-body);
frontend/src/assets/css/components.css
+4 -4
View File
@@ -1,10 +1,10 @@
/* --- Panels --- */
.glass-panel {
background: color-mix(in srgb, var(--surface) 88%, transparent);
background: var(--panel-background);
border: 1px solid var(--edge);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: var(--shadow-soft);
box-shadow: var(--panel-highlight), var(--shadow-soft);
transition: var(--transition-smooth);
}
@@ -13,12 +13,12 @@
}
.card {
background: var(--surface);
background: var(--panel-background);
border: 1px solid var(--edge);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--shadow-soft);
box-shadow: var(--panel-highlight), var(--shadow-soft);
}
.card h3 {
frontend/src/assets/css/theme.css
+27 -9
View File
@@ -18,19 +18,19 @@
:root {
/* --- "Fair Winds" raw palette (light, default) ----------- */
--sky: #cde6f5; /* page background: midday sky */
--sky-deep: #9fc9e2; /* page edges: deeper blue toward the horizon */
--sky: #c9e4e5; /* page background: midday sky */
--sky-deep: #8dbcc4; /* page edges: deeper blue toward the horizon */
--sail: #f8f1dd; /* panel surface: weathered sailcloth */
--sail-bright: #fffaec; /* raised surface */
--map-ink: #33291a; /* primary text: sepia chart ink */
--map-faded: #7d6e54; /* muted text */
--map-faded: #6e604b; /* muted text */
--doubloon: #a8770f; /* primary accent: antique gold */
--doubloon: #8c6010; /* primary accent: antique gold */
--doubloon-bright: #c08a13;
--doubloon-dark: #7c560a;
--lagoon: #0c8d96; /* the Deep: tropical shallows */
--lagoon: #08747d; /* the Deep: tropical shallows */
--palm: #2f8f4e; /* Pi-Rats, success */
--x-red: #c92a35; /* danger: the X that marks the spot */
--cannonball: #2c3245; /* black suits: dark navy iron */
@@ -75,6 +75,19 @@
--edge-soft: color-mix(in srgb, var(--map-ink) 11%, transparent);
--edge-accent: color-mix(in srgb, var(--accent) 40%, transparent);
/* Static chart lines stay on the page; fine weave stays on surfaces.
Every panel retains an opaque base beneath its decorative layers. */
--chart-line: color-mix(in srgb, var(--deep) 9%, transparent);
--chart-glow: color-mix(in srgb, var(--sail-bright) 48%, transparent);
--weave: color-mix(in srgb, var(--text) 3%, transparent);
--panel-sheen: color-mix(in srgb, var(--accent) 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-background: var(--panel-texture), var(--surface);
--panel-highlight: inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent);
/* --- Type ------------------------------------------------ */
--font-display: 'Pirata One', 'Alegreya SC', serif;
--font-heading: 'Alegreya SC', serif;
@@ -94,10 +107,10 @@
:root[data-theme="dark"] {
/* --- "Lantern & Brine" raw palette ----------------------- */
--ink-deep: #0a0d13; /* darkest: page edges, sunken wells */
--ink: #131822; /* page background */
--hull: #1b212e; /* panel surface */
--hull-light: #262e3f; /* raised surface */
--ink-deep: #09131c; /* darkest: page edges, sunken wells */
--ink: #101f27; /* page background */
--hull: #1c2c32; /* panel surface */
--hull-light: #293c42; /* raised surface */
--parchment: #efe7d3; /* primary text */
--driftwood: #a89e8a; /* muted text */
@@ -147,6 +160,11 @@
--edge-soft: color-mix(in srgb, var(--parchment) 8%, transparent);
--edge-accent: color-mix(in srgb, var(--accent) 35%, transparent);
--chart-line: color-mix(in srgb, var(--deep) 6%, transparent);
--chart-glow: color-mix(in srgb, var(--brass) 12%, transparent);
--weave: color-mix(in srgb, var(--text) 2%, transparent);
--panel-sheen: color-mix(in srgb, var(--accent) 9%, transparent);
/* --- Shadows --------------------------------------------- */
--shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35);
--shadow-deep: 0 10px 30px rgba(0, 0, 0, 0.5);
frontend/src/components/EventLog.svelte
+2 -4
View File
@@ -259,7 +259,7 @@
bottom: 20px;
right: 20px;
width: 380px;
background: color-mix(in srgb, var(--bg-deep) 95%, transparent);
background: var(--panel-background);
border: 1px solid var(--edge);
border-radius: var(--radius-md);
box-shadow: var(--shadow-deep);
@@ -267,7 +267,6 @@
display: flex;
flex-direction: column;
max-height: 60vh;
backdrop-filter: blur(10px);
}
.floating-event-log:not(.open) {
width: auto;
@@ -464,12 +463,11 @@
gap: 8px;
text-align: left;
padding: 10px 12px;
background: color-mix(in srgb, var(--bg-deep) 95%, transparent);
background: var(--panel-background);
border: 1px solid var(--edge);
border-left: 4px solid var(--accent);
border-radius: var(--radius-md);
box-shadow: var(--shadow-deep);
backdrop-filter: blur(10px);
color: var(--text);
font-family: var(--font-body);
cursor: pointer;
frontend/src/components/GameNotebook.svelte
+4 -4
View File
@@ -117,7 +117,7 @@
<style>
.closed { display: none; }
.notebook-panel { position: sticky; top: 3.5rem; background: var(--bg-deep); border: 1px solid var(--edge); border-radius: var(--radius-md); box-shadow: var(--shadow-deep); overflow: hidden; }
.notebook-panel { position: sticky; top: 3.5rem; background: var(--panel-background); border: 1px solid var(--edge); border-radius: var(--radius-md); box-shadow: var(--shadow-deep); overflow: hidden; }
.panel-header, .panel-tabs { display: flex; align-items: stretch; }
.panel-header { border-bottom: 1px solid var(--edge-soft); }
.panel-tabs { flex: 1; }
@@ -125,7 +125,7 @@
.panel-tabs button, .close-panel { background: transparent; border: 0; padding: 12px 10px; }
.panel-tabs button { flex: 1; border-bottom: 2px solid transparent; }
.panel-tabs button[aria-selected=true] { color: var(--accent); border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
button:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep)); }
button:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.notes-content { padding: 12px; }
.notes-content[hidden] { display: none; }
.notes-hint { margin: 0 0 10px; color: var(--text-muted); font-size: .85rem; }
@@ -135,8 +135,8 @@
.save-status button { border: 1px solid var(--edge); border-radius: 4px; background: var(--surface-raised); }
.save-error, .control-error { color: var(--danger); }
.notebook-controls { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; gap: 8px; }
.notebook-controls > button { width: 132px; height: 44px; background: var(--bg-deep); border: 1px solid var(--edge); border-radius: var(--radius-md); box-shadow: var(--shadow-deep); }
.control-error { position: absolute; bottom: 52px; right: 0; width: max-content; max-width: 90vw; background: var(--bg-deep); padding: 8px; border: 1px solid var(--danger); border-radius: var(--radius-sm); font-size: .85rem; }
.notebook-controls > button { width: 132px; height: 44px; background: var(--panel-background); border: 1px solid var(--edge); border-radius: var(--radius-md); box-shadow: var(--shadow-deep); }
.control-error { position: absolute; bottom: 52px; right: 0; width: max-content; max-width: 90vw; background: var(--panel-background); padding: 8px; border: 1px solid var(--danger); border-radius: var(--radius-sm); font-size: .85rem; }
.control-error button { color: var(--text); background: transparent; border: 0; text-decoration: underline; }
.notebook-panel :global(.floating-event-log.inline) { position: static; border: none; border-radius: 0; box-shadow: none; max-height: calc(100dvh - 12rem); }
@media (max-width: 1100px) {
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 = 48;
export const VERSION = 49;
// Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
export const CHANGELOG = [
{ 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.'] },
{ version: 46, date: '2026-09-04', changes: ['Added a printable TL;DR rules page, linked at the top of the full rulebook.'] },