From cbac2b0771091f3e2d8ee0eb98b6ad1004e2bced Mon Sep 17 00:00:00 2001 From: hzhang Date: Sun, 17 May 2026 14:05:16 +0100 Subject: [PATCH] feat: lab-terminal theme + new logo Adopt the Hangman Lab visual language (adapted from the Gitea STYLE.md, Gitea-only mechanics excluded): - New acid SVG mark as favicon (?v cache-bust) and navbar logo. - Single acid accent (#d8ff3e); retune globals.css tokens to the ink/panel/line/text/dim/danger palette; drop the cyan/violet pair (secondary -> same acid so existing components stay on-brand). - Fonts: IBM Plex Mono for body/UI/mono, Major Mono Display for the lowercase brand lockup; Tailwind fontFamily + content fonts updated. - Site-wide fixed 48px blueprint-grid backdrop + one acid sheen. Co-Authored-By: Claude Opus 4.7 (1M context) --- public/icons/hangman-lab-logo.svg | 44 ++++++++++ public/index.html | 4 +- src/components/Markdowns/MarkdownEditor.css | 2 +- src/components/Markdowns/MarkdownView.css | 8 +- src/components/Navigations/MainNavigation.js | 12 +-- src/globals.css | 88 ++++++++++++-------- tailwind.config.js | 13 +-- 7 files changed, 115 insertions(+), 56 deletions(-) create mode 100644 public/icons/hangman-lab-logo.svg diff --git a/public/icons/hangman-lab-logo.svg b/public/icons/hangman-lab-logo.svg new file mode 100644 index 0000000..977f98a --- /dev/null +++ b/public/icons/hangman-lab-logo.svg @@ -0,0 +1,44 @@ + + + + + diff --git a/public/index.html b/public/index.html index 8b7ca3c..1e331da 100644 --- a/public/index.html +++ b/public/index.html @@ -5,11 +5,11 @@ Hangman Lab - + diff --git a/src/components/Markdowns/MarkdownEditor.css b/src/components/Markdowns/MarkdownEditor.css index 86e9ef6..82da43f 100644 --- a/src/components/Markdowns/MarkdownEditor.css +++ b/src/components/Markdowns/MarkdownEditor.css @@ -12,7 +12,7 @@ } code { - font-family: ui-monospace, "JetBrains Mono", "Courier New", Courier, monospace; + font-family: ui-monospace, "IBM Plex Mono", "Courier New", Courier, monospace; background-color: hsl(var(--muted)); color: hsl(var(--foreground)); padding: 2px 6px; diff --git a/src/components/Markdowns/MarkdownView.css b/src/components/Markdowns/MarkdownView.css index cae6628..9ae4479 100644 --- a/src/components/Markdowns/MarkdownView.css +++ b/src/components/Markdowns/MarkdownView.css @@ -34,7 +34,7 @@ .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 { - font-family: "JetBrains Mono", ui-monospace, monospace; + font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; color: hsl(var(--foreground)); line-height: 1.3; @@ -108,7 +108,7 @@ /* Inline code */ .markdown-preview :not(pre) > code { - font-family: "JetBrains Mono", ui-monospace, monospace; + font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85em; background-color: hsl(var(--muted)); color: hsl(var(--primary)); @@ -128,7 +128,7 @@ box-shadow: inset 0 0 40px -20px hsl(var(--primary) / 0.25); } .markdown-preview pre code { - font-family: "JetBrains Mono", ui-monospace, monospace; + font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem; background: transparent; border: none; @@ -150,7 +150,7 @@ } .markdown-preview th { background-color: hsl(var(--muted)); - font-family: "JetBrains Mono", ui-monospace, monospace; + font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; diff --git a/src/components/Navigations/MainNavigation.js b/src/components/Navigations/MainNavigation.js index 68bbbe6..eaf5d17 100644 --- a/src/components/Navigations/MainNavigation.js +++ b/src/components/Navigations/MainNavigation.js @@ -124,13 +124,13 @@ const MainNavigation = () => { className="group flex items-center gap-2.5 pr-3" > Logo - - HANGMAN - //LAB + + hangman + lab diff --git a/src/globals.css b/src/globals.css index 1807c81..6f911c3 100644 --- a/src/globals.css +++ b/src/globals.css @@ -2,37 +2,40 @@ @tailwind components; @tailwind utilities; -/* Dark-tech design tokens (single dark theme). HSL triplets so Tailwind - color utilities and shadcn-style primitives resolve via hsl(var(--x)). */ +/* Lab-terminal theme — adapted from the Gitea STYLE.md for this React app. + Single acid accent (#d8ff3e), dark blueprint surfaces, monospace UI. + HSL triplets so Tailwind / shadcn-style primitives resolve hsl(var(--x)). */ :root, .dark { - --background: 222 32% 6%; - --foreground: 210 22% 92%; + --background: 216 24% 4%; /* #080a0d ink */ + --foreground: 217 35% 86%; /* #cdd8e8 text */ - --surface: 222 28% 8.5%; - --card: 222 26% 9.5%; - --card-foreground: 210 22% 92%; + --surface: 214 29% 8%; /* #0f141b panel */ + --card: 214 29% 8%; + --card-foreground: 217 38% 95%; /* #e9f0fa strong text */ - --muted: 222 20% 14%; - --muted-foreground: 215 16% 60%; + --muted: 214 27% 12%; /* hovered panel */ + --muted-foreground: 216 18% 48%; /* #647691 dim / eyebrow */ - --accent: 222 24% 13%; - --accent-foreground: 210 22% 92%; + --accent: 214 27% 11%; /* row/element hover wash base */ + --accent-foreground: 217 35% 86%; - --border: 220 18% 18%; - --input: 220 18% 16%; - --ring: 186 92% 56%; + --border: 213 28% 16%; /* #1d2733 lines / dividers */ + --input: 213 28% 14%; + --ring: 72 100% 62%; /* acid focus ring */ - /* cyan primary, violet secondary — the neon accents */ - --primary: 186 92% 56%; - --primary-foreground: 222 47% 6%; - --secondary: 258 90% 68%; - --secondary-foreground: 0 0% 100%; + /* THE accent — one acid, used for links/primary/active/focus. */ + --primary: 72 100% 62%; /* #d8ff3e */ + --primary-foreground: 96 24% 5%; /* #0c0f08 text on acid */ + /* No second hue (STYLE: "one acid"). Secondary == acid so any + component using it stays on-brand. */ + --secondary: 72 100% 62%; + --secondary-foreground: 96 24% 5%; - --destructive: 0 72% 56%; + --destructive: 3 100% 66%; /* #ff5a52 errors only */ --destructive-foreground: 0 0% 100%; - --radius: 0.5rem; + --radius: 0.75rem; } * { @@ -45,25 +48,35 @@ body, height: 100%; } +html { + background-color: hsl(var(--background)); +} + body { margin: 0; - background-color: hsl(var(--background)); + background-color: transparent; color: hsl(var(--foreground)); - font-family: Inter, ui-sans-serif, system-ui, sans-serif; + font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } -/* Ambient grid + glow backdrop for the app shell */ +/* Site-wide blueprint grid backdrop (STYLE §11.2): fixed, behind content, + 48px #1d2733 lines at low opacity, radial-masked, plus one acid sheen. */ body::before { content: ""; position: fixed; inset: 0; + z-index: -1; pointer-events: none; - z-index: 0; - background: - radial-gradient(60rem 60rem at 110% -10%, hsl(258 90% 68% / 0.10), transparent 60%), - radial-gradient(50rem 50rem at -10% 110%, hsl(186 92% 56% / 0.08), transparent 60%); + background-color: hsl(var(--background)); + background-image: + radial-gradient(1000px 560px at 78% -8%, hsl(72 100% 62% / 0.10), transparent 60%), + linear-gradient(hsl(213 28% 16% / 0.16) 1px, transparent 1px), + linear-gradient(90deg, hsl(213 28% 16% / 0.16) 1px, transparent 1px); + background-size: 100% 100%, 48px 48px, 48px 48px; + -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 55%, transparent 100%); + mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 55%, transparent 100%); } ::selection { @@ -71,7 +84,6 @@ body::before { color: hsl(var(--foreground)); } -/* Slim techy scrollbars */ * { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; @@ -89,16 +101,24 @@ body::before { } @layer utilities { + /* Display lockup font — always lowercase per STYLE §3. */ + .font-display { + font-family: "Major Mono Display", "IBM Plex Mono", monospace; + text-transform: lowercase; + } .neon-text { color: hsl(var(--primary)); - text-shadow: 0 0 12px hsl(var(--primary) / 0.55); + text-shadow: 0 0 44px hsl(var(--primary) / 0.38); } + /* kept for compatibility with components that used the old violet + accent — now the same single acid. */ .neon-text-violet { - color: hsl(var(--secondary)); - text-shadow: 0 0 12px hsl(var(--secondary) / 0.55); + color: hsl(var(--primary)); + text-shadow: 0 0 44px hsl(var(--primary) / 0.38); } .glass { - background: hsl(var(--surface) / 0.7); - backdrop-filter: blur(10px); + background: hsl(214 29% 8% / 0.55); + backdrop-filter: blur(16px) saturate(150%); + border: 1px solid hsl(var(--primary) / 0.16); } } diff --git a/tailwind.config.js b/tailwind.config.js index f7bf2da..dd15868 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -42,15 +42,10 @@ module.exports = { sm: "calc(var(--radius) - 4px)", }, fontFamily: { - sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"], - mono: [ - "JetBrains Mono", - "Fira Code", - "ui-monospace", - "SFMono-Regular", - "Menlo", - "monospace", - ], + // Lab-terminal: IBM Plex Mono is the body/UI/mono face. + sans: ["IBM Plex Mono", "ui-monospace", "SFMono-Regular", "monospace"], + mono: ["IBM Plex Mono", "ui-monospace", "SFMono-Regular", "monospace"], + display: ["Major Mono Display", "IBM Plex Mono", "monospace"], }, boxShadow: { glow: "0 0 0 1px hsl(var(--primary) / 0.25), 0 0 24px -6px hsl(var(--primary) / 0.45)",