From 769541379ab8080a4ee53fb2b49441d9ccfeabc1 Mon Sep 17 00:00:00 2001 From: v0 Date: Wed, 5 Nov 2025 21:27:11 +0000 Subject: [PATCH] style: update colors and fonts for better readability Lighten background colors and add Merriweather font for headers. #VERCEL_SKIP Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com> --- app/globals.css | 13 ++++++++----- app/layout.tsx | 9 +++++++-- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/app/globals.css b/app/globals.css index c993f31..aa41501 100644 --- a/app/globals.css +++ b/app/globals.css @@ -15,7 +15,8 @@ --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); + /* Changed muted-foreground from medium grey (0.556) to dark brown (0.25) for better contrast */ + --muted-foreground: oklch(0.25 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); @@ -76,6 +77,7 @@ @theme inline { --font-sans: "Geist", "Geist Fallback"; + --font-serif: "Merriweather", "Georgia", serif; /* Added serif font variable for headers */ /* Earthy, forest-inspired color palette */ --color-background: 250 245 235; /* Warm off-white */ @@ -91,7 +93,8 @@ --color-accent-foreground: 45 35 25; --color-muted: 230 220 205; /* Soft beige */ - --color-muted-foreground: 95 70 45; + /* Changed muted-foreground to darker brown for better readability */ + --color-muted-foreground: 45 35 25; --color-card: 255 250 245; /* Cream */ --color-card-foreground: 45 35 25; @@ -150,7 +153,7 @@ /* Adding forest texture backgrounds with ferns and moss */ @layer utilities { .forest-texture { - background-color: rgb(26, 77, 46); /* Deep forest green */ + background-color: rgb(52, 110, 75); /* Lighter forest green */ position: relative; } @@ -172,7 +175,7 @@ } .moss-texture { - background-color: rgb(140, 120, 90); /* Warm tan/moss color */ + background-color: rgb(165, 145, 115); /* Lighter warm tan/moss color */ background-image: repeating-linear-gradient( 45deg, transparent, @@ -190,7 +193,7 @@ } .fern-pattern { - background-color: rgb(168, 180, 150); /* Soft sage green */ + background-color: rgb(185, 195, 170); /* Lighter sage green */ background-image: radial-gradient(ellipse at 10% 30%, rgba(95, 70, 45, 0.08) 0%, transparent 40%), radial-gradient(ellipse at 90% 70%, rgba(95, 70, 45, 0.06) 0%, transparent 40%), radial-gradient(ellipse at 50% 50%, rgba(140, 120, 90, 0.05) 0%, transparent 50%); diff --git a/app/layout.tsx b/app/layout.tsx index c2c6782..ab875f0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,10 +1,15 @@ import type React from "react" import type { Metadata } from "next" -import { Geist, Geist_Mono } from "next/font/google" +import { Geist, Geist_Mono, Merriweather } from "next/font/google" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) +const merriweather = Merriweather({ + subsets: ["latin"], + weight: ["300", "400", "700", "900"], + variable: "--font-serif", +}) export const metadata: Metadata = { title: "Shiitake John's Woodlot", @@ -19,7 +24,7 @@ export default function RootLayout({ }>) { return ( - {children} + {children} ) }