Additional tweaks

static/assets/js/script.js

@@ -21,7 +21,9 @@ if (themeToggle) {
         root.setAttribute('data-theme', next);
         try {
             localStorage.setItem('theme', next);
-        } catch (_) {}
+        } catch {
+            /* localStorage unavailable (e.g. private browsing) */
+        }
     });
 }
 
@@ -37,18 +39,36 @@ function openLightbox(name, type, caption) {
     document.body.style.overflow = 'hidden';
 
     if (type === 'video') {
-        lbContent.innerHTML = `<video src="/assets/media/videos/${name}.mp4" controls autoplay><track kind="captions" src="/assets/media/videos/${name}-captions.vtt" default></video>`;
+        const video = document.createElement('video');
+        video.src = `/assets/media/videos/${name}.mp4`;
+        video.controls = true;
+        video.autoplay = true;
+        const track = document.createElement('track');
+        track.kind = 'captions';
+        track.src = `/assets/media/videos/${name}-captions.vtt`;
+        track.default = true;
+        video.appendChild(track);
+        lbContent.replaceChildren(video);
     } else {
         const srcset = (bp) =>
             type === 'image'
                 ? `/assets/media/${bp}/${name}@1x.webp 1x, /assets/media/${bp}/${name}.webp 2x`
                 : `/assets/media/${bp}/${name}_still@1x.webp 1x, /assets/media/${bp}/${name}_still.webp 2x`;
-        lbContent.innerHTML = `<picture>
-            <source media="(min-width:1024px)" srcset="${srcset('desktop')}">
-            <source media="(min-width:768px)" srcset="${srcset('tablet')}">
-            <source media="(min-width:0px)" srcset="${srcset('mobile')}">
-            <img src="/assets/media/thumbnail/${name}.webp" alt="">
-        </picture>`;
+        const picture = document.createElement('picture');
+        const s1 = document.createElement('source');
+        s1.media = '(min-width:1024px)';
+        s1.srcset = srcset('desktop');
+        const s2 = document.createElement('source');
+        s2.media = '(min-width:768px)';
+        s2.srcset = srcset('tablet');
+        const s3 = document.createElement('source');
+        s3.media = '(min-width:0px)';
+        s3.srcset = srcset('mobile');
+        const img = document.createElement('img');
+        img.src = `/assets/media/thumbnail/${name}.webp`;
+        img.alt = '';
+        picture.append(s1, s2, s3, img);
+        lbContent.replaceChildren(picture);
     }
     lbCaption.textContent = caption || '';
     dialog.removeAttribute('inert');
@@ -63,7 +83,7 @@ function closeLightbox() {
     }
     lightboxOpener = null;
     document.body.style.overflow = '';
-    if (lbContent) lbContent.innerHTML = '';
+    if (lbContent) lbContent.replaceChildren();
     if (lbCaption) lbCaption.textContent = '';
     dialog.setAttribute('aria-hidden', 'true');
     dialog.setAttribute('inert', '');