Skip to main content

Documentation Index

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

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

Mystery Haunting’s entire visual identity — from the teal ghost glow to the bone-white body text — is driven by Tailwind CSS. All color tokens, font families, and custom utilities are defined in tailwind.config.js at the root of the source repository, giving you a single place to retheme the site without touching individual components.
The distributed GitHub repository contains only the compiled output of Mystery Haunting (assets/main.js, assets/main.css, components/*.js, pages/*.html). It does not include tailwind.config.js, package.json, a src/ directory, or any other source files needed to run a dev server. The code examples on this page are reference templates showing what the source configuration looks like — they are not files you can edit in the distributed repo. To apply these theming changes, you must first obtain or fork the original source project and work from there.

​
Color Palette

The project defines four semantic color tokens that are used throughout every page. Replace any of them in tailwind.config.js to cascade your change across the entire site.
TokenDefault ValueHow to Change
ghost-teal#2dd4bfReplace in tailwind.config extend.colors
pumpkin#f97316Replace in tailwind.config extend.colors
spooky-black#0a0a0aReplace in tailwind.config extend.colors
bone#f5f5f4Replace in tailwind.config extend.colors
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'ghost-teal': '#2dd4bf',  // Change to your primary color
        'pumpkin': '#f97316',      // Change to your secondary color
        'spooky-black': '#0a0a0a', // Page background
        'bone': '#f5f5f4',         // Text color
      }
    }
  }
};

​
Typography

Two custom font families are registered in the Tailwind config and used across the site:
  • font-spooky — A decorative serif used for all major headings and page titles. Swap this for any display or gothic typeface that fits your brand.
  • font-mono — A monospace font used for labels, metadata, and navigation items.
fontFamily: {
  spooky: ['YourSpookyFont', 'serif'],
  mono: ['JetBrains Mono', 'monospace'],
}
Import your font via a <link> tag in index.html or via an @import rule at the top of your CSS file, then reference the same font-family name in the Tailwind config. Tailwind only maps the utility class to the name — the actual font file must be loaded separately.

​
Glow Effects

Mystery Haunting uses Tailwind’s arbitrary value syntax to apply neon glow effects without defining custom utilities for every variation:
  • shadow-[0_0_100px_#2dd4bf] — A wide box-shadow bloom used on key UI panels and containers.
  • drop-shadow-[0_0_15px_#2dd4bf] — A tighter drop-shadow applied to SVG icons and floating elements.
The text-glow-teal class is a custom Tailwind plugin class that applies a CSS text-shadow — a property Tailwind does not support natively. It is defined inside the plugins array in tailwind.config.js. To change the glow color, locate the plugin entry and update the text-shadow value to match your new primary color.

​
Rebuilding After Changes

After editing tailwind.config.js, run the build command to recompile the stylesheet: 
npm run build
Changes to tailwind.config.js, fonts, or color tokens only take effect after running npm run build in the source project. The assets/main.css and assets/main.js files in the distributed repo are compiled outputs — editing them directly is not recommended and any manual edits will be overwritten the next time you build from source.

Build docs developers (and LLMs) love

Get started for freeTalk to us