From 8adba46abe126d58e82d02c2c3f53ee077ad37cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Wickstr=C3=B6m?= <oskar@wickstrom.tech>
Date: Thu, 22 Aug 2024 20:31:25 +0200
Subject: [PATCH] add video and better text

---
 index.css | 10 +++++-----
 index.js  | 38 +++++++++++++++++++++++++++++---------
 index.md  | 23 +++++++++++++++++------
 3 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/index.css b/index.css
index 6874acb..5a7e627 100644
--- a/index.css
+++ b/index.css
@@ -1,7 +1,7 @@
 :root {
   --font-family: "Fira Code", monospace;
   --line-height: 1.25rem;
-  --border-thickness: 1px;
+  --border-thickness: 2px;
   --bold-weight: 700;
 
   font-family: var(--font-family);
@@ -74,7 +74,7 @@ hr {
   position: relative;
   display: block;
   height: var(--line-height);
-  margin: calc(var(--line-height) * 2) 0 var(--line-height);
+  margin: calc(var(--line-height) * 1.5) 0;
   border: none;
   color: #000;
 }
@@ -82,7 +82,7 @@ hr:after {
   display: block;
   content: "";
   position: absolute;
-  top: 0;
+  top: calc(var(--line-height) / 2 - var(--border-thickness));
   left: 0;
   width: 100%;
   border-top: calc(var(--border-thickness) * 3) double #000;
@@ -165,7 +165,7 @@ p {
   hyphens: auto;
 }
 
-img {
+img, video {
   --real-height: 100% / var(--ratio);
 
   display: block;
@@ -277,5 +277,5 @@ li {
 }
 
 body :not(.grid) {
-  background: rgba(255, 0, 0, 0.1);
+  /*background: rgba(255, 0, 0, 0.1);*/
 }
diff --git a/index.js b/index.js
index 89ac20c..f0112ef 100644
--- a/index.js
+++ b/index.js
@@ -1,12 +1,32 @@
-// Set the ratio variable on each image.
-document.querySelectorAll("img").forEach(img => {
+// Set the ratio variable on each media.
+document.querySelectorAll("img, video").forEach(media => {
   function onLoaded() {
-    const ratio = img.naturalWidth / img.naturalHeight;
-    img.style.setProperty("--ratio", ratio);
-  }
-  if (img.loaded) {
-    onLoaded();
-  } else {
-    img.addEventListener("load", onLoaded);
+    var ratio = 1;
+    switch (media.tagName) {
+      case "IMG":
+        ratio = media.naturalWidth / media.naturalHeight;
+        break;
+      case "VIDEO":
+        ratio = media.videoWidth / media.videoHeight;
+        break;
+    }
+    media.style.setProperty("--ratio", ratio);
   }
+    switch (media.tagName) {
+      case "IMG":
+        if (media.loaded) {
+          onLoaded();
+        } else {
+          media.addEventListener("load", onLoaded);
+        }
+        break;
+      case "VIDEO":
+        if (media.readystate == 4) {
+          onLoaded();
+        } else {
+          media.style.setProperty("--ratio", 16/9); // default while loading
+          media.addEventListener("loadedmetadata", onLoaded);
+        }
+        break;
+    }
 });
diff --git a/index.md b/index.md
index 5bec1fb..fb7aa12 100644
--- a/index.md
+++ b/index.md
@@ -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.