From 6627a5bb6c50104f0a274fc350040b92a3781e85 Mon Sep 17 00:00:00 2001 From: Cho Young-Hwi Date: Sat, 21 Mar 2026 08:08:28 +0000 Subject: [PATCH] [#404] Replace dark terminal theme with warm bookshelf light mode - globals.css: swap all design tokens to warm cream/beige/gold palette, add --bg-shelf and --shelf-shadow tokens, set heading/body font vars - layout.tsx: replace Geist Mono with Montserrat (500/600) + Libre Caslon Text (400) via Google Fonts - NavBar.tsx: remove SVG logo (text-only "PlotLink" in Montserrat SemiBold), remove > prefix on active links, replace [=]/[x] hamburger with SVG icon, capitalize nav labels - Footer.tsx: remove $ terminal prefix, use warm muted text color Fixes #404 Co-Authored-By: Claude Opus 4.6 (1M context) --- src/app/globals.css | 34 +++++++++++++++++++-------------- src/app/layout.tsx | 15 +++++++++++---- src/components/Footer.tsx | 4 ++-- src/components/NavBar.tsx | 40 ++++++++++++++++++++++++--------------- 4 files changed, 58 insertions(+), 35 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index bf7a84b0..58a6d55c 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,14 +1,16 @@ @import "tailwindcss"; :root { - --bg: #0a0a0a; - --bg-surface: #111111; - --text: #e0e0e0; - --text-muted: #737373; - --accent: #00ff88; - --accent-dim: #00cc6a; - --border: #2a2a2a; - --error: #ff4444; + --bg: #E8DFD0; + --bg-surface: #FFFFFF; + --bg-shelf: #DDD3C2; + --shelf-shadow: rgba(44, 24, 16, 0.08); + --text: #2C1810; + --text-muted: #8B7355; + --accent: #DAAA63; + --accent-dim: #C4944F; + --border: #D4C5B0; + --error: #CC3333; } @theme inline { @@ -20,29 +22,33 @@ --color-accent-dim: var(--accent-dim); --color-border: var(--border); --color-error: var(--error); - --font-mono: var(--font-geist-mono); + --font-heading: var(--font-montserrat); + --font-body: var(--font-libre-caslon); } body { background: var(--bg); color: var(--text); - font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, "SF Mono", - Menlo, Consolas, "Liberation Mono", monospace; + font-family: var(--font-libre-caslon), "Libre Caslon Text", Georgia, + "Times New Roman", serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-montserrat), Montserrat, system-ui, sans-serif; } /* Selection */ ::selection { background: var(--accent); - color: var(--bg); + color: var(--bg-surface); } /* Custom select dropdown styling */ select { appearance: none; -webkit-appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B7355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; } - diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5151ab00..8db6b96a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,14 +1,21 @@ import type { Metadata } from "next"; -import { Geist_Mono } from "next/font/google"; +import { Montserrat, Libre_Caslon_Text } from "next/font/google"; import { Providers } from "./providers"; import { NavBar } from "../components/NavBar"; import { Footer } from "../components/Footer"; import { FarcasterMiniApp } from "../components/FarcasterMiniApp"; import "./globals.css"; -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const montserrat = Montserrat({ + variable: "--font-montserrat", subsets: ["latin"], + weight: ["500", "600"], +}); + +const libreCaslon = Libre_Caslon_Text({ + variable: "--font-libre-caslon", + subsets: ["latin"], + weight: "400", }); const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000"; @@ -34,7 +41,7 @@ export default function RootLayout({ }>) { return ( - + diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 41725850..3bd68173 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -25,8 +25,8 @@ export function Footer() { built on Base -
- $ PlotLink © {new Date().getFullYear()} +
+ PlotLink © {new Date().getFullYear()}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index ffe690ec..d24bcbc5 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,15 +1,14 @@ "use client"; import { useState } from "react"; -import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { ConnectWallet } from "./ConnectWallet"; const NAV_LINKS = [ - { href: "/create", label: "create" }, - { href: "/dashboard/writer", label: "writer" }, - { href: "/dashboard/reader", label: "reader" }, + { href: "/create", label: "Create" }, + { href: "/dashboard/writer", label: "Writer" }, + { href: "/dashboard/reader", label: "Reader" }, ] as const; export function NavBar() { @@ -22,10 +21,10 @@ export function NavBar() { {/* Logo */} - - PlotLink + PlotLink {/* Desktop nav links */} @@ -36,13 +35,12 @@ export function NavBar() { - {active && >} {label} ); @@ -56,11 +54,24 @@ export function NavBar() { @@ -76,13 +87,12 @@ export function NavBar() { key={href} href={href} onClick={() => setMobileOpen(false)} - className={`rounded px-2.5 py-1.5 text-xs transition-colors ${ + className={`rounded px-2.5 py-1.5 text-xs font-medium transition-colors ${ active - ? "bg-[var(--accent)]/10 text-accent" + ? "bg-[var(--accent)]/15 text-accent" : "text-muted hover:text-foreground" }`} > - {active && >} {label} );