one third for story; arrow up/down for last/next section

Author: nrchtct

index.html

@@ -62,7 +62,7 @@
             top: 0;
             left: 0;
             height: 100vh;
-            width: 60vw;
+            width: 67vw;
             position: fixed;
             background-color: #fff;
             border: 0;
@@ -74,53 +74,53 @@
             transition: opacity 0.1s ease-in;
         }
 
-        h1 { font-size: 2.4em; font-weight: 200; margin-bottom: 0;}
-        h2 { font-size: 1.8em; }
+        h1 { font-size: 2.25em; font-weight: 200; margin-bottom: 0;}
+        h2 { font-size: 1.5em; }
         h3 { font-size: 1.4em; }
         h4 { font-size: 1.2em; }
         h2, h3, h4 { font-weight: 500; }
+        h1, h2, h3, h4 { margin: .25em 0; }
 
         main {
             box-sizing: border-box;
             position: absolute;
             right: 0;
-            width: 40vw;
-            padding: 0 5vh;
+            width: 33vw;
+            padding: 0 3vh;
             margin: 0;
         }
 
         section {
             margin-top: 100vh;
-            margin-bottom: 100vh;
-        }
-
-        section:first-of-type, section:last-of-type {
+            padding: 1vh 0 0 0;
+            margin-bottom: 100vh;        
+            min-height: 100vh;
             display: flex;
             justify-content: center;
             flex-direction: column;           
         }
 
-        section:first-of-type { 
-            min-height: 100vh;
+        section:first-of-type {             
             margin-top: 0;
         }
 
         section:last-of-type {
-            min-height: 93vh;
             margin-bottom: 0;        
         }
 
         p {
             font-size: 1em;
             line-height: 1.5em;
+            margin: .5em 0;
         }
-
+        
         a {
             color: #000;
         }
 
         ul, ol {
-            padding-left: 1em;
+            padding-left: 1.25em;
+            margin: .5em 0;
         }
 
         li {
@@ -350,6 +350,37 @@
         if (event.key === 'Escape') {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
+
+        else  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const sections = Array.from(document.querySelectorAll('main section'));
+            if (sections.length === 0) return;
+
+            const currentY = window.scrollY;
+            const viewportHeight = window.innerHeight;
+
+            let targetSection = null;
+
+            if (event.key === 'ArrowDown') {
+                targetSection = sections.find(section => {
+                    const rect = section.getBoundingClientRect();
+                    return rect.top > 1; // more than 1px below the viewport top
+                });
+            } else if (event.key === 'ArrowUp') {
+                for (let i = sections.length - 1; i >= 0; i--) {
+                    const rect = sections[i].getBoundingClientRect();
+                    if (rect.bottom < -1) { // completely above the viewport
+                        targetSection = sections[i];
+                        break;
+                    }
+                }
+            }
+
+            if (targetSection) {
+                event.preventDefault();
+                targetSection.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
+
     });
 
     // Load, parse, and display markdown on page load