Custom CSS

mdo's default page is a complete HTML5 document styled by an embedded copy of simple.css plus mdo's calmer default typography (body 1rem, h1 2.4rem, h2 2rem, h3 1.4rem). The --css flag appends your own stylesheet after those layers, so your rules win:

mdo --css my-overrides.css input.md

The cascade order is:

  1. Vendored simple.css (embedded at build time, no network access at runtime)
  2. mdo's default typography layer (assets/mdo-default-typography.css)
  3. Your --css <FILE>, if given

Restoring simple.css typography

Release archives include restore-simple-css.css for users who prefer the unmodified simple.css typography scale:

mdo --css restore-simple-css.css input.md

Restyling the theme toggle

The floating light/dark toggle button can be restyled — or hidden — from custom CSS via its #theme-toggle id:

#theme-toggle { display: none; }

Imaginative Markdown + CSS

The project site homepage dogfoods mdo by building a visual preview — a faux browser window floating over the hero image — without raw HTML embeds or iframes. The source is only normal Markdown; the window chrome is layered on through --css. The full recipe is in the faux browser window how-to.

That trick keeps the content portable and readable as Markdown while using --css to create a richer static page. It is a good example of how mdo can be used imaginatively: write semantic Markdown first, then layer presentation on top when the rendered page needs to tell a visual story.

Building the project site with mdo

The project site is generated by mdo itself:

python scripts/build-docs.py

Every page is rendered with mdo's out-of-the-box settings — the same output you get from a plain mdo file.md on your own machine. The one exception is the homepage, docs/index.md, which adds the --css docs/assets/site.css override so it can demo the faux browser window; the docs-only presentation is layered after mdo's embedded simple.css and typography defaults. See Maintaining for how the site is deployed.