Fix About Background not filling up full viewport under certain circumstances (#109)

* Fix About Background Not filling up full viewport under certain circumstances

It is now based on vw/vh instead of px. It can also easily be adjusted, mostly. There is no way it will not fill up the viewport.

* add fix for about bg size to websocket fallback too and tidy up

---------

Co-authored-by: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
This commit is contained in:
Lopolin-LP 2023-05-16 01:50:12 +02:00 committed by GitHub
parent 3c2e73fc0c
commit 0baced640a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 10 deletions

View file

@ -1144,10 +1144,12 @@ button::-moz-focus-inner {
#about x-background {
position: absolute;
top: calc(28px - 250px);
right: calc(36px - 250px);
width: 500px;
height: 500px;
--size: max(max(230vw, 230vh), calc(150vh + 150vw));
--size-half: calc(var(--size)/2);
top: calc(28px - var(--size-half));
right: calc(36px - var(--size-half));
width: var(--size);
height: var(--size);
border-radius: 50%;
background: var(--primary-color);
transform: scale(0);
@ -1161,7 +1163,7 @@ button::-moz-focus-inner {
}
#about:target x-background {
transform: scale(10);
transform: scale(1);
}
#about .row a {

View file

@ -1170,10 +1170,12 @@ button::-moz-focus-inner {
#about x-background {
position: absolute;
top: calc(28px - 250px);
right: calc(36px - 250px);
width: 500px;
height: 500px;
--size: max(max(230vw, 230vh), calc(150vh + 150vw));
--size-half: calc(var(--size)/2);
top: calc(28px - var(--size-half));
right: calc(36px - var(--size-half));
width: var(--size);
height: var(--size);
border-radius: 50%;
background: var(--primary-color);
transform: scale(0);
@ -1187,7 +1189,7 @@ button::-moz-focus-inner {
}
#about:target x-background {
transform: scale(10);
transform: scale(1);
}
#about .row a {