Add workflow image and zoom on click

doc/docs/statics/addons.js

@@ -1,5 +1,7 @@
+// Install the highlight.js in the documentation. Then
+// highlight all the source code.
 function hljsInstall() {
-  const version = "11.5.1";
+  const version = "11.9.0";
   const theme = "github-dark";
 
   const script = document.createElement("script");
@@ -15,6 +17,32 @@ function hljsInstall() {
   document.head.appendChild(script);
 }
 
+// All images in an .zoomable div is zoomable, that
+// meanse that we can click to zoom and unzoom.
+// This needs specific CSS (see main.css).
+function makeImagesZoomable() {
+  const zone = document.querySelectorAll(".zoomable");
+
+  zone.forEach((z, i) => {
+    const im = z.querySelectorAll("img");
+    if (im.length == 0) {
+      return;
+    }
+
+    const input = document.createElement("input");
+    input.setAttribute("type", "checkbox");
+    input.setAttribute("id", `image-zoom-${i}`);
+    z.appendChild(input);
+
+    const label = document.createElement("label");
+    label.setAttribute("for", `image-zoom-${i}`);
+    z.appendChild(label);
+
+    label.appendChild(im[0]);
+  });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   hljsInstall();
+  makeImagesZoomable();
 });

doc/docs/statics/main.css

@@ -65,3 +65,36 @@ table tbody code {
 h3[id*="katenaryio"] {
   color: var(--md-code-hl-special-color);
 }
+
+#logo {
+  background-image: url("logo-dark.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  height: 8em;
+  width: 100%;
+  margin: 0 auto 2rem auto;
+}
+
+/*Zoomable images*/
+
+[data-md-color-scheme="slate"] #logo {
+  background-image: url("logo-bright.svg");
+}
+
+.zoomable input[type="checkbox"] {
+  display: none;
+}
+
+@media all and (min-width: 1399px) {
+  .zoomable label img {
+    cursor: zoom-in;
+    transition: all 0.2s ease-in-out;
+  }
+  .zoomable input[type="checkbox"]:checked ~ label img {
+    transform: scale(2);
+    cursor: zoom-out;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+    z-index: 1;
+  }
+}