Colophon

Every detail here was a deliberate choice. This page covers the building blocks that shaped this website; for a deeper dive into the reasoning behind them, see my first issue.

I went with Libre Caslon Condensed for headings, Manrope for body text, and Geist Mono for code.

I wanted multiple ways to move through an issue, so I added keyboard shortcuts early on: s / e to jump to the start or end of an article, p / n to move between previous and next headings. Pressing ? opens a legend listing them.

On desktop, the layout follows a three-column structure that centers the content. As the viewport narrows, the table of contents stays fixed while the content stretches to fill the remaining space—a two-column layout that preserves navigation before collapsing into a single column on mobile.

The site is built with Next.js and styled with Tailwind CSS. Each issue is an MDX file —prose mixed with custom React components, rendered at runtime via next-mdx-remote. The content is parsed with remark to extract headings for the table of contents, calculate reading time, and wrap heading groups into navigable sections. rehype-slug generates anchor IDs using the same slugging logic as the table of contents, so deep links and scroll tracking stay in sync.

gray-matter pulls YAML frontmatter—title, subtitle, publication date, draft status, and console messages—into structured metadata that feeds the post list, Open Graph images, and SEO tags. Code blocks use Shiki with a customized palette and hand-written transformers for inline annotations, diff markers, and filename headers.

motion handles the animations—image zoom with spring physics, icon transitions in the copy button, the active-heading indicator in the table of contents, and presence-aware enter/exit for modals. On mobile, web-haptics adds tactile feedback to interactions.