From 329d842e052c280fb1845206330253a273031773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Wickstr=C3=B6m?= <oskar@wickstrom.tech>
Date: Mon, 26 Aug 2024 11:58:43 +0200
Subject: [PATCH] fix line height and add details

---
 index.css  | 26 ++++++++++++++++++++++++--
 index.html | 11 ++++++++++-
 index.js   | 28 +++++++++-------------------
 index.md   |  7 ++++++-
 4 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/index.css b/index.css
index 06a2399..1ad5c9e 100644
--- a/index.css
+++ b/index.css
@@ -193,6 +193,26 @@ img, video {
   object-fit: contain;
 }
 
+details {
+  border: var(--border-thickness) solid var(--text-color);
+  padding: calc(var(--line-height) - var(--border-thickness)) 1ch;
+}
+
+summary {
+  font-weight: 600;
+  margin-bottom: var(--line-height);
+}
+
+details ::marker {
+  display: inline-block;
+  content: '►';
+  margin: 0;
+}
+
+details :last-child {
+  margin-bottom: 0;
+}
+
 pre {
   white-space: pre;
   overflow-x: auto;
@@ -245,7 +265,7 @@ li {
   padding: 0;
 }
 
-::marker {
+li::marker {
   line-height: 0;
 }
 
@@ -275,7 +295,7 @@ input, button, textarea {
 input[type=checkbox] {
   display: inline-grid;
   place-content: center;
-  vertical-align: middle;
+  vertical-align: top;
   width: 2ch;
   height: var(--line-height);
   cursor: pointer;
@@ -323,6 +343,8 @@ button:active {
 label {
   display: block;
   width: calc(round(down, 100%, 1ch));
+  height: auto;
+  line-height: var(--line-height);
   font-weight: 600;
   margin: 0;
 }
diff --git a/index.html b/index.html
index 624dfe5..ba59228 100644
--- a/index.html
+++ b/index.html
@@ -72,7 +72,16 @@ <h2 id="the-basics">The Basics</h2>
 it’s just markup. This, for instance, is a regular paragraph.</p>
 <p>Look at this horizontal break:</p>
 <hr>
-<p>Lovely.</p>
+<p>Lovely. We can hide stuff in the <code>&lt;details</code>&gt;
+element:</p>
+<details>
+<summary>
+A short summary of the contents
+</summary>
+<p>
+Hidden gems.
+</p>
+</details>
 <h2 id="lists">Lists</h2>
 <p>This is a plain old bulleted list:</p>
 <ul class="incremental">
diff --git a/index.js b/index.js
index a624c5b..426131d 100644
--- a/index.js
+++ b/index.js
@@ -48,26 +48,16 @@ function setRatios() {
 setRatios();
 
 function checkOffsets() {
-  const targetNode = document.body;
-  const config = { childList: true, subtree: true };
-
-  const callback = () => {
-    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) {
-        element.classList.add("off-grid");
-        console.error("Incorrect vertical offset:", element, element.offsetTop % 20);
-      } else {
-        element.classList.remove("off-grid");
-      }
+  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) {
+      element.classList.add("off-grid");
+      console.error("Incorrect vertical offset:", element, element.offsetTop % 20);
+    } else {
+      element.classList.remove("off-grid");
     }
-  };
-
-  callback();
-
-  const observer = new MutationObserver(callback);
-  observer.observe(targetNode, config);
+  }
 }
 
 const debugToggle = document.querySelector(".debug-toggle");
diff --git a/index.md b/index.md
index 4af11a8..6446585 100644
--- a/index.md
+++ b/index.md
@@ -37,7 +37,12 @@ Look at this horizontal break:
 
 <hr>
 
-Lovely.
+Lovely. We can hide stuff in the `<details`> element:
+
+<details>
+<summary>A short summary of the contents</summary>
+<p>Hidden gems.</p>
+</details>
 
 ## Lists