From ce4ff3268b2bc22c60b85edd7adf690783d75e17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Wickstr=C3=B6m?= Date: Sun, 25 Aug 2024 20:36:59 +0200 Subject: [PATCH] include index.html --- .gitignore | 1 - index.html | 312 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 312 insertions(+), 1 deletion(-) create mode 100644 index.html diff --git a/.gitignore b/.gitignore index dcaf716..e69de29 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +0,0 @@ -index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..18e6d90 --- /dev/null +++ b/index.html @@ -0,0 +1,312 @@ + + + + + + + + + The Monospace Web + + + + + + + + + + + + + + + + + + + + + + + +
+

The Monospace Web

+ A minimalist design exploration + 		Versionv0.1.0
Updated2024-08-30
AuthorOskar WickströmLicenseMIT
+ + +

Introduction

+

Monospace fonts are dear to many of us. Some find them more readable, +consistent, and beautiful, than their proportional alternatives. Maybe +we’re just brainwashed from spending years in terminals? Or are we +hopelessly nostalgic? I’m not sure. But I like them, and that’s why I +started experimenting with all-monospace Web.

+

On this page, I use a monospace grid to align text and draw diagrams. +It’s generated from a simple Markdown document (using Pandoc), and the +CSS and a tiny bit of Javascript renders it on the grid. The page is +responsive, shrinking in character-sized steps. Standard elements should +just work, at least that’s the goal. It’s semantic HTML, +rendered as if we were back in the 70s.

+

I don’t take this too seriously. It’s a technical and creative +challenge and I like the aestethic. If you’d like to use it, feel free +to fork or copy the bits you need, respecting the license. I might +update it over time with improvements and support for more standard +elements.

+

The Basics

+

This document uses a few extra classes here and there, but mostly +it’s just markup. This, for instance, is a regular paragraph.

+

Look at this horizontal break:

+
+

Lovely.

+

Lists

+

This is a plain old bulleted list:

+ +

Ordered lists look pretty much as you’d expect:

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

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

+ +

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:

+
+ + +
+

Grids

+

Add the grid class to a container to divide up the +horizontal space evenly for the cells. Not 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.

+
+ +
+

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

Media

+

Media objects are supported, like images and video:

+
+A room in an old French castle (2024) + +
+
+ + +
+

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

+

Discussion

+

That’s it for now. I’ve very much enjoyed making this, pushing my CSS +chops and having a lot of fun with the design. If you like it or even +decide to use it, please let me +know.

+

Join the discussion in any of the following threads:

+ +
+ + +