v2026.08.31
MDX to Markdown, Sass, and Takumi
Published Aug 31 · 2 min readTable of Contents
Website
I decided to use Sass instead of vanilla CSS because it afforded me some tooling that would be perfectly useful for this site’s theming and design system needs. I was particularly interested in not having to re-declare CSS variables for [data-theme="dark"] and @media (prefers-color-scheme: dark) every time a new theme token is added. Typography is much better with Sass too.
I also found out for the first time about CUBE CSS, which is already very similar to how I do my CSS initially but there are certain stylistic practices I wanted to adopt. I am slowly refactoring my styles to follow this methodology loosely.
I changed the base font from Space Grotesk to Inter, and from .ttf to .woff2. Subsequently, I changed my OpenGraph image renderer from Satori to Takumi because Satori does not support .woff2 fonts.
I added a Scroll to top button for convenience.
Oh, and I changed the header design again because I can’t decide on a proper header. Same goes with the footer. Both of these will very likely change in the future.
Internal tooling
I added support for parsing MDX to simple Markdown when publishing articles to the Atmosphere since I am using the at.markpub.markdown lexicon for my blog content and at the same time I needed custom components to present my content a certain way (like PulloutQuote similar to Substack’s Pullout Quote).
I removed rkey from the blog post frontmatter schema (I was previously manually adding an rkey every time the relevant blog post is published) and instead the update-document script retrieves this from the records file when needed. The records files gets automatically appended whenever a record is created.