Title

The Monospace Web

Author

Shankar Murralitharan

Written

2025-01-10

Category

Webdesign

Read

3 min

Introduction

I came across an interesting post in hacker news that piqued my attention, titled “The Monospace web”. It is a self explanatory blog post where the author Oskar Wickström wrote about how he created a webpage with monospace font and aligned to a grid.

It was a beautiful piece of work and I wanted to create my own blog using the design. I have only used hugo and jekyll SSG and since hugo was the popular of the two I decided to go with it.

I created this Monolog theme for Hugo SSG. I named it monolog since its meaning rang true to the inteded use for the theme in my personal blog where I rant about whatever I want. Also the word has “mono” in it, as in monospace.

So in this post I am gonna showcase the styling ability of the theme. Check out the source code for this blog at https://github.com/shankar/shankar

The Basics

The post is made entirely of markdown with shortcodes for elements or styling not supported by markdown

Look at this horizontal break using shortcode :

Lovely. We can hide stuff in the <details> element.

This is a plain old bulleted list:

• Banana
• Paper boat
• Cucumber
• Rocket

Ordered lists look pretty much as you’d expect:

1. Goals
2. Motivations
   1. Intrinsic
   2. Extrinsic
3. Second-order effects

It’s nice to visualize trees. This is a regular unordered list with a tree class:

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

Code block

Code blocks are automatically highlighted thanks to hugo using chroma. We just have to provide the language used.

1const std = @import("std");
2
3pub fn main() void {
4    std.debug.print("hello world !!\n", .{});
5}

or if we require filename for the the codeblock we can use file shortcode like this:

1#include <stdio.h>
2int main() {
3   // printf() displays the string inside quotation
4   printf("Hello, World!");
5   return 0;
6}

Terminal

If we need to show some commandline output we can make use of the output shortcode.

$ brew update
==> Updating Homebrew...
Already up-to-date.
$ su -
# █

ASCII Drawings

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

Media

Media objects are supported, like images and video:

Discussion

If you are wondering what color scheme I am using, its catppuccin latte for light scheme and catppuccin mocha for dark scheme That is all for now folks. As I work futher on the theme ill update this post to showcase more elements.

I thank Oskar Wickström for kindling my interest in monospace web.

• monospace
• blogging