changelog: updated

website/index.html

@@ -76,9 +76,23 @@
       }
 
       let storedLayout;
-      try { storedLayout = localStorage.getItem("split-view"); } catch (_) {}
-      const isSplit = storedLayout !== "false" && window.matchMedia("(min-width: 768px)").matches;
+      try {
+        storedLayout = localStorage.getItem("split-view");
+      } catch (_) {}
+      const isSplit =
+        storedLayout !== "false" &&
+        window.matchMedia("(min-width: 768px)").matches;
       document.documentElement.dataset.layout = isSplit ? "split" : "full";
+
+      try {
+        const savedWidth = localStorage.getItem("bar-width");
+        if (savedWidth) {
+          window.document.documentElement.style.setProperty(
+            "--sidebar-width",
+            `${savedWidth}px`,
+          );
+        }
+      } catch (_) {}
     </script>
     <script type="module" src="/scripts/entry.js"></script>
 
@@ -111,7 +125,6 @@
         </header>
         <ul id="search-results"></ul>
       </search>
-
     </main>
     <div id="resize-bar"></div>
     <aside id="aside">
@@ -127,12 +140,7 @@
           title="View sidebar"
           class="full-only"
         >
-          <input
-            type="radio"
-            name="frame"
-            id="aside-selector"
-            value="aside"
-          />
+          <input type="radio" name="frame" id="aside-selector" value="aside" />
           View
         </label>
 
@@ -141,11 +149,7 @@
           Browse
         </label>
 
-        <label
-          id="search-selector-label"
-          for="search-selector"
-          title="Search"
-        >
+        <label id="search-selector-label" for="search-selector" title="Search">
           <input
             type="radio"
             name="frame"
@@ -166,17 +170,5 @@
         <a id="share-anchor" href="/"></a>
       </div>
     </div>
-
-    <script>
-      try {
-        // Prevent width jumping
-        const savedWidth = localStorage.getItem("bar-width");
-        if (savedWidth) {
-          const main = window.document.getElementById("main");
-          if (!main) throw "Should exist";
-          main.style.width = `${savedWidth}px`;
-        }
-      } catch (_) {}
-    </script>
   </body>
 </html>

website/scripts/main.js

@@ -198,19 +198,20 @@ onFirstIntersection(navElement, () => {
 function initResizeBar() {
   const bar = getElementById("resize-bar");
   const key = "bar-width";
+  const root = document.documentElement;
   const max = () => parseFloat(style.getPropertyValue("--max-main-width")) / 100 * window.innerWidth;
 
   const saved = readStored(key);
-  if (saved) mainElement.style.width = `${saved}px`;
+  if (saved) root.style.setProperty("--sidebar-width", `${saved}px`);
 
   /** @param {number | null} width */
   function setWidth(width) {
     if (width != null) {
       const clamped = Math.min(width, max());
-      mainElement.style.width = `${clamped}px`;
+      root.style.setProperty("--sidebar-width", `${clamped}px`);
       writeToStorage(key, String(clamped));
     } else {
-      mainElement.style.width = "";
+      root.style.removeProperty("--sidebar-width");
       removeStored(key);
     }
   }

website/scripts/utils/theme.js

@@ -23,8 +23,12 @@ export function onChange(callback) {
 function setDark(value) {
   if (dark === value) return;
   dark = value;
-  apply(value);
-  callbacks.forEach((cb) => cb());
+  const swap = () => {
+    apply(value);
+    callbacks.forEach((cb) => cb());
+  };
+  if (document.startViewTransition) document.startViewTransition(swap);
+  else swap();
 }
 
 /** @param {boolean} isDark */

website/styles/elements.css

@@ -76,7 +76,9 @@ body {
   position: relative;
 
   html[data-layout="split"] & {
-    grid-template-columns: minmax(min-content, auto) 1fr;
+    grid-template-columns:
+      minmax(min-content, var(--sidebar-width, max-content))
+      1fr;
 
     html[data-display="standalone"] & {
       border-top: 1px;
@@ -267,7 +269,6 @@ summary {
   }
 }
 
-
 html[data-layout="split"] .full-only {
   display: none !important;
 }

website/styles/main.css

@@ -40,9 +40,8 @@ main {
   }
 
   html[data-layout="split"] & {
-    min-width: 100%;
-    max-width: var(--max-main-width);
     overflow-x: hidden;
+    contain: inline-size;
   }
 
   > nav,