Navigation

First post

How we applied the parchment redesign to Markdown-powered pages.

First post

How we applied the parchment redesign to Markdown-powered pages.

First post

This post documents the design lift: from adding GitHub-flavoured Markdown styles to threading the parchment canvas through every PHP layout.

Highlights

  • New typography pairing: Agbalumo for headlines, Onest for body copy and UI labels.
  • GitHub-friendly Markdown skin for tables, task lists, and code blocks.
  • Slot-driven heroes and CTAs so pages stay configurable via front matter.

What changed under the hood

Markdown supports bold, italic, lists, links, and inline code like echo "hi";. With the redesign, those elements inherit:
  • Inked underlines on hover.
  • Softer list bullets and task list checkboxes.
  • Parchment-backed code blocks with consistent padding.

Media examples

Images with Markdown:
Primary hero illustration
The primary hero illustration framed by parchment styling

Or with a caption:

Hero again
Same image with the new parchment frame and figcaption treatment.

Quick callouts

  • Keep images in /public/images/ so they benefit from the shared sizing and borders.
  • Update lastmod when you refresh content—the sitemap and feeds use it.
  • Reference redesign/markdown-demo.html whenever you need to check Markdown tokens in isolation.

Quick answers

Where should I declare metadata for a post?

Use the front matter block at the top of the Markdown file—add title, description, date, author, keywords, and faq to power structured data.

How do media assets stay optimized?

Keep images under /public/images, reference them with Markdown or ``, and the templates handle captions and lazy loading.