mirror of
https://github.com/frainfreeze/the-monospace-web-pandoc
synced 2025-12-29 18:49:50 -08:00
include index.html
This commit is contained in:
Oskar Wickström
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1 +0,0 @@
|
|||||||
index.html
|
|
||||||
|
|||||||
312
index.html
Normal file
312
index.html
Normal file
@@ -0,0 +1,312 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<meta name="author" content="Oskar Wickström" />
|
||||||
|
<meta name="dcterms.date" content="2024-08-30" />
|
||||||
|
<title>The Monospace Web</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="reset.css" />
|
||||||
|
<link rel="stylesheet" href="index.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table class="header">
|
||||||
|
<tr>
|
||||||
|
<td colspan="2" rowspan="2" class="width-auto">
|
||||||
|
<h1 class="title">The Monospace Web</h1>
|
||||||
|
<span class="subtitle">A minimalist design exploration</span>
|
||||||
|
</td>
|
||||||
|
<th>Version</th>
|
||||||
|
<td class="width-min">v0.1.0</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Updated</th>
|
||||||
|
<td class="width-min">2024-08-30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="width-min">Author</th>
|
||||||
|
<td class="width-auto"><cite>Oskar Wickström</cite></td>
|
||||||
|
<th class="width-min">License</th>
|
||||||
|
<td>MIT</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<label class="debug-toggle-label"><input type="checkbox" class="debug-toggle" /> Debug mode</label>
|
||||||
|
<nav id="TOC" role="doc-toc">
|
||||||
|
<h2 id="toc-title">Contents</h2>
|
||||||
|
<ul class="incremental">
|
||||||
|
<li><a href="#introduction" id="toc-introduction">Introduction</a></li>
|
||||||
|
<li><a href="#the-basics" id="toc-the-basics">The Basics</a></li>
|
||||||
|
<li><a href="#lists" id="toc-lists">Lists</a></li>
|
||||||
|
<li><a href="#tables" id="toc-tables">Tables</a></li>
|
||||||
|
<li><a href="#forms" id="toc-forms">Forms</a></li>
|
||||||
|
<li><a href="#grids" id="toc-grids">Grids</a></li>
|
||||||
|
<li><a href="#ascii-drawings" id="toc-ascii-drawings">ASCII
|
||||||
|
Drawings</a></li>
|
||||||
|
<li><a href="#media" id="toc-media">Media</a></li>
|
||||||
|
<li><a href="#discussion" id="toc-discussion">Discussion</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h2 id="introduction">Introduction</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
<p>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
|
||||||
|
<em>just work</em>, at least that’s the goal. It’s semantic HTML,
|
||||||
|
rendered as if we were back in the 70s.</p>
|
||||||
|
<p>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.</p>
|
||||||
|
<h2 id="the-basics">The Basics</h2>
|
||||||
|
<p>This document uses a few extra classes here and there, but mostly
|
||||||
|
it’s just markup. This, for instance, is a regular paragraph.</p>
|
||||||
|
<p>Look at this horizontal break:</p>
|
||||||
|
<hr>
|
||||||
|
<p>Lovely.</p>
|
||||||
|
<h2 id="lists">Lists</h2>
|
||||||
|
<p>This is a plain old bulleted list:</p>
|
||||||
|
<ul class="incremental">
|
||||||
|
<li>Banana</li>
|
||||||
|
<li>Paper boat</li>
|
||||||
|
<li>Cucumber</li>
|
||||||
|
<li>Rocket</li>
|
||||||
|
</ul>
|
||||||
|
<p>Ordered lists look pretty much as you’d expect:</p>
|
||||||
|
<ol class="incremental" type="1">
|
||||||
|
<li>Goals</li>
|
||||||
|
<li>Motivations
|
||||||
|
<ol class="incremental" type="1">
|
||||||
|
<li>Intrinsic</li>
|
||||||
|
<li>Extrinsic</li>
|
||||||
|
</ol></li>
|
||||||
|
<li>Second-order effects</li>
|
||||||
|
</ol>
|
||||||
|
<p>It’s nice to visualize trees. This is a regular unordered list with a
|
||||||
|
<code>tree</code> class:</p>
|
||||||
|
<ul class="tree">
|
||||||
|
<li>
|
||||||
|
<p><strong>/dev/nvme0n1p2</strong></p>
|
||||||
|
<ul class="incremental">
|
||||||
|
<li>usr
|
||||||
|
<ul class="incremental">
|
||||||
|
<li>local<br />
|
||||||
|
</li>
|
||||||
|
<li>share<br />
|
||||||
|
</li>
|
||||||
|
<li>libexec<br />
|
||||||
|
</li>
|
||||||
|
<li>include<br />
|
||||||
|
</li>
|
||||||
|
<li>sbin<br />
|
||||||
|
</li>
|
||||||
|
<li>src<br />
|
||||||
|
</li>
|
||||||
|
<li>lib64<br />
|
||||||
|
</li>
|
||||||
|
<li>lib<br />
|
||||||
|
</li>
|
||||||
|
<li>bin<br />
|
||||||
|
</li>
|
||||||
|
<li>games
|
||||||
|
<ul class="incremental">
|
||||||
|
<li>solitaire</li>
|
||||||
|
<li>snake</li>
|
||||||
|
<li>tic-tac-toe</li>
|
||||||
|
</ul></li>
|
||||||
|
<li>media<br />
|
||||||
|
</li>
|
||||||
|
</ul></li>
|
||||||
|
<li>media<br />
|
||||||
|
</li>
|
||||||
|
<li>run<br />
|
||||||
|
</li>
|
||||||
|
<li>tmp<br />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="tables">Tables</h2>
|
||||||
|
<p>We can use regular tables that automatically adjust to the monospace
|
||||||
|
grid. They’re responsive.</p>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="width-min">
|
||||||
|
Name
|
||||||
|
</th>
|
||||||
|
<th class="width-auto">
|
||||||
|
Dimensions
|
||||||
|
</th>
|
||||||
|
<th class="width-min">
|
||||||
|
Position
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Boboli Obelisk
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
1.41m × 1.41m × 4.87m
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
43°45’50.78”N 11°15’3.34”E
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Pyramid of Khafre
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
215.25m × 215.25m × 136.4m
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
29°58’34”N 31°07’51”E
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>Note that only one column is allowed to grow.</p>
|
||||||
|
<h2 id="forms">Forms</h2>
|
||||||
|
<p>Here are some buttons:</p>
|
||||||
|
<nav>
|
||||||
|
<button>
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
<button>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<p>And inputs:</p>
|
||||||
|
<form class="grid">
|
||||||
|
<label>First name
|
||||||
|
<input type="text" placeholder="Placeholder..." /></label> <label>Last
|
||||||
|
name <input type="text" placeholder="Text goes here..." /></label>
|
||||||
|
<label>Age <input type="text" value="30" /></label>
|
||||||
|
</form>
|
||||||
|
<h2 id="grids">Grids</h2>
|
||||||
|
<p>Add the <code>grid</code> 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:</p>
|
||||||
|
<div class="grid">
|
||||||
|
<input readonly value="1" />
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<input readonly value="1" /><input readonly value="2" />
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<input readonly value="1" /><input readonly value="2" /><input readonly value="3" />
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" />
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /><input readonly value="5" />
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /><input readonly value="5" /><input readonly value="6" />
|
||||||
|
</div>
|
||||||
|
<p>If we want one cell to fill the remainder, we set
|
||||||
|
<code>flex-grow: 1;</code> for that particular cell.</p>
|
||||||
|
<div class="grid">
|
||||||
|
<input readonly value="1" /><input readonly value="2" /><input readonly value="3!" style="flex-grow: 1;" /><input readonly value="4" /><input readonly value="5" /><input readonly value="6" />
|
||||||
|
</div>
|
||||||
|
<h2 id="ascii-drawings">ASCII Drawings</h2>
|
||||||
|
<p>We can draw in <code><pre></code> tags using <a
|
||||||
|
href="https://en.wikipedia.org/wiki/Box-drawing_characters">box-drawing
|
||||||
|
characters</a>:</p>
|
||||||
|
<pre><code>╭─────────────────╮
|
||||||
|
│ MONOSPACE ROCKS │
|
||||||
|
╰─────────────────╯</code></pre>
|
||||||
|
<p>To have it stand out a bit more, we can wrap it in a
|
||||||
|
<code><figure></code> tag, and why not also add a
|
||||||
|
<code><figcaption></code>.</p>
|
||||||
|
<figure>
|
||||||
|
<pre>
|
||||||
|
┌───────┐ ┌───────┐ ┌───────┐
|
||||||
|
│Actor 1│ │Actor 2│ │Actor 3│
|
||||||
|
└───┬───┘ └───┬───┘ └───┬───┘
|
||||||
|
│ │ │
|
||||||
|
│ │ msg 1 │
|
||||||
|
│ │────────►│
|
||||||
|
│ │ │
|
||||||
|
│ msg 2 │ │
|
||||||
|
│────────►│ │
|
||||||
|
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
|
||||||
|
│Actor 1│ │Actor 2│ │Actor 3│
|
||||||
|
└───────┘ └───────┘ └───────┘</pre>
|
||||||
|
<figcaption>
|
||||||
|
Example: Message passing.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<p>Let’s go wild and draw a chart!</p>
|
||||||
|
<figure>
|
||||||
|
<pre>
|
||||||
|
Things I Have
|
||||||
|
|
||||||
|
│ ████ Usable
|
||||||
|
15 │
|
||||||
|
│ ░░░░ Broken
|
||||||
|
│
|
||||||
|
12 │ ░
|
||||||
|
│ ░
|
||||||
|
│ ░ ░
|
||||||
|
9 │ ░ ░
|
||||||
|
│ ░ ░
|
||||||
|
│ ░ ░ ░
|
||||||
|
6 │ █ ░ ░ ░
|
||||||
|
│ █ ░ ░ ░
|
||||||
|
│ █ ░ █ ░
|
||||||
|
3 │ █ █ █ ░
|
||||||
|
│ █ █ █ ░
|
||||||
|
│ █ █ █ ░
|
||||||
|
0 └───▀─────────▀─────────▀──────────▀─────────────
|
||||||
|
Socks Jeans Shirts USB Drives
|
||||||
|
</pre>
|
||||||
|
</figure>
|
||||||
|
<h2 id="media">Media</h2>
|
||||||
|
<p>Media objects are supported, like images and video:</p>
|
||||||
|
<figure>
|
||||||
|
<img src="castle.jpg" alt="A room in an old French castle (2024)" />
|
||||||
|
<figcaption aria-hidden="true">A room in an old French castle
|
||||||
|
(2024)</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<video
|
||||||
|
src="https://upload.wikimedia.org/wikipedia/commons/e/e0/The_Center_of_the_Web_%281914%29.webm"
|
||||||
|
controls=""><a
|
||||||
|
href="https://upload.wikimedia.org/wikipedia/commons/e/e0/The_Center_of_the_Web_%281914%29.webm">The
|
||||||
|
Center of the Web (1914), Wikimedia</a></video>
|
||||||
|
<figcaption aria-hidden="true"><a
|
||||||
|
href="https://en.wikisource.org/wiki/Page:The_Center_of_the_Web_(1914).webm/11">The
|
||||||
|
Center of the Web (1914), Wikimedia</a></figcaption>
|
||||||
|
</figure>
|
||||||
|
<p>They extend to the width of the page, and add appropriate padding in
|
||||||
|
the bottom to maintain the monospace grid.</p>
|
||||||
|
<h2 id="discussion">Discussion</h2>
|
||||||
|
<p>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 <a href="https://x.com/owickstrom">let me
|
||||||
|
know</a>.</p>
|
||||||
|
<p>Join the discussion in any of the following threads:</p>
|
||||||
|
<ul class="incremental">
|
||||||
|
<li>X/Twitter</li>
|
||||||
|
<li>Lobsters</li>
|
||||||
|
<li>Hacker News</li>
|
||||||
|
</ul>
|
||||||
|
<div class="debug-grid"></div>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user