add debug button

Makefile

@@ -5,6 +5,6 @@ clean:
 	rm -f index.html
 
 index.html: index.md template.html Makefile
-	pandoc -s --css reset.css --css index.css -i $< -o $@ --template=template.html
+	pandoc --toc -s --css reset.css --css index.css -i $< -o $@ --template=template.html
 
 .PHONY: all clean

index.css

@@ -268,7 +268,7 @@ li {
 
 /* DEBUG UTILITIES */
 
-.grid {
+.debug .grid {
   --color: color-mix(in srgb, var(--text-color) 10%, var(--background-color) 90%);
   position: absolute;
   top: 0;
@@ -281,10 +281,15 @@ li {
     repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
   background-size: 1ch var(--line-height);
   margin: 0;
-
-  /*display: none;*/
 }
 
-.off-grid {
+.debug .off-grid {
   background: rgba(255, 0, 0, 0.1);
 }
+
+.debug-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: var(--line-height) 2ch;
+}

index.js

@@ -52,7 +52,7 @@ function checkOffsets() {
   const config = { childList: true, subtree: true };
 
   const callback = () => {
-    const elements = document.querySelectorAll("body *");
+    const elements = document.querySelectorAll("body :not(.grid)");
     for (const element of elements) {
       const offset = element.offsetTop % 10;
       if(element.offsetParent == document.body && offset > 0) {
@@ -71,3 +71,8 @@ function checkOffsets() {
 }
 
 window.addEventListener("load", checkOffsets);
+
+const debugButton = document.querySelector(".debug-toggle");
+debugButton.addEventListener("click", () => {
+  document.body.classList.toggle("debug");
+});

index.md

@@ -3,6 +3,7 @@ title: The Monospace Web
 author: Oskar Wickström
 date: August 2024
 lang: en
+toc-title: Contents
 ---
 
 ## Introduction

template.html

@@ -67,6 +67,7 @@ $for(include-after)$
 $include-after$
 $endfor$
   <div class="grid"></div>
+  <button class="debug-toggle">Debug</button>
   <script src="index.js"></script>
 </body>
 </html>