padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(theme): dark forest palette + Aboreto/Italianno/Roboto fonts

Browse source 
Retheme to match the Wix source: deep forest-green background
(hsl 151 100% 8%), cream foreground, gold primary/accent. Update
both :root and .dark variants for dark-by-default.

Load Aboreto (display), Italianno (calligraphic script for the hero
title) and Roboto 300/400/500/700 from Google Fonts with preconnect
hints. Define --font-sans / --font-display / --font-script tokens,
which Tailwind 4 exposes as font-sans / font-display / font-script
utilities.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-08 21:22:10 +02:00
commit 149b8e0a7c
2 changed files with 52 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -8,6 +8,12 @@
name="description" name="description"
content="Château du Faune — centre pour l'art et l'écologie en Ariège. Résidences d'artistes, fermette, événements et hébergement au pied des Pyrénées." content="Château du Faune — centre pour l'art et l'écologie en Ariège. Résidences d'artistes, fermette, événements et hébergement au pied des Pyrénées."
/> />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Aboreto&family=Italianno&family=Roboto:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<title>Château du Faune — Centre pour l'art et l'écologie</title> <title>Château du Faune — Centre pour l'art et l'écologie</title>
</head> </head>
<body> <body>

91
src/style.css
View file

@ -4,50 +4,50 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {
/* Earthy palette: warm parchment background, deep moss primary, /* Wix-inspired palette: deep forest green dominant background, cream
terracotta accent. Tuned for an artist-residency / land-art vibe. */ foreground, gold (Aboreto/calligraphic spirit) for CTAs and accents. */
--background: hsl(38 32% 96%); --background: hsl(151 100% 8%);
--foreground: hsl(120 14% 12%); --foreground: hsl(200 32% 94%);
--card: hsl(38 30% 98%); --card: hsl(151 80% 10%);
--card-foreground: hsl(120 14% 12%); --card-foreground: hsl(200 32% 94%);
--popover: hsl(38 30% 98%); --popover: hsl(151 80% 10%);
--popover-foreground: hsl(120 14% 12%); --popover-foreground: hsl(200 32% 94%);
--primary: hsl(125 24% 24%); --primary: hsl(43 64% 41%);
--primary-foreground: hsl(38 32% 96%); --primary-foreground: hsl(151 100% 6%);
--secondary: hsl(36 22% 88%); --secondary: hsl(151 65% 12%);
--secondary-foreground: hsl(120 14% 12%); --secondary-foreground: hsl(200 32% 94%);
--muted: hsl(36 18% 92%); --muted: hsl(151 50% 14%);
--muted-foreground: hsl(120 8% 38%); --muted-foreground: hsl(200 15% 72%);
--accent: hsl(22 58% 48%); --accent: hsl(50 65% 50%);
--accent-foreground: hsl(38 32% 96%); --accent-foreground: hsl(151 100% 6%);
--destructive: hsl(0 70% 45%); --destructive: hsl(0 60% 50%);
--destructive-foreground: hsl(38 32% 96%); --destructive-foreground: hsl(200 32% 94%);
--border: hsl(36 16% 82%); --border: hsl(151 50% 18%);
--input: hsl(36 16% 82%); --input: hsl(151 50% 18%);
--ring: hsl(125 24% 30%); --ring: hsl(43 64% 50%);
--radius: 0.5rem; --radius: 0.5rem;
} }
.dark { .dark {
--background: hsl(120 12% 8%); --background: hsl(151 100% 6%);
--foreground: hsl(38 26% 94%); --foreground: hsl(200 32% 94%);
--card: hsl(120 10% 11%); --card: hsl(151 80% 8%);
--card-foreground: hsl(38 26% 94%); --card-foreground: hsl(200 32% 94%);
--popover: hsl(120 10% 11%); --popover: hsl(151 80% 8%);
--popover-foreground: hsl(38 26% 94%); --popover-foreground: hsl(200 32% 94%);
--primary: hsl(38 28% 88%); --primary: hsl(43 64% 45%);
--primary-foreground: hsl(120 14% 12%); --primary-foreground: hsl(151 100% 6%);
--secondary: hsl(120 8% 18%); --secondary: hsl(151 65% 10%);
--secondary-foreground: hsl(38 26% 94%); --secondary-foreground: hsl(200 32% 94%);
--muted: hsl(120 8% 18%); --muted: hsl(151 50% 12%);
--muted-foreground: hsl(36 14% 66%); --muted-foreground: hsl(200 15% 70%);
--accent: hsl(22 52% 55%); --accent: hsl(50 65% 52%);
--accent-foreground: hsl(120 14% 12%); --accent-foreground: hsl(151 100% 6%);
--destructive: hsl(0 60% 40%); --destructive: hsl(0 60% 45%);
--destructive-foreground: hsl(38 26% 94%); --destructive-foreground: hsl(200 32% 94%);
--border: hsl(120 8% 22%); --border: hsl(151 50% 15%);
--input: hsl(120 8% 22%); --input: hsl(151 50% 15%);
--ring: hsl(38 26% 72%); --ring: hsl(43 64% 52%);
} }
@theme inline { @theme inline {
@ -74,9 +74,9 @@
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 4px);
--font-sans: --font-sans:
ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
sans-serif; --font-display: 'Aboreto', 'Cormorant Garamond', Georgia, serif;
--font-serif: 'Cormorant Garamond', Cambria, Georgia, 'Times New Roman', serif; --font-script: 'Italianno', 'Allura', 'Pinyon Script', cursive;
} }
@layer base { @layer base {
@ -86,11 +86,12 @@
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 300;
} }
h1, h1,
h2, h2,
h3 { h3 {
font-family: var(--font-serif); font-family: var(--font-display);
letter-spacing: -0.01em; letter-spacing: 0.02em;
} }
} }