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