it looks better on mobile now but i probably did something else without noticing

assets/base.css

@@ -1,5 +1,9 @@
 @import url(fonts.css);
 
+:root {
+    --vh: 1vh
+}
+
 html {
     background-color: var(--c-bg);
     scrollbar-color: var(--c-border) transparent;
@@ -113,7 +117,7 @@ li {
 
 body > .nojs {
     width: calc(100vw - 16px);
-    height: calc(100vh - 16px);
+    height: calc(var(--vh) * 100 - 16px);
     box-sizing: border-box;
     border: 8px double var(--c-border);
     overflow: hidden
@@ -134,7 +138,7 @@ main, .js > div > div {
     box-sizing: border-box;
     position: fixed;
     width: calc(100vw - 16px);
-    height: calc(100vh - 16px);
+    height: calc(var(--vh) * 100 - 16px);
     top: 8px;
     left: 8px
 }
@@ -149,13 +153,13 @@ main, .js > div > div {
 @media screen and (min-aspect-ratio: 1/1) {
     .js > div:first-child {
         width: calc(50vw - 4px - 11px);
-        height: calc(100vh - 16px - 10px);
+        height: calc(var(--vh) * 100 - 16px - 10px);
         top: 13px;
         left: 13px
     }
     .js > div:last-child {
         width: calc(50vw - 4px - 11px);
-        height: calc(100vh - 16px - 10px);
+        height: calc(var(--vh) * 100 - 16px - 10px);
         top: 13px;
         right: 13px
     }
@@ -168,25 +172,25 @@ main, .js > div > div {
 @media screen and (max-aspect-ratio: 1000/1001) {
     .js > div:first-child {
         width: calc(100vw - 16px - 10px);
-        height: calc(50vh - 4px - 11px);
+        height: calc(var(--vh) * 50 - 4px - 11px);
         top: 13px;
         left: 13px
     }
     .js > div:last-child {
         width: calc(100vw - 16px - 10px);
-        height: calc(50vh - 4px - 11px);
+        height: calc(var(--vh) * 50 - 4px - 11px);
         bottom: 13px;
         left: 13px
     }
     .title2 {
-        top: calc(50vh - 12px);
+        top: calc(var(--vh) * 50 - 12px);
         left: 32px;
     }
 }
 
 .js > div:only-child {
     width: calc(100vw - 16px - 10px);
-    height: calc(100vh - 16px - 10px);
+    height: calc(var(--vh) * 100 - 16px - 10px);
     top: 13px;
     left: 13px
 }

assets/main.js

@@ -15,6 +15,7 @@ back.innerHTML = `⬑Back`
 
 window.addEventListener("load", () => {
     stylesheet = document.styleSheets[0];
+    document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
 
     // randomize loading text
     fetch("/assets/loading.txt")
@@ -28,13 +29,14 @@ window.addEventListener("load", () => {
     document.body.appendChild(skipNode);
 
     // get rid of shit since we have javascript babyyyyyyy
-    if (matchMedia("(min-width: 430px) and (min-height: 430px").matches) {
+    if (matchMedia("(min-width: 430px) or (min-height: 430px").matches) {
         for (let node of document.getElementsByClassName("nojs")) {
             node.style.display = "none"
         }
         stylesheet.insertRule(".js { visibility: visible }", stylesheet.cssRules.length)
         stylesheet.insertRule(".skip-notice { opacity: 1 }", stylesheet.cssRules.length)
         stylesheet.insertRule("d:focus { color: var(--c-bg); background-color: var(--c-fg) }", stylesheet.cssRules.length)
+
         document.querySelectorAll("head style").forEach(style => style.remove());
         jsDiv = document.getElementsByClassName("js")[0]
         tui.home()
@@ -244,15 +246,16 @@ function indexFocus() {
 }
 
 document.addEventListener("mouseover", (e) => {
-  if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
+    if (!jsDiv) {return}
-    e.target.focus()
+    if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
-    if (side == 0 && focusListSecond.includes(document.activeElement)) {
+        e.target.focus()
-        side = 1
+        if (side == 0 && focusListSecond.includes(document.activeElement)) {
-    } else if (side == 1 && focusListMain.includes(document.activeElement)) {
+            side = 1
-        side = 0
+        } else if (side == 1 && focusListMain.includes(document.activeElement)) {
+            side = 0
+        }
+        tui.updateFocus()
     }
-    tui.updateFocus()
-  }
 })
 
 document.addEventListener("keydown", (e) => {
@@ -326,4 +329,12 @@ document.addEventListener("keydown", (e) => {
                 focusListSecond[0].focus()
             }*/
     }
+})
+
+let resizeTimeout = 0
+window.addEventListener("resize", () => {
+    clearTimeout(resizeTimeout)
+    resizeTimeout = setTimeout(() => {
+        document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
+    }, 200)  
 })