tylergaw.com Site Architecture

Design direction reference for Dungeonbooks and DungeonArts.org. See tyler-gaw for contact info.

CSS as the creative medium: ~5300 lines of hand-written CSS, only ~3K lines of JS (just Prism.js for syntax highlighting). No frameworks, no Tailwind.
Design tokens architecture: clean separation into tokens/color.css, tokens/grid.css, tokens/typography.css plus per-component and per-page CSS modules
Color scheme system: CSS custom properties with prefers-color-scheme media query + data-user-color-scheme attribute for manual override. Swaps accent colors, background noise texture, and text colors between modes.
Responsive grid: single grid-template-columns: repeat(var(--num-cols, 1), 1fr) that scales from 1 to 11 columns across 5 breakpoints
View Transitions API: opted in with @view-transition { navigation: auto; } for MPA page transitions, with default animations disabled so custom ones can be added per-page
SVG noise textures tiled as background images for depth
Each project section has its own color palette and visual identity via scoped CSS
Typography: Proto Grotesk (4 weights) via @font-face with font-display: swap

Eleventy (0.11), Netlify, browser-native CSS, Nunjucks templates, Prettier + Husky for formatting.

Source: github.com/tylergaw/tylergaw.com
Actively maintained since 2011, site since 2006
Recently added llms.txt, robots.txt, humans.txt, and raw markdown versions of all blog posts

Quartz 4