eric/the-monospace-web-pandoc
1
0
Fork 0
mirror of https://github.com/frainfreeze/the-monospace-web-pandoc synced 2025-12-30 02:59:50 -08:00
Code Issues Packages Projects Releases Wiki Activity

add video and better text

Browse Source
This commit is contained in:
Oskar Wickström
2024-08-22 20:31:25 +02:00
parent c88ee9ac50
commit 8adba46abe
3 changed files with 51 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.md
View File

@@ -5,15 +5,20 @@ date: August 2024
lang: en
---
## Abstract
## Introduction
Monospace fonts are dear to many of us.
Some find them more readable, consistent, and beautiful, and than their proportional alternatives.
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?
In any case, I like them, and that's why I started experimenting with all-monospace Web.
I'm not sure.
But I like them, and that's why I started experimenting with all-monospace Web.
We use the monospace grid to align text and draw diagrams.
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.
## The Basics
@@ -142,6 +147,12 @@ Let's go wild and draw a chart!
Socks Jeans Shirts USB Drives
</pre></figure>
## Images
## Media
![A room in an old French castle.](castle.jpg)
Media objects are supported, like images and video:
![A room in an old French castle (2024)](castle.jpg)
![[The Center of the Web (1914), Wikimedia](https://en.wikisource.org/wiki/Page:The_Center_of_the_Web_(1914).webm/11)](https://upload.wikimedia.org/wikipedia/commons/e/e0/The_Center_of_the_Web_%281914%29.webm)
They extend to the width of the page, and add appropriate padding in the bottom to maintain the monospace grid.