fix hrs

index.css

@@ -1,11 +1,12 @@
 :root {
+  --font-family: "Fira Code", monospace;
   --line-height: 1.25rem;
   --border-thickness: 1.5px;
   --bold-weight: 700;
 
-  font-family: "Source Code Pro", monospace;
+  font-family: var(--font-family);
   font-optical-sizing: auto;
-  font-weight: 450;
+  font-weight: 500;
   font-style: normal;
   font-variant-numeric: tabular-nums lining-nums;
   font-size: 16px;
@@ -71,15 +72,21 @@ h2 {
 
 hr {
   position: relative;
-  top: calc(var(--border-thickness) * -1);
   display: block;
+  height: var(--line-height);
+  margin: calc(var(--line-height) * 2) 0 var(--line-height);
   border: none;
-  border-bottom: 4.5px double #000;
-  color: transparent;
-  height: var(--border-thickness);
-  margin: calc(var(--line-height) * 2 - var(--border-thickness)) 0;
-  /*temp*/
-  display: none;
+  color: #000;
+}
+hr:after {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  border-top: calc(var(--border-thickness) * 3) double #000;
+  height: 0;
 }
 
 a {
@@ -159,7 +166,11 @@ p {
 }
 
 pre, code {
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-family);
+}
+
+code {
+  font-weight: 600;
 }
 
 figure {
@@ -201,8 +212,8 @@ li {
 }
 .tree ul li {
   position: relative;
-  padding-left: 1ch;
-  margin-left: 1ch;
+  padding-left: 1.5ch;
+  margin-left: 1.5ch;
   border-left: var(--border-thickness) solid #000;
 }
 .tree ul li:before {
@@ -211,7 +222,7 @@ li {
   top: calc(var(--line-height) / 2);
   left: 0;
   content: "";
-  width: calc(var(--line-height) / 2);
+  width: 1ch;
   border-bottom: var(--border-thickness) solid #000;
 }
 .tree ul li:last-child {
@@ -247,5 +258,5 @@ li {
 }
 
 body :not(.grid) {
-  /*background: rgba(255, 0, 0, 0.1);*/
+  background: rgba(255, 0, 0, 0.1);
 }

index.md

@@ -1,20 +1,23 @@
 ---
-title: The Monotyper Manifesto
-author: John Doe
+title: The Monospace Web
+author: Oskar Wickström
 date: August 2024
+lang: en
 ---
 
 ## Abstract
 
-In this design, the use of monospace fonts and a monochrome color palette is deliberate to enhance clarity and legibility, especially in environments where precision and readability are paramount.
-Monospace fonts, where each character occupies the same horizontal space, ensure uniformity and predictability in text alignment, making them ideal for coding interfaces, technical documentation, and tabular data displays.
+Monospace fonts are dear to many of us. 
+Some find them more readable, consistent, and beautiful, and 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.
 
-The consistent spacing prevents text from becoming jumbled or misaligned, which can be critical when differentiating between similar-looking characters, such as '1' and 'l' or '0' and 'O'.
-This uniformity contributes to an overall sense of order and structure within the design, aiding users in quickly scanning and understanding the information presented.
+We use the monospace grid to align text and draw diagrams.
 
 ## The Basics
 
-I mean, look at this lovely horizontal break:
+Look at this lovely horizontal break:
 
 <hr>
 
@@ -46,9 +49,9 @@ This is a regular unordered list with a _tree_ class:
     * lib                           
     * bin                           
     * games                         
-        * gamemode-simulate-game 
-        * gamemoderun
-        * gamemodelist
+        * solitaire
+        * snake
+        * tic-tac-toe
     * media                         
 * media                             
 * run