Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: remove botanica theme completely

Browse Source
This commit is contained in:
ralksta
2026-03-08 17:53:47 +01:00
parent a3d8917c29
commit 8e3f984f96
9 changed files with 7 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -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
```
<table>
@@ -125,14 +125,6 @@ theme: studio # or: minimal, editorial, classic, noir, monograph, botanica
<td><img src="docs/screenshots/theme-noir-home.png" width="400" alt="Noir theme" /></td>
<td><img src="docs/screenshots/theme-monograph-home.png" width="400" alt="Monograph theme" /></td>
</tr>
<tr>
<td align="center"><strong>Botanica</strong><br><em>Organic, nature-inspired</em></td>
<td></td>
</tr>
<tr>
<td><img src="docs/screenshots/theme-botanica-home.png" width="400" alt="Botanica theme" /></td>
<td></td>
</tr>
</table>
→ **[Theming Guide](docs/theming.md)**

163
app/globals.css
View File

@@ -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;
}
}

31
app/tokens.css
View File

@@ -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,

4
components/DevToolbar.tsx
View File

@@ -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<string, { heading: string; body: string; caption: str
classic: { heading: 'Cinzel', body: 'Crimson Pro', caption: 'Crimson Pro' },
noir: { heading: 'Libre Baskerville', body: 'Source Sans 3', caption: 'Space Mono' },
monograph: { heading: 'Instrument Serif', body: 'Inter', caption: 'IBM Plex Mono' },
botanica: { heading: 'Cormorant Garamond', body: 'Nunito Sans', caption: 'Inconsolata' },
};
const PRESET_ACCENTS: Record<string, string> = {
@@ -42,7 +41,6 @@ const PRESET_ACCENTS: Record<string, string> = {
classic: '#c49a3c',
noir: '#ff6b35',
monograph: '#333333',
botanica: '#4a7c59',
};
function getAttr(attr: string): string {

2
content/settings.yaml.example
View File

@@ -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"

BIN
docs/screenshots/theme-botanica-grid.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
docs/screenshots/theme-botanica-home.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 MiB

21
docs/theming.md
View File

@@ -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.
<td><img src="screenshots/theme-noir-home.png" width="400" alt="Noir theme" /></td>
<td><img src="screenshots/theme-monograph-home.png" width="400" alt="Monograph theme" /></td>
</tr>
<tr>
<td align="center"><strong>Botanica</strong><br><em>Organic, nature-inspired</em></td>
<td></td>
</tr>
<tr>
<td><img src="screenshots/theme-botanica-home.png" width="400" alt="Botanica theme" /></td>
<td></td>
</tr>
</table>
### Grid View Examples
@@ -88,14 +79,6 @@ Default is `studio` if no theme is specified.
<td><img src="screenshots/theme-noir-grid.png" width="400" alt="Noir grid" /></td>
<td><img src="screenshots/theme-monograph-grid.png" width="400" alt="Monograph grid" /></td>
</tr>
<tr>
<td align="center"><strong>Botanica</strong></td>
<td></td>
</tr>
<tr>
<td><img src="screenshots/theme-botanica-grid.png" width="400" alt="Botanica grid" /></td>
<td></td>
</tr>
</table>
### 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

4
scripts/screenshots.ts
View File

@@ -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}`);
}