worky on mobile now!

assets/base.css

@@ -93,6 +93,19 @@ li {
     opacity: 0
 }
 
+.hyper {
+    color: var(--c-highlight);
+    right: 64px;
+    left: auto !important;
+    text-decoration: underline;
+}
+
+.hyper:hover {
+    color: var(--c-bg);
+    background-color: var(--c-highlight);
+    cursor: pointer
+}
+
 /* here are some @media rules to choose when to display ascii art */
 
 .ascii > div, .splash {
@@ -182,6 +195,20 @@ main {
         top: 0;
         left: calc(50vw + 24px);
     }
+    @media (600px < width < 632px) {
+        .hyper {
+            right: 32px !important
+        }
+    }
+    @media (max-width: 600px) {
+        .title2:not(:last-child) {
+            display: none
+        }
+        .hyper {
+            left: calc(50vw + 24px) !important;
+            right: auto !important;
+        }
+    }
 }
 
 @media screen and (max-aspect-ratio: 1000/1001) {
@@ -201,9 +228,23 @@ main {
         top: calc(var(--vh) * 50 - 12px);
         left: 32px;
     }
+    @media (300px < width < 332px) {
+        .hyper {
+            right: 32px !important
+        }
+    }
+    @media (max-width: 300px) {
+        .title2:not(:last-child) {
+            display: none
+        }
+        .hyper {
+            left: 32px !important;
+            right: auto !important;
+        }
+    }
 }
 
-@media (max-width: 430px) and (max-height: 430px) {
+@media (max-width: 430px) and (max-height: 430px), (any-hover: none) {
     .nojs > div:last-child, .nojs li > :is(a, d):hover + p {
         display: none !important
     }

assets/main.js

@@ -43,6 +43,26 @@ window.addEventListener("load", () => {
 
         document.querySelectorAll("head style").forEach(style => style.remove());
         jsDiv = document.getElementsByClassName("js")[0]
+
+        if (matchMedia("(any-hover: none), not (pointer: fine)").matches) {
+            for (let node of document.getElementById("users").children) {
+                const a = node.children[0]
+                if (a.hasAttribute("href")) {
+                    a.setAttribute("data-href", a.href)
+                    a.setAttribute("tabindex", "0")
+                    a.removeAttribute("href")
+                }
+            }
+            for (let node of document.getElementById("services").children) {
+                const a = node.children[0]
+                if (a.hasAttribute("href")) {
+                    a.setAttribute("data-href", a.href)
+                    a.setAttribute("tabindex", "0")
+                    a.removeAttribute("href")
+                }
+            }
+        }
+
         tui.home()
     }
 });
@@ -232,6 +252,20 @@ const tui = {
                 } else if (onMainList) {
                     jsDiv.children[1].children[0].innerHTML = ""
                 }
+
+                if (onMainList) {
+                    for (let node of document.getElementsByClassName("hyper"))
+                        node.remove()
+
+                    if (focused.hasAttribute("data-href")) {
+                        const link = document.createElement("a")
+                        link.className = "title2 hyper"
+                        link.href = focused.getAttribute("data-href")
+                        link.innerHTML = "Go to site"
+                        jsDiv.children[1].appendChild(link)
+                    }
+                }   
+                
                 indexFocus()
                 break
         }
@@ -264,6 +298,19 @@ document.addEventListener("mouseover", (e) => {
     }
 })
 
+document.addEventListener("mousedown", (e) => {
+    if (!jsDiv) {return}
+    if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
+        e.target.focus()
+        if (side == 0 && focusListSecond.includes(document.activeElement)) {
+            side = 1
+        } else if (side == 1 && focusListMain.includes(document.activeElement)) {
+            side = 0
+        }
+        tui.updateFocus()
+    }
+})
+
 document.addEventListener("keydown", (e) => {
     if (!jsDiv) { return }
     let focused = document.activeElement