yea the site is even cooler now

assets/base.css

@@ -33,6 +33,10 @@ a:focus {
     background-color: var(--c-highlight);
 }
 
+a:hover {
+    cursor: pointer
+}
+
 :is(a, d) + p {
     display: none
 }
@@ -200,3 +204,8 @@ main, .js > div > div {
 :focus {
     outline: none
 }
+
+.f {
+    color: var(--c-bg);
+    background-color: var(--c-focus-secondary)
+}

assets/colors.css

@@ -5,4 +5,5 @@
     --c-splash: #74c7ec;
     --c-highlight: #cba6f7;
     --c-title: #fab387;
+    --c-focus-secondary: #b4befe;
 }

assets/main.js

@@ -1,11 +1,12 @@
 let stylesheet
 var audio = new(window.AudioContext)
 let jsDiv
+
 let mode
 let side
-let focusMain
+let focusListMain, focusListSecond, focusStart
-let focusSecond
 const focusSelector = "a, d"
+
 const back = document.createElement("a")
 back.setAttribute("onclick", "tui.home()")
 back.setAttribute("tabindex", "0")
@@ -88,6 +89,8 @@ function beep() {
 const tui = {
     home: function() {
         mode = "home"
+        side = -1
+        focusStart = 0
 
         const div = document.createElement("div")
         div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));
@@ -114,6 +117,8 @@ const tui = {
 
     about: function() {
         mode = "about"
+        side = -1
+        focusStart = 1
 
         const div = document.createElement("div")
 
@@ -135,6 +140,8 @@ const tui = {
 
     users: function() {
         mode = "users"
+        side = 0
+        focusStart = 1
 
         const div = document.createElement("div")
 
@@ -164,6 +171,8 @@ const tui = {
 
     services: function() {
         mode = "services"
+        side = 0
+        focusStart = 1
 
         const div = document.createElement("div")
 
@@ -191,58 +200,130 @@ const tui = {
         indexFocus()
     },
 
+    // does stuff based on focus changing
     updateFocus: function() {
         const focused = document.activeElement
         const sibling = focused.nextElementSibling
+        const credit = document.getElementById("credit")
+        const onMainList = (focusListMain.includes(focused))
+
+        // keep track of focus by giving both focused elements the f class
+        if (onMainList || focused == credit) {
+            for (let el of focusListMain) {
+                el.classList.remove("f")
+                credit.classList.remove("f")
+            }
+            focused.classList.add("f")
+        }
+        
         switch(mode) {
             case "users":
             case "services":
-                if (sibling && sibling.tagName === "P") {
+                if (onMainList && sibling && sibling.tagName === "P") {
                     jsDiv.children[1].children[0].replaceChildren(sibling.cloneNode(true))
-                } else {
+                } else if (onMainList) {
                     jsDiv.children[1].children[0].innerHTML = ""
                 }
+                indexFocus()
                 break
         }
     }
 }
 
 function indexFocus() {
-    focusList = Array.from(document.querySelectorAll(focusSelector)).filter(el => el.offsetParent !== null)
+    let focusList = Array.from(document.querySelectorAll(focusSelector)).filter(el => el.offsetParent !== null)
     if (jsDiv.children[1]) {
-        focusList = focusList.filter(el => !jsDiv.children[1].contains(el))
+        focusListMain = focusList.filter(el => !jsDiv.children[1].contains(el))
+        focusListSecond = focusList.filter(el => jsDiv.children[1].contains(el))
+    } else {
+        focusListMain = focusList
+        focusListSecond = []
     }
+    const back = document.getElementsByClassName("back")[0]
+    if (back) {back.classList.remove("f")}
 }
 
 document.addEventListener("mouseover", (e) => {
   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 }
-    const currentFocus = focusList.indexOf(document.activeElement)
+    let focused = document.activeElement
-    const focused = document.activeElement
+    if (!focusListMain.includes(focused) && !focusListSecond.includes(focused)) {
+        focused = document.getElementsByClassName("f")[0]
+    }
+    const list = side != 1 ? focusListMain : focusListSecond
+    const currentFocus = list.indexOf(focused)
     switch(e.key) {
         case "Escape":
             tui.home()
             break
-        case "ArrowDown":
         case "ArrowRight":
-            e.preventDefault()
+        case "ArrowDown":
-            focusList[Math.min(currentFocus+1, focusList.length-1)].focus()
+            if (list.length > 0) {
+                if (currentFocus < list.length - 1) { e.preventDefault() }
+                if (side < 1 && currentFocus == -1) {
+                    list[focusStart].focus()
+                } else {
+                    list[Math.min(currentFocus+1, list.length-1)].focus()
+                }
                 tui.updateFocus()
+            }
             break
-        case "ArrowUp":
         case "ArrowLeft":
-            e.preventDefault()
+        case "ArrowUp":
-            focusList[Math.max(0, currentFocus-1)].focus()
+            if (list.length > 0) {
+                if (currentFocus > 0) { e.preventDefault() }
+                if (side < 1 && currentFocus == -1) {
+                    list[focusStart].focus()
+                } else {
+                    list[Math.max(0, currentFocus-1)].focus()
+                }
                 tui.updateFocus()
+            }
             break
         case "Enter":
         case " ":
+            const skipDiv = document.getElementsByClassName("skip-animation")[0]
+            if (skipDiv) {
+                if (window.getComputedStyle(skipDiv).visibility != "hidden") {skipAnimation()}
+                skipDiv.remove()
+                return
+            }
             focused.click()
+            break
+        case "Tab":
+            e.preventDefault()
+            if (side >= 0) {side = (side + 1) % 2}
+            if (side == 0) {
+                document.getElementsByClassName("f")[0].focus()
+            } else if (side == 1 && focusListSecond[0]) {
+                focusListSecond[0].focus()
+            }
+            break
+
+        /* not convinced by this
+        case "ArrowLeft":
+            e.preventDefault()
+            if (side == 1) {
+                side = 0
+                document.getElementsByClassName("f")[0].focus()
+            }
+            break
+        case "ArrowRight":
+            e.preventDefault()
+            if (side == 0 && focusListSecond[0]) {
+                side = 1
+                focusListSecond[0].focus()
+            }*/
     }
 })

index.html

@@ -46,7 +46,7 @@
                 <li><a href="~ceres/">~ceres</a></li>
                 <li><a href="~jhalfsharp/">~jhalfsharp</a></li>
                 <li><a href="~kit/">~kit</a></li>
-                <li><a href="~magdalena/">~magdalena</a><p>computer nerd, silly catgirl, and linuxposting admin :3<br><br>check out my site!<br><br><br><br>disclaimer: cannot guarantee the presence of any girlkissing-related content</p></li>
+                <li><a href="~magdalena/">~magdalena</a><p>computer nerd, silly catgirl, and linuxposting admin :3<br><br>you can find me on <a href="https://www.tumblr.com/blog/magdalunaa">tumblr</a> and <a href="https://w.linuxposting.xyz/blog/magdalunaa">wafrn</a> (fedi / bsky)<br><br>check out my site!<br><br><br><br>disclaimer: cannot guarantee the presence of any girlkissing-related content</p></li>
                 <li><a href="~mara/">~mara</a></li>
                 <li><a href="~q4os/">~q4os</a></li>
                 <li><a href="~steamos/">~steamos</a></li>
@@ -67,8 +67,8 @@
             </ul>
         </main></div>
         <div class="js skip"><div></div></div>
-        <span class="credit skip"><a href="https://girlkissing.tips">site by Magdalunaa :3</a></span>
+        <span class="credit skip"><a href="https://girlkissing.tips" id="credit">site by Magdalunaa :3</a></span>
-        <span class="skip-notice skip">Click to skip</span>
+        <span class="skip-notice skip">Click / space to skip</span>
     </body>
     <script src="/assets/main.js"></script>
 </html>