diff --git a/README.md b/README.md index ea3f1e7..35aabd7 100644 --- a/README.md +++ b/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. diff --git a/preview.png b/preview.png new file mode 100644 index 0000000..8e1af6b Binary files /dev/null and b/preview.png differ diff --git a/publish/quartz.custom.scss b/publish/quartz.custom.scss index d7fa476..e998724 100644 --- a/publish/quartz.custom.scss +++ b/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 { diff --git a/publish/threadwell-reader.js b/publish/threadwell-reader.js index 29f6b64..03c5e66 100644 --- a/publish/threadwell-reader.js +++ b/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(); })();