init

2025-12-30 02:59:50 -08:00 · 2024-08-21 16:47:54 +02:00
commit 50b890a226
9 changed files with 599 additions and 0 deletions
--- a/index.md
+++ b/index.md
@@ -0,0 +1,140 @@
+---
+title: The Monotyper Manifesto
+author: John Doe
+date: August 2024
+---
+
+## 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.
+
+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.
+
+## The Basics
+
+I mean, look at this lovely horizontal break:
+
+<hr>
+
+Or a plain old bulleted list:
+
+* Banana
+* Paper boat
+* Cucumber
+* Rocket
+
+## Trees
+
+It's nice to visualize trees.
+This is a regular unordered list with a _tree_ class:
+
+<ul class="tree">
+<li>
+
+**/dev/nvme0n1p2**
+
+* usr                               
+    * local                         
+    * share                         
+    * libexec                       
+    * include                       
+    * sbin                          
+    * src                           
+    * lib64                         
+    * lib                           
+    * bin                           
+    * games                         
+        * gamemode-simulate-game 
+        * gamemoderun
+        * gamemodelist
+    * media                         
+* media                             
+* run                               
+* tmp                               
+</li>
+</ul>
+
+## Tables
+
+We can use regular tables that automatically adjust to the monospace grid.
+They're responsive. 
+
+<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 &times; 1.41m &times; 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 &times; 215.25m &times; 136.4m</td>
+    <td>29°58'34"N 31°07'51"E</td>
+  </tr>
+</tbody>
+</table>
+
+Note that only one column is allowed to grow.
+
+## ASCII Drawings
+
+We can draw in `<pre>` tags using [box-drawing characters](https://en.wikipedia.org/wiki/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>`.
+
+<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>
+
+Let's go wild and draw a chart!
+
+<figure><pre>
+                  Things I have.
+                                              ████ Usable
+    │
+15  │                                         ░░░░ Broken
+    │
+    │
+12  │             ░            
+    │             ░            
+    │   ░         ░              
+ 9  │   ░         ░              
+    │   ░         ░              
+    │   ░         ░                    ░
+ 6  │   █         ░         ░          ░
+    │   █         ░         ░          ░
+    │   █         ░         █          ░
+ 3  │   █         █         █          ░
+    │   █         █         █          ░
+    │   █         █         █          ░
+ 0  └───▀─────────▀─────────▀──────────▀─────────────
+      Socks     Jeans     Shirts   USB Drives
+</pre></figure>