Docs docs docs

docs/static/css/extra.css

@@ -1,3 +1,7 @@
+.md-header__button.md-logo :is(img, svg) {
+    width: unset !important;
+}
+
 article {
     padding-bottom: 50px;
 }
@@ -16,3 +20,78 @@ figure img {
 .remove-md-box td {
     padding: 0 10px
 }
+
+/* Lightbox; thanks to https://yossiabramov.com/blog/vanilla-js-lightbox */
+
+.screenshots {
+    text-align: center;
+}
+
+.screenshots img {
+    height: 230px;
+    margin: 3px;
+    border-radius: 5px;
+    filter: drop-shadow(2px 2px 2px #ddd);
+}
+
+.screenshots .nowrap {
+    white-space: nowrap;
+}
+
+.lightbox {
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    left:0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease-in;
+}
+
+.lightbox.show {
+    background-color: rgba(0,0,0, 0.75);
+    opacity: 1;
+    visibility: visible;
+    z-index: 1000;
+}
+
+.lightbox img {
+    max-width: 90%;
+    max-height: 90%;
+    filter: drop-shadow(5px 5px 10px #222);
+    border-radius: 5px;
+}
+
+.lightbox .close-lightbox {
+    cursor: pointer;
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    width: 20px;
+    height: 20px;
+}
+
+.lightbox .close-lightbox::after,
+.lightbox .close-lightbox::before {
+    content: '';
+    width: 3px;
+    height: 20px;
+    background-color: #ddd;
+    position: absolute;
+    border-radius: 5px;
+    transform: rotate(45deg);
+}
+
+.lightbox .close-lightbox::before {
+    transform: rotate(-45deg);
+}
+
+.lightbox .close-lightbox:hover::after,
+.lightbox .close-lightbox:hover::before {
+    background-color: #fff;
+}

docs/static/js/extra.js

@@ -29,3 +29,71 @@ for (const tab of tabs) {
         tab.checked = true
     }
 }
+
+// Lightbox for screenshot
+
+const lightbox = document.createElement('div');
+lightbox.classList.add('lightbox');
+document.body.appendChild(lightbox);
+
+const showScreenshotOverlay = (e, el, group, index) => {
+    lightbox.classList.add('show');
+    document.addEventListener('keydown', nextScreenshotKeyboardListener);
+    return showScreenshot(e, group, index);
+};
+
+const showScreenshot = (e, group, index) => {
+    const actualIndex = resolveScreenshotIndex(group, index);
+    lightbox.innerHTML = '<div class="close-lightbox"></div>' + screenshots[group][actualIndex].innerHTML;
+    lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e, group, actualIndex+1); };
+    currentScreenshotGroup = group;
+    currentScreenshotIndex = actualIndex;
+    e.stopPropagation();
+    return false;
+};
+
+const nextScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex+1);
+};
+
+const previousScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex-1);
+};
+
+const resolveScreenshotIndex = (group, index) => {
+    if (index < 0) {
+        return screenshots[group].length - 1;
+    } else if (index > screenshots[group].length - 1) {
+        return 0;
+    }
+    return index;
+};
+
+const hideScreenshotOverlay = (e) => {
+    lightbox.classList.remove('show');
+    document.removeEventListener('keydown', nextScreenshotKeyboardListener);
+};
+
+const nextScreenshotKeyboardListener = (e) => {
+    switch (e.keyCode) {
+        case 37:
+            previousScreenshot(e);
+            break;
+        case 39:
+            nextScreenshot(e);
+            break;
+    }
+};
+
+let currentScreenshotGroup = '';
+let currentScreenshotIndex = 0;
+let screenshots = {};
+Array.from(document.getElementsByClassName('screenshots')).forEach((sg) => {
+    const group = sg.id;
+    screenshots[group] = [...sg.querySelectorAll('a')];
+    screenshots[group].forEach((el, index) => {
+        el.onclick = (e) => { return showScreenshotOverlay(e, el, group, index); };
+    });
+});
+
+lightbox.onclick = hideScreenshotOverlay;