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

Re-theme the app: token-based CSS and a full face lift

Browse Source 
CSS refactor: every color, font, radius, and shadow is now defined once
in theme.css; all other styles derive translucent variants with
color-mix(), so re-theming means editing one file. Removed the
duplicate core.css/style.css import chains, dead styles, and the
Bootstrap/Tailwind orphan classes that were silently unstyled
(the main reason the splash page looked broken).

New "Lantern & Brine" look: brass and parchment on a lantern-lit
ink-navy night, Pirata One wordmark with Alegreya SC/Sans body fonts
(self-hosted via fontsource — they were previously referenced but
never loaded), parchment-faced playing cards, and a rebuilt splash
page. Inline color styles in components were replaced with semantic
classes (prompt-box, notice-banner, status chips, etc.), the rulebook's
embedded palette was updated to match, and the leftover Vite favicon
and "frontend" page title were replaced.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Tim McCarthy
2026-06-12 06:50:00 -07:00
parent ba6bf35579
commit 0744893e7b
36 changed files with 1442 additions and 1185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/CornerMenu.svelte
View File

@@ -48,29 +48,29 @@
.menu-toggle {
padding: 6px 14px;
border-radius: 16px;
background: rgba(10, 15, 25, 0.9);
border: 1px solid var(--glass-border-focus);
color: var(--neon-cyan);
background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
border: 1px solid var(--edge-accent);
color: var(--accent);
font-size: 0.85rem;
font-weight: 700;
font-family: var(--font-heading);
cursor: pointer;
}
.menu-toggle:hover, .menu-toggle.open {
background: rgba(0, 242, 254, 0.1);
background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep));
}
.menu-dropdown {
margin-top: 6px;
display: flex;
flex-direction: column;
background: rgba(10, 15, 25, 0.95);
border: 1px solid var(--glass-border-focus);
border-radius: 12px;
background: color-mix(in srgb, var(--bg-deep) 96%, transparent);
border: 1px solid var(--edge-accent);
border-radius: var(--radius-md);
overflow: hidden;
}
.menu-dropdown a {
padding: 8px 16px;
color: var(--neon-cyan);
color: var(--accent);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
@@ -79,9 +79,9 @@
white-space: nowrap;
}
.menu-dropdown a:hover {
background: rgba(0, 242, 254, 0.1);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.menu-dropdown a + a {
border-top: 1px solid rgba(0, 242, 254, 0.15);
border-top: 1px solid var(--edge-soft);
}
</style>