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