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 paper.css, what you see on this page itself.

pandoc index.md -o index.html -s --css=https://www.btbytes.com/css/water.min.css

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

tufte.css

tufte.html

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