diff --git a/assets/base.css b/assets/base.css index c1ee92b..b3c94fe 100644 --- a/assets/base.css +++ b/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,6 +228,20 @@ 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), (any-hover: none) { diff --git a/assets/main.js b/assets/main.js index df416ed..445bf47 100644 --- a/assets/main.js +++ b/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