noitce + splash & one more stylechange..

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();
 })();