From 2531d0703242f130b15897591612f314ec049baf Mon Sep 17 00:00:00 2001
From: robin <binkrassdufass@gmail.com>
Date: Sun, 8 Oct 2023 19:25:01 +0000
Subject: [PATCH] tst

---
 .../src/lib/components/header/desktop.svelte  |  8 +++---
 .../src/lib/components/header/mobile.svelte   | 27 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/header/desktop.svelte b/frontend/src/lib/components/header/desktop.svelte
index d0be73f..d9ec78e 100644
--- a/frontend/src/lib/components/header/desktop.svelte
+++ b/frontend/src/lib/components/header/desktop.svelte
@@ -47,13 +47,13 @@
         }
 
         textElement = document.getElementById("lowerpc")
-        console.log(textElement, "textel")
+
         containerWidth = container.offsetWidth
         textWidth = textElement.offsetWidth
 
         characterCount = textElement.textContent.length - 1
         spaceNeeded = containerWidth - textWidth
-        console.log(characterCount, spaceNeeded, containerWidth)
+
         if (characterCount > 0 && spaceNeeded > 0) {
             const letterSpacing = spaceNeeded / characterCount
             textElement.style.letterSpacing = `${letterSpacing}px`
@@ -101,8 +101,8 @@
             <img src="/media/MädchenmitBlume.svg" alt="logo" />
         </button>
         <div class="logo-text" id="logo-containerpc">
-            <p id="upperpc">all kids</p>
-            <p id="lowerpc">SO GÜNSTIG WIE NACHHALTIG</p>
+            <div id="upperpc">all kids</div>
+            <div id="lowerpc">SO GÜNSTIG WIE NACHHALTIG</div>
         </div>
         <button class="img-logo-container">
             <img src="/media/Radfahrer.svg" alt="logo" />
diff --git a/frontend/src/lib/components/header/mobile.svelte b/frontend/src/lib/components/header/mobile.svelte
index b0beffe..689e92f 100644
--- a/frontend/src/lib/components/header/mobile.svelte
+++ b/frontend/src/lib/components/header/mobile.svelte
@@ -50,37 +50,42 @@
         }
     }
     function stretchText() {
-        console.log("tsst")
         let container = document.getElementById("logo-container")
         let textElement = document.getElementById("upper")
 
         let containerWidth = container.offsetWidth
         let textWidth = textElement.offsetWidth
+        let currentLetterSpacing = parseFloat(
+            window.getComputedStyle(textElement, null).getPropertyValue("letter-spacing")
+        )
 
         let characterCount = textElement.textContent.length - 1
         let spaceNeeded = containerWidth - textWidth
 
         if (characterCount > 0 && spaceNeeded > 0) {
-            const letterSpacing = spaceNeeded / characterCount
-            textElement.style.letterSpacing = `${letterSpacing}px`
+            const additionalLetterSpacing = spaceNeeded / characterCount
+            const newLetterSpacing = additionalLetterSpacing
+            textElement.style.letterSpacing = `${newLetterSpacing}px`
         }
 
+        // Do the same for "lower"
         textElement = document.getElementById("lower")
 
-        containerWidth = container.offsetWidth
         textWidth = textElement.offsetWidth
+        currentLetterSpacing = parseFloat(window.getComputedStyle(textElement, null).getPropertyValue("letter-spacing"))
 
         characterCount = textElement.textContent.length - 1
         spaceNeeded = containerWidth - textWidth
-
+        console.log(containerWidth, textWidth, characterCount)
         if (characterCount > 0 && spaceNeeded > 0) {
-            const letterSpacing = spaceNeeded / characterCount
-            textElement.style.letterSpacing = `${letterSpacing}px`
+            const additionalLetterSpacing = spaceNeeded / characterCount
+            const newLetterSpacing = additionalLetterSpacing
+            textElement.style.letterSpacing = `${newLetterSpacing}px`
         }
     }
 
     window.addEventListener("resize", stretchText)
-    window.addEventListener("load", stretchText)
+    onMount(stretchText)
 </script>
 
 <ul>
@@ -96,8 +101,8 @@
                 <img src="/media/MädchenmitBlume.svg" alt="logo" />
             </button>
             <div class="logo-text" id="logo-container">
-                <p id="upper">all kids</p>
-                <p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
+                <div id="upper">all kids</div>
+                <div id="lower">SO GÜNSTIG WIE NACHHALTIG</div>
             </div>
             <button class="img-logo-container">
                 <img src="/media/Radfahrer.svg" alt="logo" />
@@ -284,7 +289,7 @@
                             }
                             & > #upper {
                                 font-family: "Dekko" !important;
-                                font-size: 48px;
+                                font-size: 53px;
                                 font-weight: 700;
                                 word-spacing: 5px;
                                 letter-spacing: 4px;