mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-24 08:46:20 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

12
public/styles.css
View file

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

12
public_included_ws_fallback/styles.css
View file

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