Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retro-cosmic-arcade/llms.txt

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

The Footer component lives at the bottom of every page in Retro Cosmic Arcade and does two jobs: it displays a row of classic 88×31 pixel web badges and provides an interactive CRT scanline toggle that applies a full-viewport scan-line overlay to the entire site. It accepts no props and manages its own internal state.

​
Usage

Drop <Footer /> once at the bottom of each page layout, after all main content: 
import Footer from "./components/Footer";

export default function MyPage() {
  return (
    <>
      <WebringNav />
      <main className="max-w-5xl mx-auto px-4">
        {/* page content */}
      </main>
      <Footer />
    </>
  );
}
The Footer has no props. All behavior — badge rendering and scanline toggling — is managed internally via useState and useEffect.

​
CRT Scanline Toggle

The Footer initialises a scanlines boolean state that defaults to true (scanlines ON). A useEffect hook watches this value and adds or removes the CSS class scanlines-active from document.body on every change. 
const [scanlines, setScanlines] = useState(true); // ON by default

useEffect(() => {
  if (scanlines) {
    document.body.classList.add("scanlines-active");
  } else {
    document.body.classList.remove("scanlines-active");
  }
}, [scanlines]);
When scanlines-active is present on <body>, external CSS rules can target body.scanlines-active to apply additional global effects. Separately — and independently driven by the same state boolean — the Footer component conditionally renders a fixed, full-viewport <div className="scanlines"> overlay directly in its JSX at z-40. Both the body class and the overlay div are added/removed together whenever the toggle state changes.

​
CSS Definition

The scan-line visual is produced by a repeating linear gradient defined in assets/main.css: 
.scanlines {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
}
Every 4 px tall “row” is split: the top half is transparent and the bottom half is a 20%-opacity black band, creating the illusion of classic CRT phosphor lines. pointer-events: none ensures the overlay never blocks clicks or hover events on page content.
The toggle button label reads [ Toggle CRT Scanlines: ON ] or [ Toggle CRT Scanlines: OFF ] and is styled with text-y2k-cyan underline hover:text-y2k-magenta. Users can turn scanlines off for a cleaner reading experience.

​
Toggle Behavior Summary

1

Page loads

scanlines initialises as true. useEffect fires and adds scanlines-active to document.body. At the same time, the JSX conditional {scanlines && <div className="scanlines ...">} renders the fixed full-viewport overlay div inside the footer.
2

User clicks the toggle button

setScanlines(!scanlines) flips the state to false. useEffect re-runs, removing scanlines-active from document.body. The JSX conditional simultaneously removes the overlay div from the DOM.
3

User clicks again

State flips back to true. The class is re-added and the overlay reappears.

​
Retro 88×31 Badges

The Footer renders three classic 88×31 web badges — a staple of late-1990s/early-2000s personal home pages. Each badge is sized with Tailwind’s h-[31px] w-[88px] to match the canonical badge dimensions.

BEST VIEWED IN NETSCAPE

Background: black (bg-black)
Text: lime (text-y2k-lime)
A tongue-in-cheek nod to the browser wars of the 1990s.

HTML 4.0 VALID!

Background: dark blue (bg-blue-900)
Text: white (text-white)
Parodies the W3C HTML validation badges that proud webmasters once displayed.

ANTI-BOOTSTRAP

Background: magenta (bg-y2k-magenta)
Text: black (text-black)
A playful dig at the ubiquity of CSS frameworks — ironic given the site uses Tailwind.
The badge text is hardcoded in JSX. If you want to add your own custom badge (e.g. “MADE WITH VITE”), duplicate the div block inside the badges container and apply the same h-[31px] w-[88px] sizing with your own background and text colour classes.

​
Footer Text

Below the badges, the footer renders two lines of flavour copy in text-y2k-silver: 
Made with ♥ and questionable life choices.
Best viewed in a browser made after 2010.
The first line uses the full font-vt323 text-lg size; the second uses text-sm for a subtle typographic hierarchy.

​
Styling Reference

Tailwind ClassPurpose
mt-16 border-t-2 border-y2k-cyanTop border separating footer from page content
bg-y2k-panelDark panel background consistent with the site’s Y2K palette
font-vt323 text-lgVT323 monospace font at large size throughout the footer
h-[31px] w-[88px]Canonical 88×31 pixel badge dimensions
fixed inset-0 z-40 pointer-events-noneFull-viewport scanline overlay that sits above content but below modals

Build docs developers (and LLMs) love

Get started for freeTalk to us