yeah, it works without javascript now, fuck it, why not

assets/base.css

@@ -1,7 +1,7 @@
 @import url(fonts.css);
 
 :root {
-    --vh: 1vh
+    --vh: 1vh;
 }
 
 html {
@@ -30,6 +30,10 @@ p, d {
     margin-bottom: 0
 }
 
+d:not(d:only-child):hover {
+    color: var(--c-bg); background-color: var(--c-fg)
+}
+
 a {
     font-family: "mono";
     color: var(--c-highlight);
@@ -105,26 +109,16 @@ li {
     }
 }
 
-@media screen and (min-width: 420px) and (max-width: 649px) {
-    .ascii-2 {
-        display: block !important
-    }
-}
-
-@media screen and (min-width: 650px) {
-    .ascii-1 {
-        display: block !important
-    }
-}
-
 /* styling for the basic border when no js */
 
 body > .nojs {
+    border: 2px solid var(--c-border);
+    box-sizing: border-box;
+    position: fixed;
     width: calc(100vw - 16px);
     height: calc(var(--vh) * 100 - 16px);
-    box-sizing: border-box;
-    border: 8px double var(--c-border);
-    overflow: hidden
+    top: 8px;
+    left: 8px
 }
 
 main, .js > div > div {
@@ -135,6 +129,21 @@ main, .js > div > div {
     box-sizing: border-box;
 }
 
+main {
+    overflow-y: auto !important
+}
+
+.nojs li > :is(a, d):hover + p {
+    visibility: visible;
+    display: block;
+    position: fixed;
+    box-sizing: border-box;
+    padding: 16px;
+    margin-top: 0;
+    margin-bottom: 0;
+    overflow: hidden
+}
+
 /* styling for the js mode! */
 .js {
     visibility: hidden;
@@ -147,21 +156,23 @@ main, .js > div > div {
     left: 8px
 }
 
-.js > div {
+.js > div, .nojs > :is(div, main) {
     box-sizing: border-box;
     border: 2px solid var(--c-border);
     overflow: hidden;
     position: fixed;
 }
 
+/* stuff for shaping squares */
+
 @media screen and (min-aspect-ratio: 1/1) {
-    .js > div:first-child {
+    :is(.js, .nojs) > :is(div:first-child, main) {
         width: calc(50vw - 4px - 11px);
         height: calc(var(--vh) * 100 - 16px - 10px);
         top: 13px;
         left: 13px
     }
-    .js > div:last-child {
+    :is(.js, .nojs) > div:last-child, .nojs li > :is(a, d):hover + p {
         width: calc(50vw - 4px - 11px);
         height: calc(var(--vh) * 100 - 16px - 10px);
         top: 13px;
@@ -174,13 +185,13 @@ main, .js > div > div {
 }
 
 @media screen and (max-aspect-ratio: 1000/1001) {
-    .js > div:first-child {
+    :is(.js, .nojs) > :is(div:first-child, main) {
         width: calc(100vw - 16px - 10px);
         height: calc(var(--vh) * 50 - 4px - 11px);
         top: 13px;
         left: 13px
     }
-    .js > div:last-child {
+    :is(.js, .nojs) > div:last-child, .nojs li > :is(a, d):hover + p {
         width: calc(100vw - 16px - 10px);
         height: calc(var(--vh) * 50 - 4px - 11px);
         bottom: 13px;
@@ -192,6 +203,16 @@ main, .js > div > div {
     }
 }
 
+@media (max-width: 430px) and (max-height: 430px) {
+    .nojs > div:last-child, .nojs li > :is(a, d):hover + p {
+        display: none !important
+    }
+    .nojs > main {
+        width: calc(100vw - 16px - 10px) !important;
+        height: calc(var(--vh) * 100 - 16px - 10px) !important;
+    }
+}
+
 .js > div:only-child {
     width: calc(100vw - 16px - 10px);
     height: calc(var(--vh) * 100 - 16px - 10px);
@@ -199,6 +220,8 @@ main, .js > div > div {
     left: 13px
 }
 
+/* buttons and focus */
+
 .buttons {
     white-space: pre;
     margin-left: 24px

assets/main.js

@@ -15,7 +15,9 @@ back.innerHTML = `⬑Back`
 
 window.addEventListener("load", () => {
     stylesheet = document.styleSheets[0];
-    document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
+    document.documentElement.style.setProperty("--vh", `${window.innerHeight * 0.01}px`)
+
+    document.styleSheets[3].disabled = true // this one is for non-js
 
     // randomize loading text
     fetch("/assets/loading.txt")
@@ -29,13 +31,15 @@ window.addEventListener("load", () => {
     document.body.appendChild(skipNode);
 
     // get rid of shit since we have javascript babyyyyyyy
-    if (matchMedia("(min-width: 430px) or (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)
+        stylesheet.insertRule(`@media screen and (min-width: 420px) and (max-width: 649px) { .ascii-2 { display: block !important } }`, stylesheet.cssRules.length)
+        stylesheet.insertRule(`@media screen and (min-width: 650px) { .ascii-1 { display: block !important } }`, stylesheet.cssRules.length)
 
         document.querySelectorAll("head style").forEach(style => style.remove());
         jsDiv = document.getElementsByClassName("js")[0]

assets/nojs-atmedia.css

@@ -0,0 +1,27 @@
+@media screen and (min-aspect-ratio: 1000/1000) {
+    @media screen and (min-width: 840px) and (max-width: 1299px) {
+        .ascii-2 {
+            display: block !important
+        }
+    }
+
+    @media screen and (min-width: 1300px) {
+        .ascii-1 {
+            display: block !important
+        }
+    }
+}
+
+@media screen and (max-aspect-ratio: 1000/1001) {
+    @media screen and (min-width: 420px) and (max-width: 649px) {
+        .ascii-2 {
+            display: block !important
+        }
+    }
+
+    @media screen and (min-width: 650px) {
+        .ascii-1 {
+            display: block !important
+        }
+    }
+}