feat!: implemented multigame support (#34)

Reviewed-on: #34
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>

knockoutwhistweb/app/assets/stylesheets/login.less

@@ -0,0 +1,35 @@
+.login-box {
+  position: fixed; /* changed from absolute to fixed so it centers relative to the viewport */
+  align-items: center;
+  justify-content: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* center exactly */
+  display: flex;
+  width: 100%;
+  max-width: 420px; /* keeps box from stretching too wide */
+  padding: 1rem;
+  z-index: 2; /* above particles */
+}
+
+.login-card {
+  max-width: 400px;
+  width: 100%;
+  border: none;
+  border-radius: 1rem;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  position: relative;
+  z-index: 3; /* ensure card sits above the particles */
+}
+
+#particles-js {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0; /* behind content */
+  pointer-events: none; /* allow clicks through particles */
+  background-repeat: no-repeat;
+  background-size: cover;
+}

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -1,5 +1,6 @@
 @import "light-mode.less";
 @import "dark-mode.less";
+@import "login.less";
 
 @background-image: var(--background-image);
 @color: var(--color);
@@ -7,14 +8,16 @@
   0% { transform: translateX(-100vw); }
   100% { transform: translateX(0); }
 }
-body {
+.game-field-background {
     background-image: @background-image;
     background-size: 100vw 100vh;
+    background-repeat: no-repeat;
 }
 
-html, body {
-    height: 100vh;
-    margin: 0;
+.game-field {
+    position: fixed;
+    inset: 0;
+    overflow: auto;
 }
 #sessions {
     display: flex;
@@ -31,8 +34,9 @@ html, body {
         animation: slideIn 0.5s ease-out forwards;
         animation-fill-mode: backwards;
         animation-delay: 1s;
-    }
-#sessions a, h1, p {
+}
+
+#sessions a, #sessions h1, #sessions p {
     color: @color;
     font-size: 40px;
     font-family: Arial, serif;
@@ -44,6 +48,11 @@ html, body {
     justify-content: flex-end;
     height: 100%;
 }
+#ingame a, #ingame h1, #ingame p {
+    color: @color;
+    font-size: 40px;
+    font-family: Arial, serif;
+}
 #playercards {
     display: flex;
     flex-direction: row;