Improve page responsiveness on mobile

.gitignore

@@ -1 +1,4 @@
 out/index.html
+
+# JetBrains IDE project settings
+.idea/

out/mobile-menu.js

@@ -0,0 +1,39 @@
+document.querySelectorAll("nav img, nav a").forEach(e => {
+    e.addEventListener("click", () => {
+        document.querySelector("nav").classList.toggle("visible");
+        document.querySelector("nav").scrollTo({ top: 0, behavior: "smooth" }); // Reset scroll position
+    })
+});
+
+window.addEventListener('load', () => {
+    document.querySelector("nav").scrollTo({ top: 0 });
+    fixViewportUnits();
+});
+
+window.addEventListener('resize', () => {
+    fixViewportUnits();
+});
+
+// So basically, turns out some mobile browsers calculate viewport units as a % of the entire screen instead of the viewport itself.
+// We're ""fixing"" this by statically replacing styles using "vh" with px values that are calculated on page load for all small screens.
+// This is a pretty cursed solution, but at least it works
+var viewportStylesheet = document.createElement("style");
+document.body.appendChild(viewportStylesheet);
+function fixViewportUnits() {
+    if (window.innerWidth < 800) {
+        const height = `${window.innerHeight}px`;
+
+        // Add a new stylesheet to fix the height
+        viewportStylesheet.innerHTML = `
+            body {
+                grid-template-rows: ${height};
+            }
+
+            nav.visible {
+                height: ${height};
+            }
+        `;
+    } else {
+        viewportStylesheet.innerHTML = '';
+    }
+}

out/scroll.js

@@ -2,44 +2,49 @@ const nav = document.getElementsByTagName("nav")[0];
 const main = document.getElementsByTagName("main")[0]
 
 const calcNavAmounts = (root, root_top, root_bottom, root_min, root_max) => {
-	let nav_amounts = [];
-	for (const child of root.children) {
-		const rect = child.getBoundingClientRect();
-		const nest_min = (rect.top - root_top) / (root_bottom - root_top);
-		const nest_max = (rect.bottom - root_top) / (root_bottom - root_top);
-		const min = root_min + (root_max - root_min) * nest_min;
-		const max = root_min + (root_max - root_min) * nest_max;
-		if (child.tagName === "A") {
-			id = child.href.substring(child.href.lastIndexOf("#") + 1)
-			nav_amounts.push({ id: id, min: min, max: max });
-		} else {
-			nav_amounts = nav_amounts.concat(calcNavAmounts(child, rect.top, rect.bottom, min, max));
-		}
-	}
-	return nav_amounts;
+    let nav_amounts = [];
+    for (const child of root.children) {
+        const rect = child.getBoundingClientRect();
+        const nest_min = (rect.top - root_top) / (root_bottom - root_top);
+        const nest_max = (rect.bottom - root_top) / (root_bottom - root_top);
+        const min = root_min + (root_max - root_min) * nest_min;
+        const max = root_min + (root_max - root_min) * nest_max;
+        if (child.tagName === "A") {
+            id = child.href.substring(child.href.lastIndexOf("#") + 1)
+            nav_amounts.push({ id: id, min: min, max: max });
+        } else {
+            nav_amounts = nav_amounts.concat(calcNavAmounts(child, rect.top, rect.bottom, min, max));
+        }
+    }
+    return nav_amounts;
 };
 
 const calcAllNavAmounts = () => {
-	const rect = nav.getBoundingClientRect();
-	return calcNavAmounts(nav, rect.top, rect.bottom, 0.0, 1.0);
+    const rect = nav.getBoundingClientRect();
+    return calcNavAmounts(nav, rect.top, rect.bottom, 0.0, 1.0);
 };
 
 
 const updateScroll = () => {
-	let min = 0.0;
-	let max = 0.0;
-	for (const section of calcAllNavAmounts()) {
-		const header = document.getElementById(section.id);
-		if (window.scrollY + 1 >= header.offsetTop) {
-			min = section.min;
-			max = section.max;
-		}
-	}
-	const start = min * 100;
-	const end = max * 100;
-	nav.style.background = `linear-gradient(180deg, #ffffff10 ${start}%, #0000 ${end}%)`;
+    // Don't change background color on mobile
+    if (window.innerWidth < 800) {
+        return nav.style.removeProperty("background");
+    }
+
+    let min = 0.0;
+    let max = 0.0;
+    for (const section of calcAllNavAmounts()) {
+        const header = document.getElementById(section.id);
+        if (main.scrollTop + 1 >= header.offsetTop) {
+            min = section.min;
+            max = section.max;
+        }
+    }
+    const start = min * 100;
+    const end = max * 100;
+    nav.style.background = `linear-gradient(180deg, #ffffff10 ${start}%, #0000 ${end}%)`;
 };
 
 updateScroll();
-window.addEventListener("scroll", updateScroll);
+main.addEventListener("scroll", updateScroll);
 window.addEventListener("resize", updateScroll);