Mud · y6nH

Introducing Mud, my theme for Hugo (the static site generator used to create this site). That’s what it’s called for the moment, at least. Because it’s brown and not very clever. Let’s see whether it sticks.

Lightweight

The best way to make a site load fast, work on every browser, and show up properly in search engines, is to strip out anything unnecessary. So this is a theme without any JavaScript (though you can add Google Analytics and Disqus if you like, just by filling in your account details in the configuration). No images, no web fonts, no plugins, just clean HTML and CSS. It uses modern browser features, but falls back to a usable default if you’re somehow stuck in the 90s.

Modern

If you want to use Markdown inside shortcodes, the syntax looks like {{%aside%}} ... {{%/aside%}}.

If you want to disable Markdown (for code blocks, for example), use angle brackets instead of percent signs: {{<highlight python>}} … {{</highlight>}}

Mud uses HTML5 semantic elements for article, section, header, footer and so on, as you’d expect from a Hugo site. It also includes shortcodes for asides and footnotes in your content, allowing you to use Markdown syntax inside them - without them, you have to write all block elements in plain HTML.

Hugo shortcodes are templated expansions for Markdown. Hugo includes the highlight shortcode, and Mud includes shortcodes for aside, footnote, and hidebox.

Mud does code highlighting with Pygments, so that no JavaScript is necessary, and you can take advantage of Pygments' extensive library of languages.

// Here are some of the colours from the scss stylesheet:
$color_background: hsl(190, 5%, 16%);
$color_background_under: hsl(73, 10%, 11%);
$color_background_over: hsl(43, 5%, 23%);

$color_text: hsl(43, 20%, 90%);
$color_text_dim1: hsl(43, 25%, 85%);
$color_text_dim2: hsl(43, 21%, 79%);
$color_text_dim3: hsl(43, 17%, 71%);
$color_text_bright: #fff;

// Or, because Pygments supports all the cool languages, Hello World in Rust:
io::println("Hello world!");

To get the code highlighting to work, you need Python (version 2 or 3). If you have a Mac, it’s already there by default. Then it’s a quick one-liner to install Pygments:

$ pip install pygments

Then, in your Hugo site’s config, set it to use CSS classes. In YAML:

# YAML:
pygmentsUseClasses: true

# TOML:
pygmentsUseClasses = true

Hugo calls Pygments automatically during page creation, so once it’s installed you don’t have to think about it ever again.

Dark

Minimal doesn’t always mean white. White’s all very well, but we geeks and night owls appreciate the gloom of a nice dark theme. Nothing’s quite black, all the dirty greys and muted pastels are chromatically based on a small, harmonious set of hues.