image captions, Mermaid responsive styles, and clarify blog content

Add responsive Mermaid styles and clarify blog content

content/blog/mermaid-test.md

@@ -61,32 +61,6 @@ graph LR
     C --> D
 ```
 
-## Larger flowchart with some styling
-
-```mermaid
-graph TB
-    sq[Square shape] --> ci((Circle shape))
-
-    subgraph A
-        od>Odd shape]-- Two line<br/>edge comment --> ro
-        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
-        di==>ro2(Rounded square shape)
-    end
-
-    %% Notice that no text in shape are added here instead that is appended further down
-    e --> od3>Really long text with linebreak<br>in an Odd shape]
-
-    %% Comments after double percent signs
-    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
-
-    cyr[Cyrillic]-->cyr2((Circle shape Начало));
-
-     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
-     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
-     class sq,e green
-     class di orange
-```
-
 ## SequenceDiagram: Loops, alt and opt
 
 ```mermaid

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.x - px,
-                        bb.y - pad,
+                        bb.y - py,
-                        bb.width + pad * 2,
+                        bb.width + px * 2,
-                        bb.height + pad * 2,
+                        bb.height + py * 2,
                     ].join(" "),
                 );
             });