noitce + splash & one more stylechange..

README.md

@@ -6,6 +6,10 @@ An [Obsidian](https://obsidian.md) vault published with [Quartz 5](https://quart
 
 Live: [threadwell.edsabode.dev](https://threadwell.edsabode.dev)
 
+This has only been around since Aug 22nd, 2026. If you have suggestions on how to render archive artifacts or maybe something better than the current techstack to wrangle the artifacts I'm open ears.
+
+![preview](./preview.png)
+
 ## Post an issue for an inaccuracy
 
 I'll correct it.

publish/quartz.custom.scss

@@ -9,18 +9,29 @@
   }
 }
 
-body.threadwell-wide .page > #quartz-body {
-  @media all and ($desktop) {
-    grid-template-columns: 0 minmax(0, 1fr) 0;
-  }
-  @media all and ($tablet) {
-    grid-template-columns: 0 minmax(0, 1fr);
-  }
+body.threadwell-wide .page {
+  max-width: none;
 }
 
-body.threadwell-wide .page > #quartz-body > .left,
-body.threadwell-wide .page > #quartz-body > .right {
-  display: none;
+body.threadwell-wide .page > #quartz-body {
+  grid-template-columns: minmax(0, 1fr) !important;
+  grid-template-areas:
+    "grid-header"
+    "grid-center"
+    "grid-footer" !important;
+}
+
+body.threadwell-wide .sidebar.left,
+body.threadwell-wide .sidebar.right {
+  display: none !important;
+}
+
+body.threadwell-wide .center,
+body.threadwell-wide .center > article {
+  max-width: 46rem !important;
+  min-width: 0 !important;
+  width: 100% !important;
+  margin-inline: auto;
 }
 
 article img {
@@ -30,16 +41,16 @@ article img {
 }
 
 .threadwell-wide-btn {
-  position: fixed;
-  right: 1rem;
-  bottom: 1rem;
-  z-index: 40;
-  padding: 0.4rem 0.7rem;
+  display: inline-block;
+  margin: 0 0 0.75rem 0;
+  padding: 0.25rem 0.6rem;
   border: 1px solid var(--gray);
   border-radius: 6px;
   background: var(--light);
   color: var(--dark);
   cursor: pointer;
+  font: inherit;
+  font-size: 0.85rem;
 }
 
 .threadwell-zoom {

publish/threadwell-reader.js

@@ -5,6 +5,10 @@
     return document.querySelector("article");
   }
 
+  function isWide() {
+    return document.body.classList.contains("threadwell-wide");
+  }
+
   function setWide(on) {
     document.body.classList.toggle("threadwell-wide", on);
     try {
@@ -15,30 +19,35 @@
     const btn = document.getElementById("threadwell-wide");
     if (btn) {
       btn.setAttribute("aria-pressed", on ? "true" : "false");
-      btn.textContent = on ? "Narrow" : "Wide";
+      btn.textContent = on ? "Show sidebars" : "Wide thread";
     }
   }
 
-  function addWideButton() {
-    if (document.getElementById("threadwell-wide")) {
-      return;
+  function placeButton() {
+    let btn = document.getElementById("threadwell-wide");
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.id = "threadwell-wide";
+      btn.type = "button";
+      btn.className = "threadwell-wide-btn";
+      btn.addEventListener("click", () => {
+        setWide(!isWide());
+      });
     }
-    const btn = document.createElement("button");
-    btn.id = "threadwell-wide";
-    btn.type = "button";
-    btn.className = "threadwell-wide-btn";
-    btn.textContent = "Wide";
-    btn.addEventListener("click", () => {
-      setWide(!document.body.classList.contains("threadwell-wide"));
-    });
-    document.body.appendChild(btn);
+    const host =
+      document.querySelector(".center .page-header") ||
+      document.querySelector(".center") ||
+      document.body;
+    if (btn.parentElement !== host) {
+      host.prepend(btn);
+    }
+    let stored = "0";
     try {
-      if (localStorage.getItem(WIDE_KEY) === "1") {
-        setWide(true);
-      }
+      stored = localStorage.getItem(WIDE_KEY) || "0";
     } catch (_err) {
-      /* ignore */
+      stored = "0";
     }
+    setWide(stored === "1");
   }
 
   function closeZoom() {
@@ -66,7 +75,8 @@
     if (!(target instanceof HTMLImageElement)) {
       return;
     }
-    if (!articleRoot() || !articleRoot().contains(target)) {
+    const article = articleRoot();
+    if (!article || !article.contains(target)) {
       return;
     }
     if (target.closest("#threadwell-zoom")) {
@@ -82,5 +92,6 @@
     }
   });
   document.addEventListener("click", onArticleClick);
-  addWideButton();
+  document.addEventListener("nav", placeButton);
+  placeButton();
 })();