mobile

scripts/extras.js

@@ -1,20 +1,24 @@
 document.getElementById("open-fin-modal").addEventListener("click", function() {
     document.getElementById("fin-modal").style.visibility = "visible";
+    document.body.classList.add("modal-open");
 });
 
 document.querySelectorAll(".close-fin-modal").forEach(function(button) {
     button.addEventListener("click", function() {
         document.getElementById("fin-modal").style.visibility = "hidden";
+        document.body.classList.remove("modal-open");
     });
 });
 
 document.getElementById("open-game-modal").addEventListener("click", function() {
     document.getElementById("game-modal").style.visibility = "visible";
+    document.body.classList.add("modal-open");
 });
 
 document.querySelectorAll(".close-game-modal").forEach(function(button) {
     button.addEventListener("click", function() {
         document.getElementById("game-modal").style.visibility = "hidden";
+        document.body.classList.remove("modal-open");
     });
 });
 

scripts/main.js

@@ -102,10 +102,12 @@ document.addEventListener("DOMContentLoaded", function() {
             `;
             document.body.insertAdjacentHTML("beforeend", modalHtml);
             const modal = document.getElementById("image-modal");
-            modal.style.visibility = "visible";
+            modal.style.visibility = 'visible';
+            document.body.classList.add("modal-open");
 
             modal.querySelector(".close").addEventListener("click", () => {
                 modal.remove();
+                document.body.classList.remove("modal-open");
             });
         });
     });

styles/main.css

@@ -411,10 +411,16 @@ nav {
     visibility: hidden;
 }
 
+/* Prevent background scrolling while a modal is open */
+body.modal-open {
+    overflow: hidden;
+    touch-action: none;
+}
+
 .close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
+    position: fixed;
+    top: 12px;
+    right: 12px;
     font-size: 2rem;
     background-color: var(--nav-btn-bg);
     border: 1px solid var(--nav-btn-border);
@@ -444,6 +450,8 @@ nav {
     position: relative;
     color: var(--text-color);
     transition: background-color 0.25s ease, color 0.25s ease;
+    max-height: calc(100vh - 48px);
+    overflow: auto;
 }
 
 /* Make images inside modals larger while constraining to viewport */