feat(plugin): theme-aquarelle + hero variant (Phase 2.4 partie 1/2)
Registry : ajoute 2 plugins : - theme-aquarelle (carnet naturaliste XIXᵉ, mutual exclusion avec theme-guyane) - image-gallery-aquarelle-seed (14 aquarelles → MinIO + Media carbets démo) Hooks : - theme-guyane et theme-aquarelle se désactivent mutuellement au toggle ON via disableOtherTheme() CSS (globals.css) : - body[data-theme=aquarelle] : background papier teinté #faf5e9 + texture grain papier inline SVG + radial gradients ocres/canopy délavés - Surcharges automatiques des borders zinc/gray vers sépia délavé Layout : - PT_Serif (au lieu de Cormorant) en theme aquarelle, plus dense et encrée - data-theme = aquarelle prioritaire sur guyane si les deux sont enabled (défensif — le hook garantit normalement la mutual exclusion) Hero : - 2 versions dans le composant : guyane (existant, SVG CarbetRiver) et aquarelle (image MinIO 01-hero-fleuve-maroni.jpg en fond, voile crème, texte sépia, CTAs carrés sans rounded, hairlines, ornement de planche) - Branchement via getActiveTheme() - aquarelleUrl() helper qui construit l'URL MinIO publique Partie 2/2 (PR ultérieure) : upload des 14 images dans MinIO + hook image-gallery-aquarelle-seed + variantes aquarelle des autres composants (CarbetCard, ExperiencesSection, HowItWorksSection, CESection, Footer).
This commit is contained in:
parent
bb2fee7659
commit
c69c355f90
6 changed files with 187 additions and 6 deletions
|
|
@ -47,8 +47,31 @@ body[data-theme="guyane"] {
|
|||
radial-gradient(ellipse at bottom, rgba(196, 100, 52, 0.04) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
/* === Theme Aquarelle (plugin theme-aquarelle) === */
|
||||
/* Direction artistique « carnet naturaliste XIXᵉ ». Mutuellement exclusif
|
||||
avec theme-guyane (le hook onEnable du plugin garantit qu'un seul est
|
||||
actif à la fois). */
|
||||
body[data-theme="aquarelle"] {
|
||||
--background: #faf5e9; /* papier crème teinté */
|
||||
--foreground: #2a2418; /* encre sépia foncée */
|
||||
font-family: var(--font-serif), Georgia, serif;
|
||||
/* Texture grain de papier subtile via SVG inline (~1.5 KB, pas de fetch). */
|
||||
background-image:
|
||||
radial-gradient(ellipse at 25% 15%, rgba(196, 100, 52, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 75% 85%, rgba(94, 94, 50, 0.05) 0%, transparent 50%),
|
||||
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='17'/%3E%3CfeColorMatrix values='0 0 0 0 0.65 0 0 0 0 0.55 0 0 0 0 0.40 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Surcharges visuelles aquarelle : hairlines sépia partout en remplacement
|
||||
des borders zinc/gray du theme-guyane. */
|
||||
body[data-theme="aquarelle"] [class*="border-zinc-"],
|
||||
body[data-theme="aquarelle"] [class*="border-gray-"] {
|
||||
border-color: rgba(140, 61, 24, 0.25);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="guyane"]) {
|
||||
:root:not([data-theme="guyane"]):not([data-theme="aquarelle"]) {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono, Cormorant_Garamond } from "next/font/google";
|
||||
import { Geist, Geist_Mono, Cormorant_Garamond, PT_Serif } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { PluginProvider } from "@/lib/plugins/client";
|
||||
import { getEnabledPluginKeys, syncPluginsFromRegistry } from "@/lib/plugins/server";
|
||||
|
|
@ -32,6 +32,15 @@ const cormorant = Cormorant_Garamond({
|
|||
display: "swap",
|
||||
});
|
||||
|
||||
// PT Serif : typographie display pour le theme Aquarelle (carnet naturaliste).
|
||||
// Plus dense, plus encrée, parfaite pour les planches d'illustration.
|
||||
const ptSerif = PT_Serif({
|
||||
variable: "--font-serif-aquarelle",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "700"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
|
|
@ -68,17 +77,26 @@ export default async function RootLayout({
|
|||
enabledKeys = [];
|
||||
}
|
||||
|
||||
const themeGuyane = enabledKeys.includes("theme-guyane");
|
||||
// Aquarelle > Guyane si les deux activés (mutual exclusion garantie par
|
||||
// le hook plugin, mais on est défensif au cas où).
|
||||
const themeAquarelle = enabledKeys.includes("theme-aquarelle");
|
||||
const themeGuyane = !themeAquarelle && enabledKeys.includes("theme-guyane");
|
||||
const dataTheme = themeAquarelle ? "aquarelle" : themeGuyane ? "guyane" : undefined;
|
||||
|
||||
// En thème aquarelle, on substitue la variable --font-serif par PT Serif
|
||||
// (au lieu de Cormorant) pour coller à l'esthétique carnet.
|
||||
const serifVariable = themeAquarelle ? ptSerif.variable : cormorant.variable;
|
||||
|
||||
const locale = await getLocale();
|
||||
const messages = await dict(locale);
|
||||
|
||||
return (
|
||||
<html
|
||||
lang={locale}
|
||||
className={`${geistSans.variable} ${geistMono.variable} ${cormorant.variable} h-full antialiased`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} ${serifVariable} h-full antialiased`}
|
||||
>
|
||||
<body
|
||||
data-theme={themeGuyane ? "guyane" : undefined}
|
||||
data-theme={dataTheme}
|
||||
className="min-h-full flex flex-col font-sans"
|
||||
>
|
||||
<PluginProvider enabledKeys={enabledKeys}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue