jeffemmett
/
shiitake-john-website
mirror of https://github.com/Jeff-Emmett/shiitake-john-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
v0 2025-11-05 21:27:11 +00:00
parent 064868cec8
commit 769541379a
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/globals.css
View File

@ -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%);

9
app/layout.tsx
View File

@ -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 (
<html lang="en">
<body className={`font-sans antialiased`}>{children}</body>
<body className={`font-sans antialiased ${merriweather.variable}`}>{children}</body>
</html>
)
}