Blog Structure Diagrams

Figure 1. Site architecture — Astro layout hierarchy and content flow
BaseLayout.astro
Theme System
  • Light / Dark toggle
  • CSS custom properties
  • Per-post palette accents
Content Layer
  • MDX collections (Zod)
  • Generated TOC & citations
  • Shiki syntax highlighting
Header.astro — fixed 54px logo · nav · theme toggle · mobile menu
slot / main content
/ Home — hero, posts list, project cards
/blog Writing index — chronological list
/blog/[slug] BlogPostLayout.astro — article + TOC + sidenotes
/projects Project grid with writeup links
/portrait About page
Footer.astro name · year · RSS · GitHub
Figure 2. Individual post layout — three-column responsive grid
Post Heading
Post Title (Lora, 30px, serif)
Author • Date
Cover Image / Video (optional)
border-radius: 0
post-content-shell (CSS Grid)
Left TOC 210px · sticky · scroll-spy
  • Introduction
  • Background
  • Main Result
  • Experiments
  • Conclusion
Neutral tones only. Active marker uses var(--fg), not accent.
Article Content 660px max-width
Tags default: fg3 · hover: accent
MDX Body links inherit · hover: accent
Code Block bg_code · Shiki · copy button
Figure caption strong → accent
Heading anchor # · hover: accent
Citation Block plain-text + BibTeX
Paginator hover underline → accent
Sidenotes 230px · margin notes
  • 1 A clarifying remark
  • 2 Reference or caveat
  • 3 Tangential insight
Superscript numbers use var(--fg4). No accent.
Palette Accent --palette-accent usage
  • Content link hover
  • Heading anchor hover
  • Post tag chip hover
  • Paginator hover underline
  • Figure caption strong

TOC active marker · sidenote numbers · heading text · body text remain neutral.