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
}