form

frontend/src/lib/components/header/desktop.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { navigation, sites } from "../../stores"
+    import { darkMode, navigation, sites } from "../../stores"
 
     import { apiBaseURL } from "../../../config"
     import { navigate } from "svelte-routing"
@@ -60,9 +60,11 @@
             navigate('/')
         }}"
     >
-        <button class="img-logo-container"><img src="/media/logo.svg" alt="logo" /></button>
+        <button class="img-logo-container">
+            <img src="/media/logo.svg" alt="logo" />
+        </button>
         <div class="logo-text">
-            <p id="upper">ALL KIDS</p>
+            <p id="upper"><span class="yellow">ALL</span> <span class="red">KIDS</span></p>
             <p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
         </div>
     </button>
@@ -202,12 +204,22 @@
                             text-align: left;
                         }
                         & > #upper {
-                            font-family: "Orbitron" !important;
-                            font-size: 30px;
-                            font-weight: 700;
+                            span {
+                                font-family: "Orbitron" !important;
+                                font-size: 31px;
+                                font-weight: 700;
+                                &.red {
+                                    color: red;
+                                }
+                                &.yellow {
+                                    color: yellow;
+                                }
+                            }
                         }
                         & > #lower {
                             font-size: 13px;
+                            font-weight: bold;
+                            color: orange;
                         }
                         font-weight: bold;
                         font-size: 1.2rem;
@@ -258,7 +270,7 @@
                 overflow: hidden;
                 width: 100vw;
                 z-index: 2000;
-                background-color: var(--opposite-bg-color-80);
+                background-color: rgba(0, 0, 0, 0.849);
                 opacity: 0;
                 .inner-container {
                     width: 100%;