Skip to main content

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’s visual identity is controlled through three distinct layers: the Tailwind config defines the custom color palette and box-shadow utilities; the Google Fonts import at the top of main.css pulls in the pixel font that anchors the retro look; and global CSS overrides set the page-level character — the tiled background, the crosshair cursor, and the link colors that give the site its authentic late-90s web feel. Each layer can be modified independently.
y2k-web ships as a pre-built static site — there is no tailwind.config.js or Vite source in the repository. The CSS utility classes are already compiled into assets/main.css. To change the theme tokens (color palette, shadows, font families), you need access to the original Vite + Tailwind source, edit tailwind.config.js there, and run npm run build to regenerate assets/main.css. If you only have the compiled output, you can override specific styles by appending rules directly to assets/main.css.

​
Custom color palette

The six retro colors are declared in tailwind.config.js under theme.extend.colors in the source project. Extending rather than replacing the default palette means all standard Tailwind color utilities remain available alongside the custom ones: 
// tailwind.config.js (source project)
module.exports = {
  theme: {
    extend: {
      colors: {
        'retro-blue':  '#0000EE',
        'retro-pink':  '#FF1493',
        'retro-lime':  '#00FF00',
        'retro-cyan':  '#00FFFF',
        'win-gray':    '#C0C0C0',
        'win-blue':    '#000080',
      },
    },
  },
};
Once defined, these tokens map directly to Tailwind’s standard utility naming convention. Use them anywhere a color utility is valid:
  • text-retro-blue — applies color: #0000EE
  • bg-retro-pink — applies background-color: #FF1493
  • border-win-gray — applies border-color: #C0C0C0
  • hover:text-retro-lime — applies the lime green on hover
To retheme the site, replace the hex values in tailwind.config.js and rebuild. All components that reference these tokens will update automatically without any markup changes. If working from the compiled assets/main.css only, search for the hex values and replace them directly.

​
Windows chrome shadows

The boxShadow extension in tailwind.config.js adds two utilities that replicate the inset border highlight effect used by Windows 3.1 through 98 for buttons and dialog frames: 
// tailwind.config.js (source project)
boxShadow: {
  'win-out': 'inset 1px 1px 0px 0px #ffffff, inset -1px -1px 0px 0px #000000, 1px 1px 0px 0px #000000',
  'win-in':  'inset 1px 1px 0px 0px #000000, inset -1px -1px 0px 0px #ffffff',
}
  • shadow-win-out — white highlight on the top-left inset edge, black on the bottom-right, with an outer black drop shadow. The result is a raised, clickable button appearance.
  • shadow-win-in — inverts the highlights, making the element appear pushed inward. Use this on active/pressed states.
Together they reproduce the authentic Windows chrome that defined desktop UIs throughout the Y2K era. Apply them to <div> or <button> elements that represent window panels, toolbar buttons, or dialog boxes.

​
Global CSS overrides

The following body-level styles in assets/main.css establish the overall page character. They apply before any component styles, so they set the default look that everything else builds on: 
body {
  font-family: Times New Roman, Times, serif;
  background-image: url(/* checkered tile data URI */);
  background-repeat: repeat;
  background-color: #f0f0f0;
  cursor: crosshair;
}
a { color: #0000EE; text-decoration: underline; }
a:visited { color: #7E22CE; }
a:hover { color: #FF1493; }
  • cursor: crosshair — one of the most recognisable Y2K web signatures; swap to default, pointer, or a custom .cur data URI to change the site’s personality immediately.
  • background-image — the repeating tile is a small data URI embedded directly in assets/main.css; replace it with a different pattern (stars, dots, diagonal stripes) to shift the aesthetic era.
  • Link colors — the three-state a / a:visited / a:hover chain uses retro-blue (#0000EE), purple (#7E22CE), and retro-pink (#FF1493) respectively, mirroring classic browser default link colors but with the pink hover as a y2k-web signature touch.
These styles live in the compiled assets/main.css and can be edited there directly without needing the Tailwind source.
To create a Mac OS 8 / Platinum variant, swap win-gray (#C0C0C0) for a slightly darker silver (#B0B0B0), change win-blue from navy (#000080) to Mac teal (#008080), replace the window chrome shadows with a single solid 1px border, and set font-family to Arial, Helvetica, sans-serif to approximate the Chicago/Charcoal system font. The checkered background can be replaced with a solid light-gray (#DDDDDD) for the cleaner Platinum look.

Build docs developers (and LLMs) love

Get started for freeTalk to us