From 409296ab1c3bcad69cc4580119b7fa4458273777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mark=20Randall=20Havens=20=E2=96=B3=20The=20Empathic=20Tec?=
 =?UTF-8?q?hnologist=20=E2=9F=81=20Doctor=20Who=2042?=
 <mark.r.havens@gmail.com>
Date: Sat, 8 Nov 2025 09:59:10 -0600
Subject: [PATCH] Update index.html

---
 public/index.html | 69 +++++++++++++++++++++--------------------------
 1 file changed, 30 insertions(+), 39 deletions(-)
diff --git a/public/index.html b/public/index.html
index 3bea6ed..7e3343e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,62 +1,53 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <title>FoldWithin Earth</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>FoldWithin</title>
 
-  <!-- CSP: allow self + jsdelivr for marked & dompurify. add SRI later if desired -->
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self';
                  script-src 'self' https://cdn.jsdelivr.net;
                  style-src 'self' 'unsafe-inline';
                  img-src 'self' data:;
-                 frame-src 'self';">
+                 frame-src 'self';" />
 
-  <!-- markdown + sanitize (CDN). works offline if cached by the browser -->
+  <link rel="stylesheet" href="styles.css" />
   <script src="https://cdn.jsdelivr.net/npm/marked@14.1.2/marked.min.js" defer></script>
   <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js" defer></script>
-
-  <link rel="stylesheet" href="/styles.css" />
-  <script defer src="/app.js"></script>
+  <script src="app.js" defer></script>
 </head>
+
 <body>
+  <button id="navToggle" class="nav-toggle" aria-label="Toggle navigation">☰</button>
   <div id="app">
     <aside class="sidebar">
-      <header class="sidehead">
-        <h1>FoldWithin</h1>
-        <div class="controls">
-          <label>
-            Sort:
-            <select id="sort">
-              <option value="date">Date (new → old)</option>
-              <option value="alpha">A → Z</option>
-            </select>
-          </label>
-          <label>
-            Filter:
-            <select id="filter">
-              <option value="all">All</option>
-              <option value="pinned">Pinned</option>
-              <option value="posts">Posts</option>
-            </select>
-          </label>
-        </div>
-      </header>
-      <nav id="tree" role="tree" aria-label="Site navigation"></nav>
+      <h1>FoldWithin</h1>
+      <div class="controls">
+        <label>Sort:
+          <select id="sortSel">
+            <option value="new">Date (new → old)</option>
+            <option value="old">Date (old → new)</option>
+            <option value="alpha">Title (A → Z)</option>
+          </select>
+        </label>
+        <label>Filter:
+          <select id="filterSel">
+            <option value="all">All</option>
+            <option value="pinned">Pinned</option>
+            <option value="posts">Posts</option>
+          </select>
+        </label>
+      </div>
+      <nav id="tree" role="tree"></nav>
     </aside>
 
     <main class="content">
       <div class="viewer">
-        <iframe id="htmlFrame"
-                sandbox="allow-scripts allow-forms allow-popups allow-modals allow-downloads"
-                hidden
-                loading="lazy"></iframe>
-        <article id="mdContainer" class="md" hidden></article>
+        <div id="meta"></div>
+        <iframe id="htmlView" sandbox="allow-scripts allow-forms allow-popups allow-modals allow-downloads"></iframe>
+        <div id="mdView" class="md"></div>
       </div>
-      <footer class="foot">
-        <span id="meta"></span>
-      </footer>
     </main>
   </div>
 </body>
