a9737ad8e7
- Add configurable theme system with 4 presets (studio, minimal, editorial, classic) - Theme controls fonts, colors, accent, photo frames, grain, and header dot - Resolve themes from gallery.yaml: string shorthand or full object override - Inject theme as CSS custom properties on <html> element - Dynamic Google Fonts loading based on theme config - OG image route reads accent/background from theme - Refactor Studio overrides into conditional CSS via data-attributes Documentation: - Add docs/gallery-config.md with comprehensive configuration reference - Add docs/theming.md with preset reference and custom theme guide - Slim README to link to detailed docs Fix CSS regression: - Fix passepartout frame overflow:visible breaking next/image fill rendering - Remove duplicate .photo-grid__item block that stripped overflow:hidden Testing: - Add e2e/photo-grid.spec.ts with 3 regression tests: - Grid items render with real dimensions - overflow:hidden CSS guard (catches the exact bug fixed) - Images load with real pixel data (not blurhash) Tooling: - Add scripts/screenshots.ts for automated theme screenshot generation - Handles dev server lifecycle, theme cycling, FadeIn + lazy image handling
87 lines
2.0 KiB
CSS
87 lines
2.0 KiB
CSS
/* Fonts are loaded dynamically via layout.tsx based on theme config */
|
|
|
|
/* ── Design Tokens (Fallback Defaults) ───────────── */
|
|
/* These are overridden at runtime by CSS vars injected from gallery.yaml theme config. */
|
|
:root {
|
|
--bg-primary: #1a1a1a;
|
|
--bg-secondary: #141414;
|
|
--bg-card: #1e1e1e;
|
|
--bg-card-hover: #242424;
|
|
--bg-overlay: rgba(0, 0, 0, 0.98);
|
|
|
|
--text-primary: #f5f5f0;
|
|
--text-secondary: #a0a09a;
|
|
--text-muted: #706f6a;
|
|
|
|
--border-subtle: #2a2a28;
|
|
--border-hover: #3a3a38;
|
|
|
|
--accent: #e60012;
|
|
--accent-dim: rgba(230, 0, 18, 0.12);
|
|
|
|
--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
|
--font-caption: 'EB Garamond', Georgia, serif;
|
|
|
|
--radius-sm: 0px;
|
|
--radius-md: 0px;
|
|
--radius-lg: 0px;
|
|
|
|
--transition-fast: 200ms ease;
|
|
--transition-normal: 400ms ease;
|
|
--transition-slow: 600ms ease;
|
|
|
|
--max-width: 1400px;
|
|
--header-height: 64px;
|
|
}
|
|
|
|
/* ── Light Theme (Studio Light) ──────────────────── */
|
|
[data-theme='light'] {
|
|
--bg-primary: #f5f5f0;
|
|
--bg-secondary: #eaeae5;
|
|
--bg-card: #ffffff;
|
|
--bg-card-hover: #f0f0eb;
|
|
--bg-overlay: rgba(245, 245, 240, 0.96);
|
|
|
|
--text-primary: #1a1a18;
|
|
--text-secondary: #5a5a55;
|
|
--text-muted: #8a8a85;
|
|
|
|
--border-subtle: #ddddd8;
|
|
--border-hover: #c5c5c0;
|
|
|
|
--accent: #c8000f;
|
|
--accent-dim: rgba(200, 0, 15, 0.08);
|
|
}
|
|
|
|
/* ── Reset ────────────────────────────────────────── */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
} |