linuxposting/tilde-site
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

yea the site is even cooler now

Browse source
This commit is contained in:
Luna 2025-11-15 18:52:36 -03:00
parent 7814a16c34
commit c6918a4d72
4 changed files with 110 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

9
assets/base.css
View file

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

1
assets/colors.css
View file

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

113
assets/main.js
View file

@ -1,11 +1,12 @@
let stylesheet
var audio = new(window.AudioContext)
let jsDiv
let mode
let side
let focusMain
let focusSecond
let focusListMain, focusListSecond, focusStart
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)
const focused = document.activeElement
let 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()
focusList[Math.min(currentFocus+1, focusList.length-1)].focus()
tui.updateFocus()
case "ArrowDown":
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()
focusList[Math.max(0, currentFocus-1)].focus()
tui.updateFocus()
case "ArrowUp":
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()
}*/
}
})