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

it looks better on mobile now but i probably did something else without noticing

Browse source
This commit is contained in:
Luna 2025-11-15 19:15:01 -03:00
parent c6918a4d72
commit 477403badf
2 changed files with 32 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

20
assets/base.css
View file

@ -1,5 +1,9 @@
@import url(fonts.css); @import url(fonts.css);
:root {
--vh: 1vh
}
html { html {
background-color: var(--c-bg); background-color: var(--c-bg);
scrollbar-color: var(--c-border) transparent; scrollbar-color: var(--c-border) transparent;
@ -113,7 +117,7 @@ li {
body > .nojs { body > .nojs {
width: calc(100vw - 16px); width: calc(100vw - 16px);
height: calc(100vh - 16px); height: calc(var(--vh) * 100 - 16px);
box-sizing: border-box; box-sizing: border-box;
border: 8px double var(--c-border); border: 8px double var(--c-border);
overflow: hidden overflow: hidden
@ -134,7 +138,7 @@ main, .js > div > div {
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
width: calc(100vw - 16px); width: calc(100vw - 16px);
height: calc(100vh - 16px); height: calc(var(--vh) * 100 - 16px);
top: 8px; top: 8px;
left: 8px left: 8px
} }
@ -149,13 +153,13 @@ main, .js > div > div {
@media screen and (min-aspect-ratio: 1/1) { @media screen and (min-aspect-ratio: 1/1) {
.js > div:first-child { .js > div:first-child {
width: calc(50vw - 4px - 11px); width: calc(50vw - 4px - 11px);
height: calc(100vh - 16px - 10px); height: calc(var(--vh) * 100 - 16px - 10px);
top: 13px; top: 13px;
left: 13px left: 13px
} }
.js > div:last-child { .js > div:last-child {
width: calc(50vw - 4px - 11px); width: calc(50vw - 4px - 11px);
height: calc(100vh - 16px - 10px); height: calc(var(--vh) * 100 - 16px - 10px);
top: 13px; top: 13px;
right: 13px right: 13px
} }
@ -168,25 +172,25 @@ main, .js > div > div {
@media screen and (max-aspect-ratio: 1000/1001) { @media screen and (max-aspect-ratio: 1000/1001) {
.js > div:first-child { .js > div:first-child {
width: calc(100vw - 16px - 10px); width: calc(100vw - 16px - 10px);
height: calc(50vh - 4px - 11px); height: calc(var(--vh) * 50 - 4px - 11px);
top: 13px; top: 13px;
left: 13px left: 13px
} }
.js > div:last-child { .js > div:last-child {
width: calc(100vw - 16px - 10px); width: calc(100vw - 16px - 10px);
height: calc(50vh - 4px - 11px); height: calc(var(--vh) * 50 - 4px - 11px);
bottom: 13px; bottom: 13px;
left: 13px left: 13px
} }
.title2 { .title2 {
top: calc(50vh - 12px); top: calc(var(--vh) * 50 - 12px);
left: 32px; left: 32px;
} }
} }
.js > div:only-child { .js > div:only-child {
width: calc(100vw - 16px - 10px); width: calc(100vw - 16px - 10px);
height: calc(100vh - 16px - 10px); height: calc(var(--vh) * 100 - 16px - 10px);
top: 13px; top: 13px;
left: 13px left: 13px
} }

29
assets/main.js
View file

@ -15,6 +15,7 @@ back.innerHTML = `⬑Back`
window.addEventListener("load", () => { window.addEventListener("load", () => {
stylesheet = document.styleSheets[0]; stylesheet = document.styleSheets[0];
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
// randomize loading text // randomize loading text
fetch("/assets/loading.txt") fetch("/assets/loading.txt")
@ -28,13 +29,14 @@ window.addEventListener("load", () => {
document.body.appendChild(skipNode); document.body.appendChild(skipNode);
// get rid of shit since we have javascript babyyyyyyy // get rid of shit since we have javascript babyyyyyyy
if (matchMedia("(min-width: 430px) and (min-height: 430px").matches) { if (matchMedia("(min-width: 430px) or (min-height: 430px").matches) {
for (let node of document.getElementsByClassName("nojs")) { for (let node of document.getElementsByClassName("nojs")) {
node.style.display = "none" node.style.display = "none"
} }
stylesheet.insertRule(".js { visibility: visible }", stylesheet.cssRules.length) stylesheet.insertRule(".js { visibility: visible }", stylesheet.cssRules.length)
stylesheet.insertRule(".skip-notice { opacity: 1 }", stylesheet.cssRules.length) stylesheet.insertRule(".skip-notice { opacity: 1 }", stylesheet.cssRules.length)
stylesheet.insertRule("d:focus { color: var(--c-bg); background-color: var(--c-fg) }", stylesheet.cssRules.length) stylesheet.insertRule("d:focus { color: var(--c-bg); background-color: var(--c-fg) }", stylesheet.cssRules.length)
document.querySelectorAll("head style").forEach(style => style.remove()); document.querySelectorAll("head style").forEach(style => style.remove());
jsDiv = document.getElementsByClassName("js")[0] jsDiv = document.getElementsByClassName("js")[0]
tui.home() tui.home()
@ -244,15 +246,16 @@ function indexFocus() {
} }
document.addEventListener("mouseover", (e) => { document.addEventListener("mouseover", (e) => {
if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") { if (!jsDiv) {return}
e.target.focus() if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
if (side == 0 && focusListSecond.includes(document.activeElement)) { e.target.focus()
side = 1 if (side == 0 && focusListSecond.includes(document.activeElement)) {
} else if (side == 1 && focusListMain.includes(document.activeElement)) { side = 1
side = 0 } else if (side == 1 && focusListMain.includes(document.activeElement)) {
side = 0
}
tui.updateFocus()
} }
tui.updateFocus()
}
}) })
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
@ -327,3 +330,11 @@ document.addEventListener("keydown", (e) => {
}*/ }*/
} }
}) })
let resizeTimeout = 0
window.addEventListener("resize", () => {
clearTimeout(resizeTimeout)
resizeTimeout = setTimeout(() => {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
}, 200)
})