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: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 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: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0); --accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
@ -76,6 +77,7 @@
@theme inline { @theme inline {
--font-sans: "Geist", "Geist Fallback"; --font-sans: "Geist", "Geist Fallback";
--font-serif: "Merriweather", "Georgia", serif; /* Added serif font variable for headers */
/* Earthy, forest-inspired color palette */ /* Earthy, forest-inspired color palette */
--color-background: 250 245 235; /* Warm off-white */ --color-background: 250 245 235; /* Warm off-white */
@ -91,7 +93,8 @@
--color-accent-foreground: 45 35 25; --color-accent-foreground: 45 35 25;
--color-muted: 230 220 205; /* Soft beige */ --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: 255 250 245; /* Cream */
--color-card-foreground: 45 35 25; --color-card-foreground: 45 35 25;
@ -150,7 +153,7 @@
/* Adding forest texture backgrounds with ferns and moss */ /* Adding forest texture backgrounds with ferns and moss */
@layer utilities { @layer utilities {
.forest-texture { .forest-texture {
background-color: rgb(26, 77, 46); /* Deep forest green */ background-color: rgb(52, 110, 75); /* Lighter forest green */
position: relative; position: relative;
} }
@ -172,7 +175,7 @@
} }
.moss-texture { .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( background-image: repeating-linear-gradient(
45deg, 45deg,
transparent, transparent,
@ -190,7 +193,7 @@
} }
.fern-pattern { .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%), 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 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%); 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 React from "react"
import type { Metadata } from "next" 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" import "./globals.css"
const _geist = Geist({ subsets: ["latin"] }) const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ 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 = { export const metadata: Metadata = {
title: "Shiitake John's Woodlot", title: "Shiitake John's Woodlot",
@ -19,7 +24,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`font-sans antialiased`}>{children}</body> <body className={`font-sans antialiased ${merriweather.variable}`}>{children}</body>
</html> </html>
) )
} }