calculate grid cell height

2025-12-29 18:49:50 -08:00 · 2024-08-27 07:35:43 +02:00
parent 329d842e05
commit 255d2c5805
4 changed files with 77 additions and 34 deletions
--- a/index.css
+++ b/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;
 }
@@ -184,11 +184,12 @@ img, video {
  display: block;
  width: 100%;
  padding-bottom: calc(
-    round(
-      nearest, 
-      round(up, var(--real-height), var(--line-height)) - var(--real-height),
-      1px
-    )
+      round(
+        up, 
+        var(--real-height), 
+        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 > *,
--- a/index.html
+++ b/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>
+<li>tmp</li>
 </ul>
 </li>
 </ul>
--- a/index.js
+++ b/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,13 +28,13 @@ function setRatios() {
          ratio = media.naturalWidth / media.naturalHeight;
          break;
        case "VIDEO":
-          if (media.videoWidth != 0 && media.videoHeight != 0) {
-            ratio = media.videoWidth / media.videoHeight;
-          }
+          ratio = media.videoWidth / media.videoHeight;
          break;
      }
-      console.log("Setting ratio", ratio, "for element", media);
-      media.style.setProperty("--ratio", ratio);
+      if (ratio != NaN) {
+        console.log("Setting ratio", ratio, "for element", media);
+        media.style.setProperty("--ratio", ratio);
+      }
    }
      switch (media.tagName) {
        case "IMG":
@@ -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(element.offsetParent == document.body && offset > 0) {
+    if (ignoredTagNames.has(element.tagName)) {
+      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");
    }
--- a/index.md
+++ b/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">
-<li>
-
-**/dev/nvme0n1p2**
+<ul class="tree"><li><p style="margin: 0;"><strong>/dev/nvme0n1p2</strong></p>

 * usr                               
    * local                         
@@ -87,8 +84,8 @@ This is a regular unordered list with a `tree` class:
 * media                             
 * run                               
 * tmp                               
-</li>
-</ul>
+
+</li></ul>

 ## Tables