Semantic CSS for Pandoc

The goal of a series of attempts here is to present the HTML output of Pandoc in nicely formatted HTML using various Semantic CSS frameworks.

water.css

The easiest semantic css styling out of the box for Pandoc appears to be water.css, what you see on this page itself.

pandoc index.md -o index.html -s --css=https://cdn.jsdelivr.net/npm/water.css@2/out/water.css

See also water.html for a full render of the Pandoc manual.

Element.css

Element.css is from Neocities. See example.

basic.css

Basic.css calls itself Classless CSS Starter File.

You can see basic-css.html for an HTML produced by applying the following command:

pandoc basic-css.md -o basic-css.html -s --css=/css/basic.min.css

However the basic needs a bit of extra-CSS to add margins to the side:

body {
    margin: 0 auto;
    width: 60%;
    text-align: left;
    padding: 0 20px;
}

section>section {
    color: #fff;
    background-color: var(--c1);
    padding: 15px;
    margin: 10px 8px 10px 8px;
    text-align: center;
}

@media (max-width: 481px) {
    body {font-size: 18px; width:98%}
    section,article {flex:none; width:100%; margin-left: 0;}
}

I have saved this above as pandoc-basic-shim.css, so that I can get the output in one go like this:

pandoc basic-css.md -o basic-css.html -s --css=https://www.btbytes.com/css/pandoc-basic-shim.css

terminal css

Terminal CSS – “A modern and minimal CSS framework for terminal lovers.”.

You can see the rendered example here. The command to generate that HTML was:

pandoc terminal-css.md -o terminal-css.html --css=https://www.btbytes.com/css/terminal.min.css

You can also download/link the CSS from the homepage of Terminal CSS as linked above.

This itself is not enough to add padding to the body, so lets add a shim (css file).

pandoc terminal-css.md -o terminal-css.html --css=https://www.btbytes.com/css/terminal.min.css --css=https://www.btbytes.com/css/terminal-shim.css

Missing.CSS

See missing.html that applies Missing.CSS to a markdown file rendered to HTML by Pandoc.

Wickstorm

See wikstorm.html that applies wickstorm.css (use of Inter for regular text and IBM Plex Mono for code text).

Element.css

See element.html that applies Element.css from Neocities. At the moment, I am unable to see their special tag based grid system working.

tufte.css

tufte.html; I wouldn’t recommend this because I don’t have the font files in the right place, yet.