v2026.08.31

MDX to Markdown, Sass, and Takumi

Table 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.

Originally published Aug 31

Interested in working with me?
Let's talk!

E-mail me at RiyanaGueco@gmail.com
or through any of the following: