Mobile variant with fixed window type.

src/assets/css/phosphor.css

@@ -609,3 +609,31 @@ body { animation: flicker 12s infinite; }
 .img-revealer.revealed img {
   display: block;
 }
+
+/* Mobile */
+
+@media (pointer: coarse) {
+  /* Use dynamic viewport height so the browser address bar doesn't cut off the bottom */
+  .desktop { height: 100dvh; }
+
+  /* Windows fill the viewport below the header (26px + 2px border = 28px) */
+  .window {
+    position: fixed !important;
+    top: 28px !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: auto !important;
+    height: auto !important;
+    max-height: none !important;
+    min-width: unset !important;
+    transform: none !important;
+  }
+
+  /* Title bar is not a drag handle on mobile */
+  .window-titlebar { cursor: default; }
+
+  /* Maximize and resize are redundant when windows are already fullscreen */
+  .win-btn.maximize,
+  .win-resize { display: none; }
+}

src/assets/js/wm.js

@@ -10,6 +10,8 @@ const WM = (() => {
   let drag = null;
   let resize = null;
 
+  const mobile = () => window.matchMedia("(pointer: coarse)").matches;
+
   /*  Init  */
 
   function init() {
@@ -90,9 +92,10 @@ const WM = (() => {
     const hidden = win.classList.contains("hidden");
     state.set(id, { el: win, hidden, maximized: false, savedStyle: null });
 
-    // Draggable title bar
+    // Draggable title bar (desktop only)
     const bar = win.querySelector(".window-titlebar");
     bar.addEventListener("mousedown", e => {
+      if (mobile()) return;
       if (e.button !== 0 || e.target.closest(".win-btn")) return;
       startDrag(e, win);
     });
@@ -108,9 +111,9 @@ const WM = (() => {
     q(".win-btn.close")   ?.addEventListener("click", () => closeAction === "back" ? history.back() : hide(id));
     q(".win-btn.maximize")?.addEventListener("click", () => toggleMax(id));
 
-    // Resize handle
+    // Resize handle (desktop only)
     q(".win-resize")?.addEventListener("mousedown", e => {
-      if (e.button !== 0) return;
+      if (mobile() || e.button !== 0) return;
       e.preventDefault(); e.stopPropagation();
       const r = win.getBoundingClientRect();
       resize = { el: win, x0: e.clientX, y0: e.clientY, w0: r.width, h0: r.height };
@@ -182,7 +185,7 @@ const WM = (() => {
 
   function toggleMax(id) {
     const s = state.get(id);
-    if (!s) return;
+    if (!s || mobile()) return;
     const el  = s.el;
     const area = document.querySelector(".desktop-area");
 

src/blog/posts/_template.md

@@ -20,4 +20,3 @@ code block
 - list item
 - list item
 
-![alt text](/assets/img/example.png)