Add click-to-zoom lightbox for diagrams on all pages

eight-forms-of-capital/index.html

@@ -328,6 +328,7 @@ Diagrams generated from DOT source files included in this repository.
   <center>Russell Ballestrini | unturf. &copy; 2025</center>
 </footer>
 
+<script src="/js/diagram-zoom.js"></script>
 <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
 </body>
 </html>

js/diagram-zoom.js

@@ -0,0 +1,35 @@
+// Click-to-zoom for .diagram img elements
+// Creates a fullscreen overlay with the diagram, click or Escape to close
+(function () {
+  var overlay = document.createElement('div');
+  overlay.id = 'diagram-overlay';
+  overlay.style.cssText =
+    'display:none;position:fixed;top:0;left:0;width:100%;height:100%;' +
+    'background:rgba(0,0,0,0.9);z-index:9999;cursor:zoom-out;' +
+    'justify-content:center;align-items:center;padding:2em;';
+
+  var img = document.createElement('img');
+  img.style.cssText = 'max-width:95%;max-height:95%;object-fit:contain;';
+  overlay.appendChild(img);
+
+  document.body.appendChild(overlay);
+
+  overlay.addEventListener('click', function () {
+    overlay.style.display = 'none';
+  });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && overlay.style.display === 'flex') {
+      overlay.style.display = 'none';
+    }
+  });
+
+  document.querySelectorAll('.diagram img').forEach(function (el) {
+    el.style.cursor = 'zoom-in';
+    el.addEventListener('click', function () {
+      img.src = el.src;
+      img.alt = el.alt;
+      overlay.style.display = 'flex';
+    });
+  });
+})();

let-us-define-a-permacomputer/index.html

@@ -322,6 +322,7 @@ something, you are likely clicking a link!
   <script src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
   -->
 
+<script src="/js/diagram-zoom.js"></script>
 <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
 </body>
 </html>

single-use-plastics/index.html

@@ -183,6 +183,7 @@ Grow food not lawn. Grow glass not plastic. Grow what cycles.
   <center>Russell Ballestrini | unturf. &copy; 2025</center>
 </footer>
 
+<script src="/js/diagram-zoom.js"></script>
 <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
 </body>
 </html>