Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-web/llms.txt
Use this file to discover all available pages before exploring further.
y2k-web is styled with Tailwind CSS extended by a custom configuration that adds a retro Y2K/Windows 98 color palette, bespoke box-shadow utilities, and additional font families. On top of Tailwind’s generated utilities, a set of global CSS overrides in assets/main.css resets the browser defaults to match the era’s aesthetic: a Times New Roman body font, a checkered tile background, a crosshair cursor, and the classic hyperlink colors. The single compiled stylesheet (assets/main.css) begins with a Google Fonts import for the pixel font, followed by Tailwind’s @base, @components, and @utilities layers, and ends with the custom utility classes and global overrides.
Custom color palette
These colors are registered as Tailwind theme extensions and can be used anywhere a color utility is accepted (e.g., text-retro-blue, bg-win-gray, border-retro-pink).
| Token | Hex value | Description |
|---|
retro-blue | #0000EE | Classic hyperlink blue |
retro-pink | #FF1493 | Deep pink / hot pink accent |
retro-lime | #00FF00 | Neon green, terminal / Matrix green |
retro-cyan | #00FFFF | Bright cyan, used in gradients |
win-gray | #C0C0C0 | Windows 98 widget / titlebar silver |
win-blue | #000080 | Windows 98 active titlebar navy |
Custom box shadows
The Windows 98 UI famously used 1-pixel inset highlight/shadow pairs to create the illusion of depth. These are implemented as named box-shadow utilities:
| Utility class | CSS value | Visual effect |
|---|
shadow-win-out | inset 1px 1px 0px 0px #ffffff, inset -1px -1px 0px 0px #000000, 1px 1px 0px 0px #000000 | Raised button look — top/left highlighted, bottom/right dark |
shadow-win-in | inset 1px 1px 0px 0px #000000, inset -1px -1px 0px 0px #ffffff | Pressed / inset look — top/left dark, bottom/right highlighted |
text-shadow-retro | text-shadow: 2px 2px 0px #000 | Hard 2 px black offset text shadow for Impact headings |
active:shadow-win-in variant is applied alongside shadow-win-out on buttons to toggle the pressed appearance on click:
<button class="bg-win-gray shadow-win-out active:shadow-win-in px-4 py-1 font-pixel text-[10px]">
Launch
</button>
Font stack
Four font families are registered as Tailwind utilities via the fontFamily theme extension:
| Utility class | CSS font-family value | Usage |
|---|
font-pixel | "Press Start 2P", cursive | Pixel art display font loaded from Google Fonts — used for labels, nav tabs, and UI chrome |
font-comic | Comic Sans MS, Comic Sans, cursive | System Comic Sans — blog posts, guestbook entries, informal captions |
font-impact | Impact, Charcoal, sans-serif | Condensed system font — large headings (h1–h6 default, page titles) |
font-times | Times New Roman, Times, serif | Body copy, resume text, long-form paragraphs (also the global body default) |
@import at the very top of assets/main.css:
@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
Use font-pixel sparingly. Press Start 2P is a display-weight bitmap-style font designed for large sizes and short strings — it has no lowercase letterforms and every character is wide. At text-xs or below (10 px and under) it becomes difficult to read, especially on non-HiDPI screens. Reserve it for short nav labels, window title bars, and decorative headings; use font-times or font-comic for body copy and longer text.
Global CSS overrides
After Tailwind’s generated utilities, assets/main.css applies a set of global base-layer overrides that establish the retro aesthetic site-wide.
Body styles
body {
font-family: Times New Roman, Times, serif;
color: rgb(0 0 0);
/* 2×2 px checkered tile background (base64 PNG) */
background-image: url(data:image/png;base64,...);
background-repeat: repeat;
background-color: #f0f0f0;
cursor: crosshair;
}
- Default font — Times New Roman, matching the pre-CSS-framework web of the late 1990s.
- Checkered tile background — a 2×2 px base64-encoded PNG tiled across the entire viewport, evoking the classic “under construction” page texture.
- Background color —
#f0f0f0 (light silver) shows through the transparent squares in the tile.
- Crosshair cursor — replaces the default arrow with a crosshair, a retro design flourish applied globally.
Heading styles
h1, h2, h3, h4, h5, h6 {
font-family: Impact, Charcoal, sans-serif;
letter-spacing: 0.025em;
}
Link styles
a {
color: rgb(0 0 238); /* #0000EE — retro-blue */
text-decoration-line: underline;
}
a:visited {
color: rgb(126 34 206); /* Tailwind purple-700 — #7e22ce */
}
a:hover {
cursor: pointer;
color: rgb(255 20 147); /* #FF1493 — deep pink / retro-pink */
}
a { color: inherit; text-decoration: inherit; }) with the canonical 1990s browser default link colors: unvisited blue, visited purple, and hot-pink on hover.
Custom scrollbar (WebKit)
::-webkit-scrollbar { width: 16px; background: silver; border-left: 1px solid #000; }
::-webkit-scrollbar-thumb { background: silver; box-shadow: inset 1px 1px #fff, inset -1px -1px #000; }
::-webkit-scrollbar-button { background: silver; box-shadow: inset 1px 1px #fff, inset -1px -1px #000; height: 16px; }
shadow-win-out highlight pattern to look like a Windows 98 scroll component.