Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-webring/llms.txt

Use this file to discover all available pages before exploring further.

The visual identity of Y2K Webring is encoded in Tailwind utility classes defined in assets/main.css. Tailwind’s @layer system extends the default palette with Y2K-specific tokens, so every token is available anywhere you’d use a normal Tailwind color, border, or font utility. Here’s what each token does and where it appears in the UI.

​
Color Palette

Seven custom color tokens cover the full Y2K aesthetic — neon accents on a deep-violet base and pure black background.
TokenHexRGBUsed For
y2k-magenta#ff00aa255 0 170Primary accent, nav title, links
y2k-lime#aeff00174 255 0Active nav, marching-ants border, CTAs
y2k-cyan#00e5ff0 229 255Secondary accent, skill tags
y2k-violet#14001f20 0 31Panel backgrounds, dark fills
y2k-lavender#e9d5ff233 213 255Body text
y2k-purple#c026d3192 38 211Mid-tone accent, scrollbar track border
y2k-black#0000000 0 0True black backgrounds
The page background is pure y2k-black with a fixed radial-gradient overlay that fades from y2k-violet at the top centre to transparent — giving every page a deep-space glow without a separate component.

​
Border Utilities

Three custom border classes combine a solid 2px border with an offset drop shadow to produce the chunky, tactile card borders the Y2K aesthetic is known for.

​
.border-chunky-magenta

.border-chunky-magenta {
  border-width: 2px;
  border-color: rgb(255 0 170);
  box-shadow: 4px 4px 0px 0px rgba(255, 0, 170, 0.5);
}
Used on primary cards, project panels, and any element that should demand attention.

​
.border-chunky-lime

.border-chunky-lime {
  border-width: 2px;
  border-color: rgb(174 255 0);
  box-shadow: 4px 4px 0px 0px rgba(174, 255, 0, 0.5);
}
Used on positive-action elements, CTAs, and “shipped” project indicators.

​
.border-chunky-cyan

.border-chunky-cyan {
  border-width: 2px;
  border-color: rgb(0 229 255);
  box-shadow: 4px 4px 0px 0px rgba(0, 229, 255, 0.5);
}
Used on secondary informational panels and skill category headers.

​
Marching Ants Border

The .marching-ants-border class creates an animated dashed border without any actual CSS border property. Instead, four background-image linear gradients are composited to fake individual dashes on each of the four sides: 
.marching-ants-border {
  background-image:
    linear-gradient(90deg, #aeff00 50%, transparent 50%),  /* top */
    linear-gradient(90deg, #aeff00 50%, transparent 50%),  /* bottom */
    linear-gradient(0deg,  #aeff00 50%, transparent 50%),  /* left */
    linear-gradient(0deg,  #aeff00 50%, transparent 50%);  /* right */
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size:
    10px 2px, 10px 2px,   /* horizontal dashes: 10px wide, 2px tall */
    2px 10px, 2px 10px;   /* vertical dashes: 2px wide, 10px tall */
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: marching-ants 1s linear infinite;
}

@keyframes marching-ants {
  from { background-position: 0 0, 0 100%, 0 0, 100% 0; }
  to   { background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px; }
}
The keyframe shifts each gradient’s background-position so the dashes appear to travel clockwise around the element — the classic “marching ants” selection effect. It runs at 1s linear infinite. This class is applied to the active nav item in the left sidebar.

​
Typography

Three Google Fonts cover every typographic role in the interface, loaded via a single @import at the top of main.css.
FontTailwind VariableUse Case
VT323font-displayHeadings (h1–h6), nav labels, panel titles
Outfitfont-bodyBody copy, project descriptions, bio text
Caveatfont-marginaliaTooltip notes, hand-written annotations
VT323 is applied globally to all heading elements (h1–h6) via a base style in main.css. Outfit is set as the body font family. Use font-marginalia explicitly on elements that should read as informal, handwritten annotations.

​
Drop Cap

Writing posts get a .drop-cap treatment on their first letter: 
.drop-cap:first-letter {
  float: left;
  margin-right: 0.75rem;
  margin-top: 0.25rem;
  font-family: VT323, monospace;
  font-size: 3rem;
  line-height: 1;
  color: rgb(255 0 170); /* y2k-magenta */
}
The first letter is floated left, rendered in VT323 at 3rem, and coloured in y2k-magenta. Apply the drop-cap class to the wrapping <p> of any post’s opening paragraph to activate it.

​
Custom Scrollbar

The global scrollbar is styled to match the Y2K palette using ::-webkit-scrollbar rules: 
::-webkit-scrollbar        { width: 12px; }
::-webkit-scrollbar-track  { background-color: rgb(20 0 31); border-left-width: 1px; border-color: rgb(192 38 211); }
::-webkit-scrollbar-thumb  { background-color: rgb(255 0 170); border-width: 2px; border-color: rgb(20 0 31); }
::-webkit-scrollbar-thumb:hover { background-color: rgb(174 255 0); }
  • Track — y2k-violet fill with a y2k-purple left border to frame the scrollbar channel.
  • Thumb — y2k-magenta fill, inset with a 2px y2k-violet border so the thumb doesn’t bleed into the track.
  • Thumb on hover — shifts to y2k-lime for a satisfying neon highlight when the user interacts with the scrollbar.
Use these tokens via standard Tailwind utility classes in any new components you add — for example text-y2k-magenta, border-y2k-lime, bg-y2k-violet, or bg-y2k-violet/30 for a semi-transparent panel fill. All tokens and their opacity variants are already available because they are defined in main.css as Tailwind utilities; no additional tailwind.config.js changes are needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us