From 0baced640ad8d1b8bcdc2a185954139e631a11bc Mon Sep 17 00:00:00 2001
From: Lopolin-LP <82715586+Lopolin-LP@users.noreply.github.com>
Date: Tue, 16 May 2023 01:50:12 +0200
Subject: [PATCH] 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>
---
 public/styles.css                      | 12 +++++++-----
 public_included_ws_fallback/styles.css | 12 +++++++-----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index 0f5afd9..1a16425 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -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 {
diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
index 3ba9d45..9c34a99 100644
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -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 {