Add maximum width to all guides

index.html

@@ -79,9 +79,7 @@
           </div>
           <div class="features">
             <h2>
-              <div class="maxw">
+              Extra Features
-                <div>Extra Features</div>
-              </div>
             </h2>
             <div class="maxw">
               <h3 class="nobg">Jump to section/item</h3>

src/scripts/pages/chemistry.ts

@@ -82,11 +82,11 @@ export function processChemistry(root: HTMLElement): void {
         return;
       }
       const rows = Array.from(row.querySelectorAll("td")).slice(1);
-      let treatment = null;
+      let treatment: HTMLTableCellElement = null;
-      let desc = null;
+      let desc: HTMLTableCellElement = null;
-      let metabolism = null;
+      let metabolism: HTMLTableCellElement = null;
-      let overdose = null;
+      let overdose: HTMLTableCellElement = null;
-      let addiction = null;
+      let addiction: HTMLTableCellElement = null;
       // Handle special cases
       switch (section) {
         case "Components":

src/ui/TabManager.ts

@@ -23,26 +23,32 @@ function initWaiting(elem: HTMLElement) {
   elem.appendChild(spinnerContainer);
 }
 
-async function loadPage(page: string, elem: HTMLElement): Promise<HTMLElement> {
+async function loadPage(
+  page: string,
+  elem: HTMLElement,
+  useCache: boolean
+): Promise<HTMLElement> {
   let html: string | null = null;
   const key = `page:${page}`;
 
   // Check cache for pre-processed page
-  try {
+  if (useCache) {
-    const cachedPage = await cache.get<string>(key);
+    try {
-    if (cachedPage) {
+      const cachedPage = await cache.get<string>(key);
-      // Get expected version
+      if (cachedPage) {
-      const expectedVersion =
+        // Get expected version
-        page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
+        const expectedVersion =
-      if (cachedPage.version === expectedVersion) {
+          page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
-        console.log(`${page}: found cached entry`);
+        if (cachedPage.version === expectedVersion) {
-        html = cachedPage.value;
+          console.log(`${page}: found cached entry`);
-      } else {
+          html = cachedPage.value;
-        console.log(`${page}: found outdated cache entry`);
+        } else {
+          console.log(`${page}: found outdated cache entry`);
+        }
       }
+    } catch (e) {
+      console.log(`${page}: failed to retrieve cache entry:`, e);
     }
-  } catch (e) {
-    console.log(`${page}: failed to retrieve cache entry:`, e);
   }
 
   // Fetch page content
@@ -121,7 +127,9 @@ export default class TabManager {
 
   sectionMap: Record<string, string> = {};
 
-  loading: boolean;
+  loading = false;
+
+  cacheEnabled = true;
 
   constructor(
     sectionlist: HTMLElement,
@@ -254,7 +262,7 @@ export default class TabManager {
     }
 
     // Start loading page for new tab
-    const elem = await loadPage(page, tabContentItem);
+    const elem = await loadPage(page, tabContentItem, this.cacheEnabled);
     // Since element can be replaced (when loading for the first time), make sure the reference is updated
     if (elem !== tabContentItem) {
       this.sections[section].tabs[page].tabContentItem = elem;

style/pages/global.scss

@@ -1,3 +1,5 @@
+$max-width: 960px;
+
 .bgus_hidden {
   display: none !important;
 }
@@ -30,3 +32,49 @@
 .thumbinner {
   width: 100% !important;
 }
+
+.page {
+  max-width: $max-width;
+  margin: 0 auto;
+
+  h1.pageheader {
+    margin-top: 0;
+    padding: 15pt 10pt;
+  }
+
+  p,
+  h2,
+  h3,
+  h4 {
+    padding-left: 10pt;
+    padding-right: 10pt;
+  }
+  a[href] {
+    color: white;
+  }
+  h1,
+  h2,
+  h3 {
+    position: sticky;
+    top: 0;
+    background: $nanotrasen;
+    padding: 10pt;
+    z-index: 999;
+    max-width: $max-width;
+    &:before {
+      display: block;
+      content: " ";
+      left: -100%;
+      right: calc((960px - 100vw) / 2 + 10px);
+      top: 0;
+      height: 100%;
+      position: absolute;
+      z-index: -99;
+      background: $nanotrasen;
+    }
+  }
+  .mw-headline {
+    display: flex;
+    align-items: center;
+  }
+}

style/pages/welcome.scss

@@ -36,12 +36,6 @@
         transition: all 200ms;
     }
 
-    .maxw {
-        margin: 0 auto;
-        max-width: 960px;
-        text-align: left;
-    }
-
     h3 {
         font-size: 15pt;
     }
@@ -52,6 +46,9 @@
         padding-bottom: 0;
         position: relative;
         z-index: 2;
+        &:before {
+            display: none;
+        }
     }
 
     code {

style/ui.scss

@@ -84,14 +84,13 @@ body {
     flex: 1;
     z-index: 1;
     display: grid;
-    overflow: hidden;
+    overflow: auto;
     .page {
         //visibility: hidden;
         will-change: display;
         &:not(.active) {
             display: none;
         }
-        overflow-y: auto;
         grid-row: 1;
         grid-column: 1;
         &.active {
@@ -109,35 +108,6 @@ body {
                 height: 100%;
             }
         }
-
-        h1.pageheader {
-            margin-top: 0;
-            padding: 15pt 10pt;
-        }
-
-        p,
-        h2,
-        h3,
-        h4 {
-            padding-left: 10pt;
-            padding-right: 10pt;
-        }
-        a[href] {
-            color: white;
-        }
-        h1,
-        h2,
-        h3 {
-            position: sticky;
-            top: 0;
-            background: $nanotrasen;
-            padding: 10pt;
-            z-index: 999;
-        }
-        .mw-headline {
-            display: flex;
-            align-items: center;
-        }
     }
 }