From 7eb6d6a75f28bf3cfc2ec3e2d7b6e0b953e9a3f8 Mon Sep 17 00:00:00 2001
From: Lorenz Stechauner <lorenz.stechauner@necronda.net>
Date: Sun, 28 Aug 2022 12:31:19 +0200
Subject: [PATCH] Rework media queries for background image

---
 www/res/styles/styles.css | 68 +++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 27 deletions(-)

diff --git a/www/res/styles/styles.css b/www/res/styles/styles.css
index 459aed4..a7951f0 100644
--- a/www/res/styles/styles.css
+++ b/www/res/styles/styles.css
@@ -18,31 +18,21 @@ noscript {
 body {
     margin: 0;
     min-height: calc(var(--vh, 1vh) * 100);
-    background-image: url("/res/images/background.jpg");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
 }
 
-div#wrapper {
+#wrapper {
     box-sizing: border-box;
     width: 100%;
     padding: 1em;
     height: calc(var(--vh, 1vh) * 100 - var(--footer-height));
 }
 
-@media screen and (max-width: 600px) {
-    div#wrapper {
-        height: calc(var(--vh, 1vh) * 100);
-    }
-}
-
 h1, h2, h3, h4, h5, h6 {
     color: #000000;
     font-weight: normal;
 }
 
-div#windows {
+#windows {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -52,7 +42,7 @@ div#windows {
     left: 0;
 }
 
-div#windows > *,
+#windows > *,
 main {
     border: 1px solid var(--bg-win);
     background: var(--bg-win);
@@ -66,8 +56,7 @@ main {
     margin: 0 auto;
 }
 
-div#windows > * {
-    backdrop-filter: blur(32px);
+#windows > * {
     padding: 0.5em 1em;
 }
 
@@ -88,22 +77,12 @@ footer {
     border-top: 1px solid var(--bg-win);
     background: var(--bg-win);
     height: var(--footer-height);
-    backdrop-filter: blur(32px);
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
 }
 
-@media screen and (max-width: 600px) {
-    footer {
-        flex-direction: column;
-    }
-    html {
-        --footer-height: 4em;
-    }
-}
-
 footer div {
     font-size: 0.75em;
     display: inline;
@@ -199,7 +178,6 @@ main .chat-history {
     height: calc(100% - 3em);
     overflow-y: scroll;
     box-sizing: border-box;
-    backdrop-filter: blur(4px);
 }
 
 main .chat-input-wrapper {
@@ -208,7 +186,6 @@ main .chat-input-wrapper {
     border-top: 1px solid var(--bg-win);
     padding: 0.5em 1em;
     box-sizing: border-box;
-    backdrop-filter: blur(32px);
 }
 
 main .chat-input-wrapper input {
@@ -254,3 +231,40 @@ main .chat ::-webkit-scrollbar-thumb {
 main .chat ::-webkit-scrollbar-thumb:hover {
     background-color: rgba(255, 255, 255, 0.75);
 }
+
+@media screen and (min-width: 100px) {
+    body {
+        background-image: url("/res/images/background.jpg");
+        background-repeat: no-repeat;
+        background-position: top center;
+        background-size: cover;
+    }
+    #windows > * {
+        backdrop-filter: blur(32px);
+    }
+    footer {
+        backdrop-filter: blur(32px);
+    }
+    main .chat-input-wrapper {
+        backdrop-filter: blur(32px);
+    }
+    main .chat-history {
+        backdrop-filter: blur(4px);
+    }
+}
+
+@media screen and (max-width: 600px) {
+    #wrapper {
+        height: calc(var(--vh, 1vh) * 100);
+        padding: 0;
+    }
+    #windows {
+        padding: 0;
+    }
+    footer {
+        flex-direction: column;
+    }
+    html {
+        --footer-height: 4em;
+    }
+}