# CSS Features Demo

Showcasing all available styles

Version

v1740503848

Updated | 2025-02-25

# 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 1.

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 subscript.

## 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.

Name | Dimensions | Position
--- | --- | ---
Boboli Obelisk | 1.41m × 1.41m × 4.87m | 43°45’50.78”N 11°15’3.34”E
Pyramid of Khafre | 215.25m × 215.25m × 136.4m | 29°58’34”N 31°07’51”E

Note that only one column is allowed to grow.

## Forms

Here are some buttons:

And inputs:

First name Age Disabled Input

### Radio & Checkboxes

Checkbox Option Radio 1 Radio 2

## 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

Click to expand

Hidden content goes here

Can contain any other elements

## 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│
    └───────┘ └───────┘ └───────┘

Example: Message passing.

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:

### Product Title

This is a description of the product with all its amazing features.

Price | $99.99
Rating | ★★★★☆

## Media with Captions

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

A sample image with caption (2024)

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

Example image alt text

### Theme-Aware Images

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

1. Pandoc understands an extended and slightly revised version of John Gruber’s Markdown syntax. See Pandoc’s Markdown for details.↩︎

Home • Blog • ©Copyright 2025 •