fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): elegant wedding white/silver/gold redesign

Browse Source 
Reskin the whole app via design tokens in tailwind-theme.css (remapped
color ramps) plus a define-once component layer in lib/styles/components.css
(.btn, .card, .input, .chip, .badge, .sheet, …). Buttons are muted/outlined
gold rather than flat fills. Self-host Inter + Fraunces (woff2) under the
existing font-src 'self' CSP. Restyle the shared components and the account,
admin, host, join, recover and upload screens against the new tokens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-18 17:28:42 +02:00
parent 5546fb82e6
commit f243bfe89a
22 changed files with 696 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/app.html
View File

@@ -7,8 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="text-scale" content="scale" />
<!-- Light/dark theme-color so the browser chrome matches the active theme. -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#030712" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#faf9f7" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#100f0f" media="(prefers-color-scheme: dark)" />
<!-- Installable PWA keepsake: manifest + Apple home-screen metadata. -->
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
<link rel="icon" href="%sveltekit.assets%/icon.svg" type="image/svg+xml" />
@@ -61,31 +61,29 @@
align-items: center;
justify-content: center;
gap: 0.75rem;
background: #f9fafb;
background: #faf9f7;
}
html.dark #app-boot {
background: #030712;
background: #100f0f;
}
.app-boot__spinner {
width: 2rem;
height: 2rem;
border-radius: 9999px;
border: 2px solid #d1d5db;
border-top-color: #2563eb;
border: 2px solid #e5e4e1;
border-top-color: #8a6a2b;
animation: app-boot-spin 0.6s linear infinite;
}
html.dark .app-boot__spinner {
border-color: #374151;
border-top-color: #60a5fa;
border-color: #3b3a38;
border-top-color: #c6a24a;
}
.app-boot__label {
font-family:
system-ui,
-apple-system,
sans-serif;
font-size: 0.875rem;
font-weight: 500;
color: #9ca3af;
font-family: Georgia, 'Times New Roman', serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
color: #8a6a2b;
}
@keyframes app-boot-spin {
to {