diff --git a/README.md b/README.md index b9e2675..fc62a83 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ All gallery structure — hero images, albums, subpages, grid layout, footer — Seven built-in presets with distinct visual identities — or mix and match with fine-grained control over colors, fonts, corners, photo frames, hero layout, and grid style. ```yaml -theme: studio # or: minimal, editorial, classic, noir, monograph, botanica +theme: studio # or: minimal, editorial, classic, noir, monograph ``` @@ -125,14 +125,6 @@ theme: studio # or: minimal, editorial, classic, noir, monograph, botanica - - - - - - - -
Noir theme Monograph theme
Botanica
Organic, nature-inspired
Botanica theme
→ **[Theming Guide](docs/theming.md)** diff --git a/app/globals.css b/app/globals.css index 33c01fa..a0a8842 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2111,164 +2111,6 @@ text-transform: uppercase; } -/* ══════════════════════════════════════════════════════ - THEME: Botanica — Organic / Nature - ══════════════════════════════════════════════════════ */ - -/* Header: warm with green tint */ -[data-preset='botanica'] .header { - background: rgba(20, 26, 20, 0.9); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border-bottom: 1px solid rgba(74, 124, 89, 0.12); -} - -[data-preset='botanica'][data-theme='light'] .header { - background: rgba(250, 247, 240, 0.9); -} - -[data-preset='botanica'] .header__nav-link { - font-size: 0.7rem; - font-weight: 400; - letter-spacing: 0.12em; -} - -/* Hero: warm organic feel */ -[data-preset='botanica'] .hero__title { - font-size: 3.5rem; - font-weight: 400; - letter-spacing: 0.04em; - text-transform: none; - line-height: 1.15; -} - -[data-preset='botanica'] .hero__subtitle { - font-family: var(--font-caption); - font-size: 0.85rem; - font-weight: 400; - letter-spacing: 0.1em; - text-transform: none; - font-style: italic; - margin-bottom: 36px; - opacity: 0.7; -} - -[data-preset='botanica'] .hero__nav-link { - font-family: var(--font-sans); - font-size: 0.8rem; - font-weight: 400; - letter-spacing: 0.06em; - text-transform: none; - border-bottom: none; -} - -[data-preset='botanica'] .hero__nav-link:hover { - color: var(--accent); - border-bottom-color: transparent; -} - -/* Photo grid: soft organic hover */ -[data-preset='botanica'] .photo-grid { - column-gap: var(--grid-gap, 16px); -} - -[data-preset='botanica'] .photo-grid__item { - margin-bottom: var(--grid-gap, 16px); - border-radius: 8px; -} - -[data-preset='botanica'] .photo-grid__item:hover img { - filter: brightness(0.9) saturate(1.1); - transform: scale(1.01); -} - -/* Album cards: warm rounded with organic overlay */ -[data-preset='botanica'] .album-card { - border-radius: 12px; - border: 1px solid rgba(74, 124, 89, 0.1); -} - -[data-preset='botanica'][data-theme='light'] .album-card { - border-color: rgba(74, 124, 89, 0.15); -} - -[data-preset='botanica'] .album-card:hover { - border-color: var(--accent); - transform: translateY(-2px); -} - -[data-preset='botanica'] .album-card__title { - font-weight: 400; - letter-spacing: 0.04em; - text-transform: none; -} - -[data-preset='botanica'] .album-card__count { - font-family: var(--font-caption); - font-style: italic; - font-size: 0.8rem; -} - -/* Section labels: botanical ornament dividers */ -[data-preset='botanica'] .section-label { - font-family: var(--font-caption); - font-size: 0.75rem; - font-weight: 400; - font-style: italic; - letter-spacing: 0.1em; - text-transform: none; - color: var(--text-secondary); -} - -[data-preset='botanica'] .section-label::before { - content: '❧ '; - color: var(--accent); -} - -/* Album header */ -[data-preset='botanica'] .album-header__title { - font-weight: 400; - letter-spacing: 0.04em; - text-transform: none; - font-size: 2.4rem; -} - -[data-preset='botanica'] .album-header__meta { - font-family: var(--font-caption); - font-style: italic; -} - -/* Footer */ -[data-preset='botanica'] .footer { - border-top: 1px solid rgba(74, 124, 89, 0.12); -} - -[data-preset='botanica'] .footer__name { - font-family: var(--font-caption); - font-style: italic; - text-transform: none; - letter-spacing: 0.06em; - font-size: 0.8rem; -} - -/* Scroll-to-top */ -[data-preset='botanica'] .scroll-to-top { - border-radius: 12px; -} - -/* Subpage grid */ -[data-preset='botanica'] .subpage-grid__item { - border: 1px solid rgba(74, 124, 89, 0.1); - border-radius: 8px; - overflow: hidden; -} - -[data-preset='botanica'] .subpage-grid__item-title { - font-weight: 400; - letter-spacing: 0.04em; - text-transform: none; -} - @media (max-width: 1024px) { .photo-grid { --grid-columns: 2; @@ -2412,9 +2254,4 @@ [data-preset='monograph'] .album-header__title { font-size: 2rem; } - - /* Botanica: scale hero title */ - [data-preset='botanica'] .hero__title { - font-size: 2rem; - } } \ No newline at end of file diff --git a/app/tokens.css b/app/tokens.css index dcf43a8..29c7d99 100644 --- a/app/tokens.css +++ b/app/tokens.css @@ -209,37 +209,6 @@ --border-hover: #cccccc; } -/* ── Botanica: Organic / Nature Palette ──────────── */ -[data-preset='botanica'] { - --bg-primary: #141a14; - --bg-secondary: #0f140f; - --bg-card: #182018; - --bg-card-hover: #1e261e; - --bg-overlay: rgba(15, 20, 15, 0.98); - - --text-primary: #e8efe0; - --text-secondary: #8a9a78; - --text-muted: #5a6a4a; - - --border-subtle: #253025; - --border-hover: #354535; -} - -[data-preset='botanica'][data-theme='light'] { - --bg-primary: #faf7f0; - --bg-secondary: #f0ece2; - --bg-card: #ffffff; - --bg-card-hover: #f5f2ea; - --bg-overlay: rgba(250, 247, 240, 0.96); - - --text-primary: #1a2214; - --text-secondary: #4a5a3a; - --text-muted: #7a8a6a; - - --border-subtle: #dde5d0; - --border-hover: #c5d0b5; -} - /* ── Reset ────────────────────────────────────────── */ *, *::before, @@ -270,4 +239,4 @@ a { img { display: block; max-width: 100%; -} +} \ No newline at end of file diff --git a/components/DevToolbar.tsx b/components/DevToolbar.tsx index 92bd4dd..082eed8 100644 --- a/components/DevToolbar.tsx +++ b/components/DevToolbar.tsx @@ -16,7 +16,7 @@ import React, { useState, useEffect, useCallback, useLayoutEffect } from 'react'; -const PRESETS = ['studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph', 'botanica']; +const PRESETS = ['studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph']; const FRAMES = ['none', 'passepartout', 'shadow']; const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic']; const GRID_LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow']; @@ -32,7 +32,6 @@ const PRESET_FONTS: Record = { @@ -42,7 +41,6 @@ const PRESET_ACCENTS: Record = { classic: '#c49a3c', noir: '#ff6b35', monograph: '#333333', - botanica: '#4a7c59', }; function getAttr(attr: string): string { diff --git a/content/settings.yaml.example b/content/settings.yaml.example index 955f574..5505ed9 100644 --- a/content/settings.yaml.example +++ b/content/settings.yaml.example @@ -24,7 +24,7 @@ map: true transitions: true # ── Theme configuration ────────────────────────────────────────── -# Presets: studio, minimal, editorial, classic, noir, monograph, botanica +# Presets: studio, minimal, editorial, classic, noir, monograph theme: preset: "studio" # accent: "#e60012" diff --git a/docs/screenshots/theme-botanica-grid.png b/docs/screenshots/theme-botanica-grid.png deleted file mode 100644 index 239bb08..0000000 Binary files a/docs/screenshots/theme-botanica-grid.png and /dev/null differ diff --git a/docs/screenshots/theme-botanica-home.png b/docs/screenshots/theme-botanica-home.png deleted file mode 100644 index 885f732..0000000 Binary files a/docs/screenshots/theme-botanica-home.png and /dev/null differ diff --git a/docs/theming.md b/docs/theming.md index 3c40344..338f2ef 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -22,7 +22,6 @@ That's it. Your entire gallery switches to the minimal theme. | **classic** | Gilded gallery, warm luxury | 🟡 `#c49a3c` | Cinzel + Crimson Pro | Minimal | Passepartout | ✗ | | **noir** | Darkroom analog, film noir | 🟠 `#ff6b35` | Libre Baskerville + Source Sans 3 | Fullbleed | Passepartout | ✓ | | **monograph** | Typographic, book-like | ⬛ `#333333` | Instrument Serif + Inter | Typographic | None | ✗ | -| **botanica** | Organic, nature-inspired | 🟢 `#4a7c59` | Cormorant Garamond + Nunito Sans | Split | None | ✗ | Default is `studio` if no theme is specified. @@ -51,14 +50,6 @@ Default is `studio` if no theme is specified. Noir theme Monograph theme - - Botanica
Organic, nature-inspired - - - - Botanica theme - - ### Grid View Examples @@ -88,14 +79,6 @@ Default is `studio` if no theme is specified. Noir grid Monograph grid - - Botanica - - - - Botanica grid - - ### What makes each theme unique @@ -112,8 +95,6 @@ Default is `studio` if no theme is specified. **Monograph** — Type-first book design with no hero image. Features an 8rem serif title, numbered photo indices via CSS counters, slide-up EXIF captions, hairline dividers, and generous whitespace. Feels like an artist monograph. -**Botanica** — Organic, nature-inspired with forest green accents and warm linen backgrounds. Rounded corners, botanical ornament dividers (❧), italic captions, and gentle hover animations. Feels like a botanical field guide. - ## Custom Theme Start from any preset and override individual properties: @@ -177,7 +158,7 @@ When `true`, shows a small accent-colored dot in the navigation bar (inspired by Controls the homepage hero layout: -- **`split`** — title/nav on the left, hero image on the right (used by Studio, Editorial, Botanica) +- **`split`** — title/nav on the left, hero image on the right (used by Studio, Editorial) - **`fullbleed`** — hero image fills the entire viewport, title overlaid in the corner (used by Minimal, Noir) - **`minimal`** — centered title card with decorative ornament, hero image as a banner below (used by Classic) - **`stacked`** — full-viewport hero image with title gradient-overlaid at the bottom, horizontal thumbnail navigation strip below diff --git a/scripts/screenshots.ts b/scripts/screenshots.ts index 1cfaac4..4a0ee31 100644 --- a/scripts/screenshots.ts +++ b/scripts/screenshots.ts @@ -19,7 +19,7 @@ import { spawn, type ChildProcess } from 'child_process'; import fs from 'fs'; import path from 'path'; -const THEMES = ['studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph', 'botanica']; +const THEMES = ['studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph']; const BASE_URL = 'http://localhost:3000'; const GRID_PATH = '/deutschland/kloster-chorin'; // public subpage with photos const OUTPUT_DIR = path.join(process.cwd(), 'docs', 'screenshots'); @@ -174,7 +174,7 @@ function setThemeInSettingsYaml(yaml: string, theme: string): string { return yaml.replace(/^theme:\s*\w+\s*$/m, `theme: ${theme}`); } // Fallback: insert block after the theme comment - const marker = '# Presets: studio, minimal, editorial, classic, noir, monograph, botanica'; + const marker = '# Presets: studio, minimal, editorial, classic, noir, monograph'; if (yaml.includes(marker)) { return yaml.replace(marker, `${marker}\ntheme: ${theme}`); }