updated styling.

+ syntax highlighter with prism.js trough a CDN
 + some better styling in general with CSS (now the body md gets placed in a div which you can modify)
 + first attempt on lazyloading with js for non lazyloadable things

js/post/lazyimg.js

@@ -0,0 +1,54 @@
+/**
+ * Still very experimental, does not yet work as intended.
+ * Will keep updating this.
+ */
+document.addEventListener("DOMContentLoaded", () => {
+  const images = document.querySelectorAll("img");
+  images.forEach(img => {
+    if (!img.dataset.src) {
+      img.dataset.src = img.src;
+      img.src = ""; // prevent immediate loading
+    }
+  });
+
+  const svgs = document.querySelectorAll("svg");
+  svgs.forEach(svg => {
+    if (!svg.dataset.svg) {
+      svg.dataset.svg = svg.innerHTML;
+      svg.innerHTML = ""; // clear for lazy-loading
+    }
+  });
+
+  const lazyElements = document.querySelectorAll("img[data-src], svg[data-svg]");
+
+  if ("IntersectionObserver" in window) {
+    const observer = new IntersectionObserver((entries, obs) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const el = entry.target;
+
+          if (el.tagName === "IMG" && el.dataset.src) {
+            el.src = el.dataset.src;
+            el.removeAttribute("data-src");
+          }
+
+          if (el.tagName === "SVG" && el.dataset.svg) {
+            el.innerHTML = el.dataset.svg;
+            el.removeAttribute("data-svg");
+          }
+
+          obs.unobserve(el);
+        }
+      });
+    }, { rootMargin: "100px" });
+
+    lazyElements.forEach(el => observer.observe(el));
+  } else {
+    // Fallback: load all immediately
+    lazyElements.forEach(el => {
+      if (el.tagName === "IMG" && el.dataset.src) el.src = el.dataset.src;
+      if (el.tagName === "SVG" && el.dataset.svg) el.innerHTML = el.dataset.svg;
+    });
+  }
+});
+