image captions, Mermaid responsive styles, and clarify blog content

Add responsive Mermaid styles and clarify blog content

layouts/_partials/custom/head-end.html

@@ -18,7 +18,7 @@
     });
 </script>
 
-<!-- Mermaid config + viewBox fix -->
+<!-- Mermaid config + viewBox from g bounds -->
 <script>
     (function () {
         function patch() {
@@ -35,29 +35,22 @@
         }
         patch();
 
-        // Fix oversized viewBox on flowcharts
         function fixViewBox() {
             document.querySelectorAll(".mermaid svg").forEach(function (svg) {
-                var vb = svg.getAttribute("viewBox");
-                if (!vb) return;
-                var p = vb.split(" ").map(Number);
-                if (p.length !== 4) return;
-                var h = p[3],
-                    w = p[2];
-                if (h < 600 && w < 800) return;
                 var g = svg.querySelector("g");
                 if (!g) return;
                 var bb = g.getBBox();
-                if (bb.width === 0 && bb.height === 0)
+                if (!bb || bb.width === 0 || bb.height === 0)
                     return setTimeout(fixViewBox, 200);
-                var pad = 20;
+                var px = 16,
+                    py = 16;
                 svg.setAttribute(
                     "viewBox",
                     [
-                        bb.x - pad,
-                        bb.y - pad,
-                        bb.width + pad * 2,
-                        bb.height + pad * 2,
+                        bb.x - px,
+                        bb.y - py,
+                        bb.width + px * 2,
+                        bb.height + py * 2,
                     ].join(" "),
                 );
             });