Skip to main content

Documentation Index

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

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

The Craft’s visual identity is built on a small set of semantic design tokens woven through Tailwind CSS utility classes and a handful of hand-written classes in assets/main.css. Rather than using Tailwind’s default color palette, the project expresses its own dark-fantasy vocabulary through compiled utility classes in assets/main.css: deep blacks named midnight, a teal arcane accent named spell, aged paper in parchment, and a deep crimson called blood. Custom keyframe animations and composite utility classes layer on top to produce the grimoire’s parchment texture, glassmorphism panels, and glowing text effects.

​
Color Tokens

The palette is intentionally minimal. Every UI surface in The Craft maps to one of these tokens, making it straightforward to retheme the entire site by adjusting a single hex value.
TokenHexTailwind ClassUsage
midnight#0a0d14bg-midnight, text-midnightBase page background; the default body background color
midnight-darker#05070abg-midnight-darker, border-midnight-darkerDeepest surfaces, fine rule borders, nav sidebar background
midnight-lighter#0d1117bg-midnight-lighterSubtle elevated surfaces, ambient glow blobs
spell#2dd4bftext-spell, bg-spell, border-spellTeal accent — active states, glows, sigil SVG strokes, hover highlights
parchment#e8dcc4text-parchment, bg-parchmentPrimary readable text and light surface backgrounds
blood#7f1d1dtext-blood, bg-blood, border-bloodDeep red accent — error states, hover effects, decorative borders
All tokens support Tailwind’s opacity modifier syntax. For example, text-spell/80 renders the spell teal at 80% opacity, and border-spell/20 gives a very subtle teal border — both patterns are used extensively throughout the component files.

​
Custom CSS Utility Classes

Several visual effects require properties that Tailwind’s JIT engine cannot infer from class names alone. These are defined as explicit CSS classes in assets/main.css and can be applied to any element just like a Tailwind class.

​
.parchment-texture

Gives a surface the appearance of aged parchment. Sets the background to #e8dcc4, overlays an inline SVG feTurbulence noise filter at 40% opacity, sets text to near-black #1a1a1a, and adds an inset box-shadow that simulates depth and edge darkening. 
.parchment-texture {
  background-color: #e8dcc4;
  background-image: url("data:image/svg+xml,..."); /* SVG fractalNoise filter */
  color: #1a1a1a;
  box-shadow: inset 0 0 40px rgba(139, 69, 19, 0.15),
              0 10px 30px rgba(0, 0, 0, 0.8);
}

​
.text-glow

Applies a layered text-shadow that makes text appear to radiate teal arcane light. Uses two shadow stops: a stronger rgba(45, 212, 191, 0.6) close-in glow and a softer rgba(45, 212, 191, 0.3) halo. 
.text-glow {
  text-shadow:
    0 0 10px rgba(45, 212, 191, 0.6),
    0 0 20px rgba(45, 212, 191, 0.3);
}

​
.glass-panel

A dark glassmorphism surface. Combines a semi-transparent midnight-lighter background (#0d1117b3) with backdrop-filter: blur(12px) and a faint rgba(45, 212, 191, 0.15) teal border. 
.glass-panel {
  background: #0d1117b3;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(45, 212, 191, 0.15);
}
.glass-panel is used on the 404 page’s “Return to the Cover” button and on project cards. It pairs well with border-spell/30 when you want a more visible teal border.

​
Animation Utilities

Three custom keyframe animations extend Tailwind’s built-in animate-* suite:

.animate-spin-slow

Rotates an element a full 360° over 20 seconds with a linear easing. Applied to the large hexagonal sigil SVG on the 404 page and to decorative background elements.
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin 20s linear infinite;
}

.animate-pulse-glow

Pulses a drop-shadow between a bright #2dd4bf glow and a dimmer #14b8a6 glow every 2 seconds. Used on the loading sigil, interactive icons, and the spell-colored SVG elements.
@keyframes pulseGlow {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #2dd4bf);
  }
  50% {
    opacity: 0.6;
    filter: drop-shadow(0 0 4px #14b8a6);
  }
}
.animate-pulse-glow {
  animation: pulseGlow 2s cubic-bezier(.4,0,.6,1) infinite;
}

.animate-flicker

Simulates a candle flame by alternating opacity and scale transforms at quarter-second intervals over a 3-second cycle. Applied to the Candle component on the Work history timeline.
@keyframes flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  25%, 75% { opacity: 0.9; transform: scale(1.02); }
  50%       { opacity: 0.8; transform: scale(0.98); }
}
.animate-flicker {
  animation: flicker 3s infinite alternate;
}

​
Typography

The Craft uses three Google Fonts families, each with a clearly scoped semantic role. They are loaded via a @import at the top of main.css and exposed through Tailwind utility classes.
Font FamilyTailwind ClassRole
Cinzel (weights 400, 600, 700)font-cinzelHeadings, navigation labels, page titles, the 404 numeral — anything that needs gravitas
EB Garamond (regular + italic, weights 400 and 600)font-garamondBody text, descriptions, blog prose — the default body font
Pinyon Scriptfont-cursiveDecorative cursive flourishes — the footer tagline, loading fallback text, drop-cap initials
font-cursive maps to the Tailwind class name .font-cursive, not the CSS generic family cursive. The actual font-family value is Pinyon Script, cursive. Be careful not to confuse the two when authoring new components.
To change or extend these tokens, update the hex values directly in the utility classes within assets/main.css and propagate the new values to any inline Tailwind classes that reference the old color.

Build docs developers (and LLMs) love

Get started for freeTalk to us