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

13
assets/main.js
View file

@ -15,6 +15,7 @@ back.innerHTML = `⬑Back`
window.addEventListener("load", () => {
stylesheet = document.styleSheets[0];
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
// randomize loading text
fetch("/assets/loading.txt")
@ -28,13 +29,14 @@ window.addEventListener("load", () => {
document.body.appendChild(skipNode);
// 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")) {
node.style.display = "none"
}
stylesheet.insertRule(".js { visibility: visible }", 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)
document.querySelectorAll("head style").forEach(style => style.remove());
jsDiv = document.getElementsByClassName("js")[0]
tui.home()
@ -244,6 +246,7 @@ function indexFocus() {
}
document.addEventListener("mouseover", (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)) {
@ -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)
})