Typeset

Typeset 0.3.0

2 min read

Typeset 0.3.0 brings sidenotes to documentation pages, extends code blocks and tables into margins, and unifies the layout between blog posts and documentation.

Sidenotes in Documentation

The documentation layout now supports sidenotes and margin notes, just like blog posts. This required rethinking the grid structure.

Four-Column Layout

Documentation pages now use a four-column grid:

  1. Navigation sidebar (240px) - Section navigation tree
  2. Main content (65ch) - Article body
  3. Sidenote margin (200px) - Space for margin notes
  4. Table of contents (180px) - Page headings

Previously, sidenotes in docs would overlap with the TOC sidebar. The new layout gives them dedicated space.

Responsive Behavior

The columns collapse progressively as the viewport narrows:

  • Above 1200px - Full four-column layout with visible sidenotes
  • 1100-1200px - Sidenotes collapse to inline toggles, TOC stays as sidebar
  • 900-1100px - TOC moves inline above content
  • Below 900px - Navigation becomes a slide-out overlay

Extended Code Blocks and Tables

Code blocks and tables now extend slightly into the sidenote margin in documentation, matching the blog behavior. This provides more horizontal space for wide content while maintaining the readable line length for prose.

The extension is controlled by the --content-extend variable (13ch by default). When sidenotes collapse at narrower viewports, code blocks and tables return to 100% width.

Layout Consistency

Blog posts and documentation now share the same content width of 65 characters. Previously, docs used a narrower 55ch width to fit between the two sidebars. With the new four-column layout, both content types have equal room to breathe.

Cleaner Styling

Vertical border lines have been removed from the documentation layout. The horizontal rule under the docs section title remains, but the vertical separators between columns are gone for a cleaner look.

The taxonomy label on tag pages is now clickable, linking back to the full tag list.

Documentation subsections are now properly sorted by weight. Previously, nested sections could appear in an inconsistent order. The navigation tree now respects the weight field in frontmatter at all nesting levels.

These changes make documentation pages first-class citizens alongside blog posts. See the sidenotes documentation for examples of margin notes in action.