From accac89e17717a3f2f16292b478fdfc3ddaa16ad Mon Sep 17 00:00:00 2001
From: Marc Schmidt <code@masch212.de>
Date: Mon, 24 Jun 2024 21:11:19 +0200
Subject: [PATCH] fix: style fixes

---
 .../src/app/components/app/app.component.html |  2 +-
 .../src/app/components/app/app.component.scss | 21 ++++++++++++++++++-
 .../app/footer/footer.component.html          |  2 +-
 src/client/src/index.html                     |  1 +
 src/client/src/styles.scss                    | 21 -------------------
 5 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/client/src/app/components/app/app.component.html b/src/client/src/app/components/app/app.component.html
index e2d89c2..3db911a 100644
--- a/src/client/src/app/components/app/app.component.html
+++ b/src/client/src/app/components/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="bg-image pointer-events-none absolute bottom-0"></div>
+<div class="bg-image pointer-events-none absolute bottom-0 -z-10 opacity-30 dark:opacity-15"></div>
 
 <header class="p-4">
   <app-menu />
diff --git a/src/client/src/app/components/app/app.component.scss b/src/client/src/app/components/app/app.component.scss
index a83b370..6051910 100644
--- a/src/client/src/app/components/app/app.component.scss
+++ b/src/client/src/app/components/app/app.component.scss
@@ -1,3 +1,22 @@
 :host {
-  @apply flex flex-col h-full;
+  @apply flex h-full flex-col;
+}
+
+.bg-image {
+  background-image: url('/icons/icon512_maskable.png');
+
+  /* Center and scale the image nicely */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  /* Add the blur effect */
+  filter: blur(15px);
+  -webkit-filter: blur(15px);
+
+  /* little overshoot to make blur edges invisible */
+  height: 110%;
+  width: 110%;
+  left: -5%;
+  top: -5%;
 }
diff --git a/src/client/src/app/components/app/footer/footer.component.html b/src/client/src/app/components/app/footer/footer.component.html
index ab8c05e..a479c9c 100644
--- a/src/client/src/app/components/app/footer/footer.component.html
+++ b/src/client/src/app/components/app/footer/footer.component.html
@@ -1,5 +1,5 @@
 <footer
-  class="flex flex-row flex-wrap justify-around gap-x-8 bg-primary-700 px-2 py-1 text-xs sm:px-4 md:text-xs lg:text-sm"
+  class="flex flex-row flex-wrap justify-around gap-x-8 bg-surface-50 px-2 py-1 text-xs sm:px-4 md:text-xs lg:text-sm"
 >
   <div class="truncate">
     <span>{{ translations.footer_developedBy() }} Marc Schmidt </span>
diff --git a/src/client/src/index.html b/src/client/src/index.html
index b4e1dd1..f937e89 100644
--- a/src/client/src/index.html
+++ b/src/client/src/index.html
@@ -17,6 +17,7 @@
     <!-- iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="apple-touch-icon" href="icons/icon512_maskable.png" />
 
     <link
       rel="icon"
diff --git a/src/client/src/styles.scss b/src/client/src/styles.scss
index 49a43b6..b013742 100644
--- a/src/client/src/styles.scss
+++ b/src/client/src/styles.scss
@@ -118,27 +118,6 @@
   a {
     color: inherit;
   }
-
-  .bg-image {
-    background-image: url('/icons/icon512_maskable.png');
-
-    /* Center and scale the image nicely */
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-    opacity: 33%;
-
-    /* Add the blur effect */
-    filter: blur(15px);
-    -webkit-filter: blur(15px);
-
-    /* little overshoot to make blur edges invisible */
-    height: 110%;
-    width: 110%;
-    left: -5%;
-    top: -5%;
-  }
 }
 
 @layer adjustments {