calculate grid cell height

index.css

@@ -30,10 +30,6 @@
 }
 
 
-*:first-child {
-  margin: 0;
-}
-
 * + * {
   margin-top: var(--line-height);
 }
@@ -69,13 +65,14 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--bold-weight);
-  margin: calc(var(--line-height) * 2) 0 0;
+  margin: calc(var(--line-height) * 2) 0 var(--line-height);
   line-height: var(--line-height);
 }
 
 h1 {
   font-size: 2rem;
   line-height: calc(2 * var(--line-height));
+  margin-bottom: calc(var(--line-height) * 2);
   text-transform: uppercase;
 }
 h2 {
@@ -111,7 +108,7 @@ a:link, a:visited {
 }
 
 p {
-  margin-top: var(--line-height);
+  margin-bottom: var(--line-height);
 }
 
 strong {
@@ -136,7 +133,7 @@ table {
   top: calc(var(--line-height) / 2);
   width: calc(round(down, 100%, 1ch));
   border-collapse: collapse;
-  margin: var(--line-height) 0 calc(var(--line-height) * 3);
+  margin: 0 0 calc(var(--line-height) * 2);
 }
 
 th, td {
@@ -168,6 +165,9 @@ th {
 .header {
   margin-bottom: calc(var(--line-height) * 2);
 }
+.header h1 {
+  margin: 0;
+}
 .header tr td:last-child {
   text-align: right;
 }
@@ -185,10 +185,11 @@ img, video {
   width: 100%;
   padding-bottom: calc(
       round(
-      nearest, 
+        up, 
-      round(up, var(--real-height), var(--line-height)) - var(--real-height),
+        var(--real-height), 
-      1px
+        var(--line-height)
       ) 
+      - var(--real-height)
   );
   object-fit: contain;
 }
@@ -196,10 +197,13 @@ img, video {
 details {
   border: var(--border-thickness) solid var(--text-color);
   padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
+  margin-bottom: var(--line-height);
 }
 
 summary {
   font-weight: 600;
+}
+details[open] summary {
   margin-bottom: var(--line-height);
 }
 
@@ -208,6 +212,9 @@ details ::marker {
   content: '►';
   margin: 0;
 }
+details[open] ::marker {
+  content: '▼';
+}
 
 details :last-child {
   margin-bottom: 0;
@@ -216,6 +223,10 @@ details :last-child {
 pre {
   white-space: pre;
   overflow-x: auto;
+  margin: var(--line-height) 0;
+}
+figure pre {
+  margin: 0;
 }
 
 pre, code {
@@ -239,7 +250,7 @@ figcaption {
 
 ul, ol {
   padding: 0;
-  margin: var(--line-height) 0;
+  margin: 0 0 var(--line-height);
 }
 
 ul {
@@ -251,8 +262,12 @@ ol {
   counter-reset: item;
   padding: 0;
 }
-ol ol {
+ol ul,
+ol ol,
+ul ol,
+ul ul {
   padding: 0 0 0 3ch;
+  margin: 0;
 }
 ol li:before { 
   content: counters(item, ".") ". ";
@@ -395,6 +410,7 @@ label input {
   display: flex;
   gap: 1ch;
   width: calc(round(down, 100%, (1ch * var(--grid-cells)) - (1ch * var(--grid-cells) - 1)));
+  margin-bottom: var(--line-height);
 }
 
 .grid > *,

index.html

@@ -5,7 +5,7 @@
   <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" />
+  <meta name="dcterms.date" content="2024-08-26" />
   <title>The Monospace Web</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -25,7 +25,7 @@
   </tr>
   <tr>
     <th>Updated</th>
-    <td class="width-min">2024-08-30</td>
+    <td class="width-min">2024-08-26</td>
   </tr>
   <tr>
     <th class="width-min">Author</th>
@@ -104,7 +104,9 @@ Hidden gems.
 <code>tree</code> class:</p>
 <ul class="tree">
 <li>
-<p><strong>/dev/nvme0n1p2</strong></p>
+<p style="margin: 0;">
+<strong>/dev/nvme0n1p2</strong>
+</p>
 <ul class="incremental">
 <li>usr
 <ul class="incremental">
@@ -139,8 +141,7 @@ Hidden gems.
 </li>
 <li>run<br />
 </li>
-<li>tmp<br />
+<li>tmp</li>
-</li>
 </ul>
 </li>
 </ul>

index.js

@@ -4,6 +4,17 @@ function firstEvent(element, name) {
   });
 }
 
+function gridCellDimensions() {
+  const element = document.createElement("div");
+  element.style.position = "fixed";
+  element.style.height = "var(--line-height)";
+  element.style.width = "1ch";
+  document.body.appendChild(element);
+  const rect = element.getBoundingClientRect();
+  document.body.removeChild(element);
+  return { width: rect.width, height: rect.height };
+}
+
 const defaultRatio = 16/9;
 
 // Set the ratio variable on each media.
@@ -17,14 +28,14 @@ function setRatios() {
           ratio = media.naturalWidth / media.naturalHeight;
           break;
         case "VIDEO":
-          if (media.videoWidth != 0 && media.videoHeight != 0) {
           ratio = media.videoWidth / media.videoHeight;
-          }
           break;
       }
+      if (ratio != NaN) {
         console.log("Setting ratio", ratio, "for element", media);
         media.style.setProperty("--ratio", ratio);
       }
+    }
       switch (media.tagName) {
         case "IMG":
           if (!media.loaded) {
@@ -48,12 +59,30 @@ function setRatios() {
 setRatios();
 
 function checkOffsets() {
+  const ignoredTagNames = new Set([
+    "THEAD",
+    "TBODY",
+    "TFOOT",
+    "TR",
+    "TD",
+    "TH",
+  ]);
+  const cell = gridCellDimensions();
   const elements = document.querySelectorAll("body :not(.debug-grid, .debug-toggle)");
   for (const element of elements) {
-    const offset = element.offsetTop % 10;
+    if (ignoredTagNames.has(element.tagName)) {
-    if(element.offsetParent == document.body && offset > 0) {
+      continue;
+    }
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      continue;
+    }
+    const top = rect.top + window.scrollY;
+    const left = rect.left + window.scrollX;
+    const offset = top % (cell.height / 2);
+    if(offset > 0) {
       element.classList.add("off-grid");
-      console.error("Incorrect vertical offset:", element, element.offsetTop % 20);
+      console.error("Incorrect vertical offset for", element, "with remainder", top % cell.height, "when expecting divisible by", cell.height / 2);
     } else {
       element.classList.remove("off-grid");
     }

index.md

@@ -2,7 +2,7 @@
 title: The Monospace Web
 subtitle: A minimalist design exploration
 author: Oskar Wickström
-date: 2024-08-30
+date: 2024-08-26
 lang: en
 toc-title: Contents
 version: v0.1.0
@@ -64,10 +64,7 @@ Ordered lists look pretty much as you'd expect:
 It's nice to visualize trees.
 This is a regular unordered list with a `tree` class:
 
-<ul class="tree">
+<ul class="tree"><li><p style="margin: 0;"><strong>/dev/nvme0n1p2</strong></p>
-<li>
-
-**/dev/nvme0n1p2**
 
 * usr                               
     * local                         
@@ -87,8 +84,8 @@ This is a regular unordered list with a `tree` class:
 * media                             
 * run                               
 * tmp                               
-</li>
+
-</ul>
+</li></ul>
 
 ## Tables