style: apply style guide fonts, colours, and readability fixes #31

2026-03-03T17:48:37-08:00

hikari commented

2026-03-03 17:48:37 -08:00

Summary

Replaces custom "Vampyr" font with style guide fonts (Griffy, Kalam, Creepster, Henny Penny)
Fixes illegible tagline, search placeholder, search results, shortcut badge, theme dropdown, and active sidebar item across light and dark modes
Applies witchy code themes for light and dark mode
Fixes invalid env language in code blocks (replaced with sh)
Fixes invalid message aside icon in contact page (replaced with star)

✨ This PR was created with help from Hikari~ 🌸

## Summary - Replaces custom "Vampyr" font with style guide fonts (Griffy, Kalam, Creepster, Henny Penny) - Fixes illegible tagline, search placeholder, search results, shortcut badge, theme dropdown, and active sidebar item across light and dark modes - Applies witchy code themes for light and dark mode - Fixes invalid `env` language in code blocks (replaced with `sh`) - Fixes invalid `message` aside icon in contact page (replaced with `star`) ✨ This PR was created with help from Hikari~ 🌸

hikari added 14 commits 2026-03-03 17:48:38 -08:00

style: update fonts to match style guide 1748b26b7b

Replaces the custom Vampyr font with the standard Google Fonts from the NHCarrigan style guide. Assigns Griffy to headings, Kalam to body, Creepster to .witchy-accent, and Henny Penny to .mystical-text.

fix(style): improve hero tagline contrast 1396212d2e

Targets the Starlight hero tagline element to use the primary colour variable, ensuring readable contrast in both light and dark modes.

fix(style): improve search placeholder contrast 1224d47218

Targets the Starlight search button and dialog input placeholder to use the primary colour variable for readable contrast in both light and dark modes.

fix(style): improve search dialog contrast 99aadc3987

Overrides Pagefind UI CSS variables and targets the result excerpt directly to ensure readable text contrast in both light and dark modes.

fix(style): fix illegible theme select dropdown in light mode 3fcbc5d7b4

Targets the select and option elements within starlight-theme-select to apply the primary colour and background, preventing white-on-white text in the dropdown.

fix(style): fix dark mode sidebar gap by using page-level background c729fa8a60

Applies the dark translucent background to the .page element itself rather than individual sidebar/panel elements, ensuring full-height coverage with no gaps when scrolling.

fix(style): give header a solid background to hide scrolling content ff8b695118

Sets an opaque theme-appropriate background on the header so page content no longer shows through it when scrolling.

style: update code themes to witchy palette be87acfe7d

Replaces the old sakura pink theme with a witch-palette theme for both light and dark modes, using the same colour variables as the site's CSS for consistency.

fix(content): replace invalid aside icon in contact page 99cd803e58

Replaces the unsupported 'message' icon with the valid 'star' icon across all Preferred Method asides.

fix(content): replace invalid env language in code blocks f6c79d0bd3

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(style): fix illegible search shortcut badge 897b19b60c

fix(style): fix illegible active sidebar item in dark mode e18eb9dec6

fix(style): fix illegible theme dropdown options in dark mode 709cd1f528

fix: make background less transparent

Node.js CI / CI (pull_request) Successful in 1m10s

Details

Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m20s

Details

6a92edf04e

naomi merged commit 3789116d1f into main

2026-03-03 17:54:54 -08:00

naomi deleted branch feat/style

2026-03-03 17:54:54 -08:00

naomi referenced this issue from a commit

2026-03-03 17:54:55 -08:00

style: apply style guide fonts, colours, and readability fixes (#31)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: nhcarrigan/docs#31