From 64aa87fe9d2647def0c74804193c621de49ec5d9 Mon Sep 17 00:00:00 2001
From: lordtet <lordtet@lordnet.sh>
Date: Wed, 25 Mar 2026 19:55:27 -0400
Subject: [PATCH] Mobile variant with fixed window type.

---
 src/assets/css/phosphor.css | 28 ++++++++++++++++++++++++++++
 src/assets/js/wm.js         | 11 +++++++----
 src/blog/posts/_template.md |  1 -
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/phosphor.css b/src/assets/css/phosphor.css
index bcebcc0..6ed2615 100644
--- a/src/assets/css/phosphor.css
+++ b/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; }
+}
diff --git a/src/assets/js/wm.js b/src/assets/js/wm.js
index 9987a0f..68cd444 100644
--- a/src/assets/js/wm.js
+++ b/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");
 
diff --git a/src/blog/posts/_template.md b/src/blog/posts/_template.md
index 8da3c4b..ce6d69d 100644
--- a/src/blog/posts/_template.md
+++ b/src/blog/posts/_template.md
@@ -20,4 +20,3 @@ code block
 - list item
 - list item
 
-![alt text](/assets/img/example.png)