From afa7e3986efcc3f6c81563c98df756df92f2e524 Mon Sep 17 00:00:00 2001 From: Citali Date: Thu, 29 Jan 2026 12:58:30 +0100 Subject: [PATCH] Change styling --- .../artworks/animalstudies/index/page.tsx | 41 +++++---- src/app/globals.css | 91 ++++++++++++++++++- src/components/global/Banner.tsx | 4 +- 3 files changed, 115 insertions(+), 21 deletions(-) diff --git a/src/app/(normal)/artworks/animalstudies/index/page.tsx b/src/app/(normal)/artworks/animalstudies/index/page.tsx index 9a7cfa2..41e6c35 100644 --- a/src/app/(normal)/artworks/animalstudies/index/page.tsx +++ b/src/app/(normal)/artworks/animalstudies/index/page.tsx @@ -1,4 +1,4 @@ -import { prisma } from "@/lib/prisma"; +import { ArrowLeftIcon } from "lucide-react"; import Link from "next/link"; import { @@ -11,7 +11,7 @@ import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; -import { ArrowLeftIcon } from "lucide-react"; +import { prisma } from "@/lib/prisma"; type SimpleArtwork = { id: string; @@ -178,7 +178,16 @@ export default async function AnimalListPage() { return ( - +
{p.name} @@ -203,7 +212,6 @@ export default async function AnimalListPage() { - {/* If standalone root: just list its artworks */} {isStandalone ? (
@@ -214,29 +222,26 @@ export default async function AnimalListPage() {
) : (
- {/* Optional: artworks directly on the parent */} -
-
-
- {/* Directly tagged */} + {p.artworks.length > 0 ? ( + <> +
+
+
{/* Directly tagged */}
+ {p.artworks.length} +
+
- {p.artworks.length} -
- -
- + + + ) : null} - {/* Children blocks */}
{children.map((c) => (
{c.name}
- {/*
- Sub-tag of {p.name} -
*/}
{c.artworks.length}
diff --git a/src/app/globals.css b/src/app/globals.css index 6846f29..b2e2db3 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -46,7 +46,7 @@ --radius-4xl: calc(var(--radius) + 16px); } -:root { +/* :root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); @@ -113,6 +113,87 @@ --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); +} */ + +:root { + --radius: 0.625rem; + + /* Light: warm paper + graphite */ + --background: oklch(0.985 0.012 85); /* warm off-white */ + --foreground: oklch(0.18 0.02 35); /* graphite */ + + --card: oklch(0.992 0.008 85); /* slightly lifted paper */ + --card-foreground: var(--foreground); + + --popover: oklch(0.992 0.008 85); + --popover-foreground: var(--foreground); + + /* Primary: deep ink / indigo (artist-y but still neutral enough) */ + --primary: oklch(0.32 0.06 260); + --primary-foreground: oklch(0.985 0.012 85); + + /* Secondary/muted/accent: warm washes */ + --secondary: oklch(0.96 0.015 85); + --secondary-foreground: oklch(0.22 0.02 35); + + --muted: oklch(0.955 0.012 85); + --muted-foreground: oklch(0.46 0.02 35); + + --accent: oklch(0.95 0.02 110); /* subtle “wash” */ + --accent-foreground: oklch(0.22 0.02 35); + + --destructive: oklch(0.58 0.22 27.325); + + --border: oklch(0.90 0.02 85); /* warm border */ + --input: oklch(0.90 0.02 85); + --ring: oklch(0.55 0.07 260); /* ties to primary */ + + /* charts can stay, or we can harmonize later */ + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + + /* sidebar inherits the same “paper” idea */ + --sidebar: oklch(0.975 0.012 85); + --sidebar-foreground: var(--foreground); + --sidebar-primary: var(--primary); + --sidebar-primary-foreground: var(--primary-foreground); + --sidebar-accent: oklch(0.95 0.02 110); + --sidebar-accent-foreground: var(--accent-foreground); + --sidebar-border: var(--border); + --sidebar-ring: var(--ring); +} + +.dark { + /* Inky navy background (clearly not neutral) */ + --background: oklch(21.393% 0.06154 260.121); + --foreground: oklch(0.95 0.012 85); + + /* Surfaces */ + --card: oklch(0.155 0.03 255); + --card-foreground: var(--foreground); + + --popover: oklch(0.155 0.03 255); + --popover-foreground: var(--foreground); + + /* Primary accent stays “artist ink” */ + --primary: oklch(0.78 0.11 255); + --primary-foreground: oklch(0.13 0.03 255); + + --secondary: oklch(0.19 0.025 255); + --secondary-foreground: var(--foreground); + + --muted: oklch(0.19 0.025 255); + --muted-foreground: oklch(0.74 0.02 85); + + --accent: oklch(0.22 0.03 110); + --accent-foreground: var(--foreground); + + --border: oklch(0.40 0.03 255 / 55%); + --input: oklch(0.40 0.03 255 / 65%); + --ring: oklch(0.65 0.10 255); } .markdown { @@ -181,5 +262,13 @@ } body { @apply bg-background text-foreground; + background-image: + radial-gradient(1200px 600px at 20% -10%, oklch(0.92 0.05 110 / 30%), transparent 60%), + radial-gradient(900px 500px at 80% 0%, oklch(0.85 0.06 260 / 22%), transparent 55%); + } + .dark body { + background-image: + radial-gradient(1200px 700px at 15% -10%, oklch(0.55 0.14 255 / 16%), transparent 60%), + radial-gradient(900px 600px at 85% 0%, oklch(0.50 0.12 110 / 10%), transparent 55%); } } diff --git a/src/components/global/Banner.tsx b/src/components/global/Banner.tsx index 243df12..18b87f1 100644 --- a/src/components/global/Banner.tsx +++ b/src/components/global/Banner.tsx @@ -1,9 +1,9 @@ import { prisma } from "@/lib/prisma"; import { cn } from "@/lib/utils"; -import { Pacifico } from "next/font/google"; +import { Fraunces } from "next/font/google"; import Image from "next/image"; -const pacifico = Pacifico({ weight: "400", subsets: ["latin"] }); +const pacifico = Fraunces({ weight: "700", subsets: ["latin"] }); export default async function Banner() { const headerImage = await prisma.artwork.findFirst({