CSS Features Demo

Pandoc Monospace Web

This is a simple Pandoc based Static Site Generator based on the Monospace Web project by Oskar Wickström.

1. Install pandoc
2. Drop Markdown files in the src directory
3. Execute the convert.sh script
4. Deploy the build directory to your static site host

Given that the site generator consits of a single bash script, single html template and a css file, it’s easy to customize.

All changes to the original project are unlicensed (C0). The Monospace Web is licensed under the MIT license.

This is a demo page showcasing all the available styles for the Pandoc Monospace Web. All standard Pandoc markdown features are supported ¹.

See the footer for “blog” implementation idea.

• Github repository: frainfreeze/the-monospace-web-pandoc
• Original author GitHub: owickstrom/the-monospace-web

Typography

H1 Heading (Uppercase)

H2 Heading (Uppercase)

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Regular paragraph with bold text, italic text, and inline code. Here’s a link to somewhere.

Text with a sub_script.

Horizontal Rules

Default horizontal rule:

Thin variant:

Lists

Unordered list:

• Item one
• Item two
• Item three
  • Nested item
  • Another nested item

Ordered list:

1. First item
2. Second item
   1. Nested numbered
   2. Another nested
3. Third item

Tree view:

• /dev/nvme0n1p2

  • usr
    • local
      
    • share
      
    • libexec
      
    • include
      
    • sbin
      
    • src
      
    • lib64
      
    • lib
      
    • bin
      
    • games
      • solitaire
      • snake
      • tic-tac-toe
    • media
      
  • media
    
  • run
    
  • tmp

Tables

We can use regular tables that automatically adjust to the monospace grid. They’re responsive.

Note that only one column is allowed to grow.

Forms

Here are some buttons:

And inputs:

Radio & Checkboxes

Grids

Add the grid class to a container to divide up the horizontal space evenly for the cells. Note that it maintains the monospace, so the total width might not be 100%. Here are six grids with increasing cell count:

If we want one cell to fill the remainder, we set flex-grow: 1; for that particular cell.

Code Blocks

Inline code: const example = "hello world";

Fenced code block:

function demo() {
  return {
    hello: "world",
    number: 42
  };
}

Blockquotes

This is a blockquote It can span multiple lines And can contain formatted text

Nested blockquotes > Are also possible >> And can go deeper

Details/Summary

ASCII Art & Diagrams

We can draw in <pre> tags using box-drawing characters:

╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

To have it stand out a bit more, we can wrap it in a <figure> tag, and why not also add a <figcaption>.

┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │    
    │         │  msg 1  │    
    │         │────────►│    
    │         │         │    
    │  msg 2  │         │    
    │────────►│         │    
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

Let’s go wild and draw a chart!

                      Things I Have
                                              
    │                                     ████ Usable
15  │
    │                                     ░░░░ Broken
    │
12  │             ░            
    │             ░            
    │   ░         ░              
 9  │   ░         ░              
    │   ░         ░              
    │   ░         ░                    ░
 6  │   █         ░         ░          ░
    │   █         ░         ░          ░
    │   █         ░         █          ░
 3  │   █         █         █          ░
    │   █         █         █          ░
    │   █         █         █          ░
 0  └───▀─────────▀─────────▀──────────▀─────────────
      Socks     Jeans     Shirts   USB Drives

Product Cards

Product cards are useful for displaying items with images, descriptions, and actions:

Media objects are supported, like images and video with captions:

They extend to the width of the page, and add appropriate padding in the bottom to maintain the monospace grid.

Theme-Aware Images

Images can adapt to light and dark themes (convert theme using lightbulb icon in the footer or system settings):