From d9f980b6409e165e68c69676585004c2ee5c4719 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Sun, 12 Jul 2026 12:20:59 -0400
Subject: [PATCH] Tone down the Retro Arcade theme

- Swap Press Start 2P (a pixel-block font meant for short logo-sized
  text) for VT323, a retro terminal font that stays legible across
  full paragraphs of body copy
- Loosen the pixel-grid background from a dense 40px wall-to-wall
  neon grid to a sparser 120px tile with faint gridlines and a few
  low-opacity flecks, in line with the other themes' patterns
---
 src/lib/fonts.ts    | 10 +++++++---
 src/lib/patterns.ts | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
index 2329312..ca0e53d 100644
--- a/src/lib/fonts.ts
+++ b/src/lib/fonts.ts
@@ -5,7 +5,7 @@ import {
   Inter,
   Mountains_of_Christmas,
   Special_Elite,
-  Press_Start_2P,
+  VT323,
 } from 'next/font/google';
 
 const playfairDisplay = Playfair_Display({ subsets: ['latin'], variable: '--font-classic-elegant' });
@@ -19,7 +19,11 @@ const mountainsOfChristmas = Mountains_of_Christmas({
 });
 const quicksandBaby = Quicksand({ subsets: ['latin'], variable: '--font-baby-shower-pastel' });
 const specialElite = Special_Elite({ subsets: ['latin'], weight: '400', variable: '--font-goth-grunge' });
-const pressStart2p = Press_Start_2P({ subsets: ['latin'], weight: '400', variable: '--font-retro-arcade' });
+// Press Start 2P (an actual pixel-block font) reads fine for a short
+// logo-sized heading but is close to illegible for paragraphs of body
+// copy - VT323 keeps the retro-terminal/arcade feel while staying
+// readable at normal text sizes.
+const vt323 = VT323({ subsets: ['latin'], weight: '400', variable: '--font-retro-arcade' });
 
 // All font variable classes need to be present in the document for
 // next/font's generated CSS variables to be available, so we export one
@@ -32,7 +36,7 @@ export const allFontVariables = [
   mountainsOfChristmas.variable,
   quicksandBaby.variable,
   specialElite.variable,
-  pressStart2p.variable,
+  vt323.variable,
 ].join(' ');
 
 const FONT_FAMILY_BY_THEME: Record<string, string> = {
diff --git a/src/lib/patterns.ts b/src/lib/patterns.ts
index 6560f75..70049d1 100644
--- a/src/lib/patterns.ts
+++ b/src/lib/patterns.ts
@@ -116,14 +116,21 @@ export function scratchPattern(color: string) {
   return svgBackground(svg, `${size}px ${size}px`);
 }
 
-/** Subtle pixel-grid with scattered neon "pixels" for a retro arcade theme. */
+/** Sparse neon "pixels" over a faint grid for a retro arcade theme. Sized
+ * and toned in line with the other patterns (large tile, lots of
+ * negative space, low opacity) rather than a dense wall-to-wall grid,
+ * which read as too busy behind a full page of text. */
 export function pixelGridPattern(gridColor: string, pixelColors: string[]) {
-  const size = 40;
+  const size = 120;
   const [a, b] = pixelColors;
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
-    <rect width="${size}" height="${size}" fill="none" stroke="${gridColor}" stroke-width="1" opacity="0.25"/>
-    <rect x="4" y="4" width="5" height="5" fill="${a}" opacity="0.6"/>
-    <rect x="26" y="20" width="5" height="5" fill="${b}" opacity="0.6"/>
+    <g stroke="${gridColor}" stroke-width="1" opacity="0.12">
+      <line x1="0" y1="0.5" x2="${size}" y2="0.5"/>
+      <line x1="0.5" y1="0" x2="0.5" y2="${size}"/>
+    </g>
+    <rect x="16" y="22" width="6" height="6" fill="${a}" opacity="0.35"/>
+    <rect x="80" y="66" width="6" height="6" fill="${b}" opacity="0.35"/>
+    <rect x="52" y="92" width="4" height="4" fill="${a}" opacity="0.25"/>
   </svg>`;
   return svgBackground(svg, `${size}px ${size}px`);
 }