Files

ralksta 570cabc972 feat: restyle themes to be visually distinct

- Minimal: Swiss Brutalist — fullbleed hero, true B&W, zero-gap grid, Geist font
- Editorial: Cinematic Magazine — warm charcoal, Bodoni Moda serif, slow transitions
- Classic: Gilded Gallery — gold accents, Cinzel headings, passepartout, ornamental dividers

Updated config presets, per-theme color palettes, ~550 lines of scoped CSS overrides,
data-preset attribute on html element, responsive breakpoints, screenshots, and docs.

2026-02-15 17:17:25 +01:00

4.8 KiB

Raw Blame History

Theming

Control the visual identity of your gallery from content/gallery.yaml. Choose a built-in preset or customize individual properties — no CSS editing required.

Quick Start

Add a single line to your gallery.yaml:

theme: minimal

That's it. Your entire gallery switches to the minimal theme.

Built-in Presets

Preset	Style	Accent	Fonts	Hero	Frame	Grain
studio	Leica-inspired, editorial	🔴 `#e60012`	Playfair Display + DM Sans	Split	Passepartout	✓
minimal	Swiss brutalist, high contrast	⚫ `#000000`	Geist + IBM Plex Mono	Fullbleed	None	✗
editorial	Cinematic magazine, warm tones	🟤 `#8B2500`	Bodoni Moda + Newsreader	Split	Shadow	✗
classic	Gilded gallery, warm luxury	🟡 `#c49a3c`	Cinzel + Crimson Pro	Minimal	Passepartout	✗

Default is studio if no theme is specified.

What makes each theme unique

Studio (default) — Leica-inspired with a red nav dot, passepartout photo frames, film grain, and a split hero layout. Clean editorial feel with Playfair Display headings.

Minimal — Swiss Brutalist aesthetic inspired by Müller-Brockmann and Dieter Rams. Fullbleed hero image, true black/white palette, zero-gap photo grid with no hover effects, ultra-tiny navigation text. Every pixel earns its place.

Editorial — Cinematic magazine feel inspired by Aperture and Magnum Photos. Oversized Bodoni Moda serif titles, warm charcoal backgrounds, generous grid spacing, slow cinematic transitions with desaturation-on-idle photos, and pull-quote section labels.

Classic — Fine art gallery aesthetic with warm gold accents, Cinzel Roman capitals for headings, decorative ornamental dividers, warm passepartout frames, rounded corners, and an elegant gold header dot. Feels like a luxury exhibition catalog.

Custom Theme

Start from any preset and override individual properties:

theme:
  preset: studio # base preset to extend (default: studio)
  accent: '#2563eb' # brand/accent color (any hex)
  fonts:
    heading: 'Inter' # Google Fonts name for headings
    body: 'Inter' # body text
    caption: 'JetBrains Mono' # EXIF captions
  radius: 8 # border-radius in px (0 = sharp corners)
  photoFrame: none # "none" | "passepartout" | "shadow"
  grain: false # film grain overlay on photos
  headerDot: false # accent-colored dot in the nav bar
  heroStyle: split # "split" | "fullbleed" | "minimal"

All properties are optional — omitted values fall back to the preset defaults.

Properties Reference

`accent`

The brand color used for hover effects, navigation highlights, the header dot, and OG social preview images.

`fonts`

Google Fonts names. Fonts are loaded automatically — just use the name as it appears on fonts.google.com. Three font slots:

heading — album titles, hero title, section labels
body — navigation, descriptions, UI text
caption — EXIF metadata, photo captions

`radius`

Border radius in pixels applied to photo grid items and album cards:

0 — sharp, editorial corners
4-8 — subtle rounding
12+ — soft, modern feel

`photoFrame`

How photos are framed in the grid:

none — photos fill the grid cell directly
passepartout — museum-style mat border around each photo with print-style EXIF captions below
shadow — subtle drop shadow behind each photo

`grain`

When true, a subtle film grain texture overlays each photo in the grid. Adds an analog, filmic character.

`headerDot`

When true, shows a small accent-colored dot in the navigation bar (inspired by the Leica red dot).

`heroStyle`

Controls the homepage hero layout:

split — title/nav on the left, hero image on the right (used by Studio and Editorial)
fullbleed — hero image fills the entire viewport, title overlaid in the corner (used by Minimal)
minimal — centered title card with decorative ornament, hero image as a banner below (used by Classic)

Examples

Minimal portfolio

theme:
  preset: minimal
  accent: '#0066cc'
  fonts:
    heading: 'Outfit'
    body: 'Outfit'

Film photography blog

theme:
  preset: studio
  accent: '#d4a017'
  grain: true
  photoFrame: passepartout

Modern magazine

theme:
  preset: editorial
  radius: 12
  fonts:
    heading: 'Fraunces'
    body: 'Inter'
    caption: 'IBM Plex Mono'

Luxury gallery

theme:
  preset: classic
  accent: '#b8860b'
  fonts:
    heading: 'Playfair Display'
    body: 'Lora'

4.8 KiB Raw Blame History