Back to Docs

Architecture

Technical structure of Everything

CSS Architecture

Layer System

CSS is organized in layers, loaded in order:

  1. reset.css - Normalize browser defaults
  2. variables.css - CSS custom properties (design tokens)
  3. typography.css - Base font styles
  4. animations.css - Shared keyframe animations
  5. utilities.css - Helper classes
  6. Component CSS (music-player, nav-chaos)
  7. Theme CSS (overrides variables)
  8. Page-specific CSS (inline or separate file)

Theme Override Pattern

Each theme overrides CSS variables:

.theme-hell {
  --color-bg: #0a0000;
  --color-primary: #ff3333;
  --color-text: #ffcccc;
  --font-family-heading: 'Cinzel', serif;
}

JavaScript Architecture

Module System

ES6 modules with dynamic imports for code splitting:

// Core app.js loads on every page
import { MusicPlayer } from '../components/music-player.js';
import { NavChaos } from '../components/nav-chaos.js';

// Games loaded dynamically based on page
const pageModules = {
  'rubber-duck-hunt': () => import('../games/rubber-duck-hunt.js'),
};

State Persistence

localStorage used for:

HTML Template Pattern

<body data-page="page-name" data-theme="theme-name" class="theme-[name]">
  <a href="#main" class="skip-link">Skip to content</a>
  <nav id="nav-chaos"></nav>
  <div id="music-player"></div>
  <main id="main">...</main>
  <script type="module" src="/js/core/app.js"></script>
</body>

Key Files