diff --git a/doc/docs/statics/addons.js b/doc/docs/statics/addons.js index a4e87bf..d4bebc4 100644 --- a/doc/docs/statics/addons.js +++ b/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(); }); diff --git a/doc/docs/statics/main.css b/doc/docs/statics/main.css index 94fca4d..1be9c28 100644 --- a/doc/docs/statics/main.css +++ b/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; + } +} diff --git a/doc/docs/statics/workflow.png b/doc/docs/statics/workflow.png new file mode 100644 index 0000000..f0c486d Binary files /dev/null and b/doc/docs/statics/workflow.png differ