chris/invite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tone down the Retro Arcade theme

Browse Source 
- 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
This commit is contained in:
chris 2026-07-12 12:20:59 -04:00
parent a6d1ade53c
commit d9f980b640
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/fonts.ts
View File

@ -5,7 +5,7 @@ import {
Inter, Inter,
Mountains_of_Christmas, Mountains_of_Christmas,
Special_Elite, Special_Elite,
Press_Start_2P, VT323,
} from 'next/font/google'; } from 'next/font/google';
const playfairDisplay = Playfair_Display({ subsets: ['latin'], variable: '--font-classic-elegant' }); 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 quicksandBaby = Quicksand({ subsets: ['latin'], variable: '--font-baby-shower-pastel' });
const specialElite = Special_Elite({ subsets: ['latin'], weight: '400', variable: '--font-goth-grunge' }); 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 // 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 // next/font's generated CSS variables to be available, so we export one
@ -32,7 +36,7 @@ export const allFontVariables = [
mountainsOfChristmas.variable, mountainsOfChristmas.variable,
quicksandBaby.variable, quicksandBaby.variable,
specialElite.variable, specialElite.variable,
pressStart2p.variable, vt323.variable,
].join(' '); ].join(' ');
const FONT_FAMILY_BY_THEME: Record<string, string> = { const FONT_FAMILY_BY_THEME: Record<string, string> = {

17
src/lib/patterns.ts
View File

@ -116,14 +116,21 @@ export function scratchPattern(color: string) {
return svgBackground(svg, `${size}px ${size}px`); 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[]) { export function pixelGridPattern(gridColor: string, pixelColors: string[]) {
const size = 40; const size = 120;
const [a, b] = pixelColors; const [a, b] = pixelColors;
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}"> 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"/> <g stroke="${gridColor}" stroke-width="1" opacity="0.12">
<rect x="4" y="4" width="5" height="5" fill="${a}" opacity="0.6"/> <line x1="0" y1="0.5" x2="${size}" y2="0.5"/>
<rect x="26" y="20" width="5" height="5" fill="${b}" opacity="0.6"/> <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>`; </svg>`;
return svgBackground(svg, `${size}px ${size}px`); return svgBackground(svg, `${size}px ${size}px`);
} }