fix line height and add details

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;
 }

index.html

@@ -72,7 +72,16 @@ elements.</p>
 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">

index.js

@@ -48,26 +48,16 @@ function setRatios() {
 setRatios();
 
 function checkOffsets() {
-  const targetNode = document.body;
+  const elements = document.querySelectorAll("body :not(.debug-grid, .debug-toggle)");
-  const config = { childList: true, subtree: true };
+  for (const element of elements) {
-
+    const offset = element.offsetTop % 10;
-  const callback = () => {
+    if(element.offsetParent == document.body && offset > 0) {
-    const elements = document.querySelectorAll("body :not(.debug-grid, .debug-toggle)");
+      element.classList.add("off-grid");
-    for (const element of elements) {
+      console.error("Incorrect vertical offset:", element, element.offsetTop % 20);
-      const offset = element.offsetTop % 10;
+    } else {
-      if(element.offsetParent == document.body && offset > 0) {
+      element.classList.remove("off-grid");
-        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");

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