Skip to main content

Documentation Index

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

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

DevHaunt’s visual identity is built entirely on top of Tailwind CSS, extended with a small set of named design tokens that map directly to Halloween-themed colors. All custom tokens, font assignments, keyframe animations, and global overrides are compiled into assets/main.css and loaded on every page. Nothing in the styling system relies on inline styles or arbitrary one-off values — every design decision is expressed through token names that read like prose.

​
Color tokens

The palette uses five base colors, each available as bg-*, text-*, and border-* utilities. Opacity modifiers (e.g., text-ghost/70) work as normal Tailwind opacity variants.
TokenHexExample utilitiesUse in the UI
night#0b3a44bg-night, text-night, border-nightPage background, nav backdrop, scrollbar track
pumpkin#ff7a1abg-pumpkin, text-pumpkin, border-pumpkinHeadings, active nav links, CTA buttons, scrollbar thumb
ghost#f4f1eatext-ghost, border-ghostBody text, card borders, fog SVG fill
tombstone#5a6268bg-tombstone, border-tombstoneCard chrome, separator lines
tombstone-dark#3a4044bg-tombstone-dark, border-tombstone-darkDeeper card backgrounds
tombstone-light#7a8288bg-tombstone-light, border-tombstone-lightSubtle UI chrome
wood#3e2723bg-wood, border-woodBlog shelf surface, decorative wood accents
Text selection uses pumpkin on night: any highlighted text shows the pumpkin background with night-colored characters. This is applied globally on the root div via selection:bg-pumpkin selection:text-night in components/Layout.js.

​
Typography

Three fonts are loaded from Google Fonts via a single @import at the top of assets/main.css: 
@import "https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap";
Tailwind classFont familyRole
font-spookyCaveat BrushAll page headings, navigation labels, button text
(default)InterBody paragraphs, descriptions, form labels
font-codeJetBrains MonoCode snippets, metadata labels, archive badges
The html base styles in Tailwind’s preflight set Inter as the document default, so body text requires no extra class. Apply font-spooky to any heading element or font-code to any element that needs the monospaced treatment.

​
Custom CSS animations

Five keyframe animations are defined in assets/main.css and exposed as Tailwind animate-* utilities or direct CSS class names:

​
animate-flicker

Simulates an unstable window light by oscillating opacity between fully opaque and 40% transparent at irregular intervals. Used on the lit window of the HauntedHouse component. 
@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1;   }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999%           { opacity: 0.4; }
}
.animate-flicker {
  animation: flicker 3s linear infinite;
}

​
animate-sway

Rotates an element between −5° and +5° on a 4-second ease-in-out cycle. Used on decorative hanging signs above doors. 
@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg);  }
}
.animate-sway {
  animation: sway 4s ease-in-out infinite;
}

​
animate-pulse

The standard Tailwind pulse animation — fades opacity to 50% and back over 2 seconds on a cubic-bezier curve. Used on glowing accents and loading states. 
@keyframes pulse {
  50% { opacity: 0.5; }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

​
fog-drift (via .fog-layer)

Translates the doubled-width fog SVG layers 50% to the left over a long duration, creating seamlessly looping horizontal drift. The second fog layer runs the same animation in reverse to break up the uniformity. 
@keyframes fog-drift {
  0%   { transform: translate(0);    }
  100% { transform: translate(-50%); }
}
.fog-layer {
  animation: fog-drift 40s linear infinite;
}
.fog-layer:nth-child(2) {
  animation: fog-drift 30s linear infinite reverse;
}
The fog container uses a CSS mask to fade the fog out at the top, blending it invisibly into the page content above.

​
float (via group-hover:animate-float)

Translates an element smoothly from its resting position up 20 pixels and back on a 6-second ease-in-out cycle. Triggered by group-hover — for example, on the ghost icon in the Navigation logo when the user hovers the site title. 
@keyframes float {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-20px); }
}
.group:hover .group-hover\:animate-float {
  animation: float 6s ease-in-out infinite;
}

​
Scrollbar styling

DevHaunt replaces the browser’s default scrollbar with a themed one that matches the night/pumpkin palette: 
::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: #0b3a44; }          /* night */
::-webkit-scrollbar-thumb { background: #ff7a1a; border-radius: 5px; }  /* pumpkin */
::-webkit-scrollbar-thumb:hover { background: #e66a10; }    /* pumpkin darkened */
The custom scrollbar styles use the -webkit-scrollbar pseudo-elements, which are supported in Chromium-based browsers and Safari but not in Firefox. Firefox users will see their platform’s default scrollbar styling.

​
Global cursor override

The body selector in assets/main.css sets cursor: none globally: 
body {
  background-color: #0b3a44;
  color: #f4f1ea;
  overflow-x: hidden;
  cursor: none;
}
Interactive elements restore the pointer cursor so click targets remain obvious: 
a, button, [role="button"], input, textarea {
  cursor: pointer;
}
The visible cursor replacement is the CursorTrail component rendered inside Layout, which draws a glowing pumpkin-orange trail following the mouse position using Framer Motion.
To restore the default system cursor, remove cursor: none from the body rule in assets/main.css, remove the cursor: pointer override block below it, and delete the <CursorTrail /> line from components/Layout.js.

Build docs developers (and LLMs) love

Get started for freeTalk to us