tst

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

@@ -3,6 +3,7 @@
 
     import { apiBaseURL } from "../../../config"
     import { navigate } from "svelte-routing"
+    import { onMount } from "svelte"
     export let show = false
     function changeStateOfSite(menuOn: boolean) {
         let siteContainer = document.body
@@ -29,6 +30,38 @@
     }
 
     let hoverTimeout: string | number | NodeJS.Timeout | undefined
+
+    function stretchText() {
+        let container = document.getElementById("logo-containerpc")
+        let textElement = document.getElementById("upperpc")
+
+        let containerWidth = container.offsetWidth
+        let textWidth = textElement.offsetWidth
+
+        let characterCount = textElement.textContent.length - 1
+        let spaceNeeded = containerWidth - textWidth
+
+        if (characterCount > 0 && spaceNeeded > 0) {
+            const letterSpacing = spaceNeeded / characterCount
+            textElement.style.letterSpacing = `${letterSpacing}px`
+        }
+
+        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`
+        }
+    }
+
+    window.addEventListener("resize", stretchText)
+    onMount(stretchText)
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -67,9 +100,9 @@
         <button class="img-logo-container">
             <img src="/media/MädchenmitBlume.svg" alt="logo" />
         </button>
-        <div class="logo-text">
-            <p id="upper"><span class="yellow">all</span> <span class="red">kids</span></p>
-            <p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
+        <div class="logo-text" id="logo-containerpc">
+            <p id="upperpc">all kids</p>
+            <p id="lowerpc">SO GÜNSTIG WIE NACHHALTIG</p>
         </div>
         <button class="img-logo-container">
             <img src="/media/Radfahrer.svg" alt="logo" />
@@ -208,28 +241,23 @@
                     display: flex;
                     align-items: center;
                     margin-top: -15px;
+                    width: 200px;
                     .logo-text {
                         padding: 0px 10px;
                         p {
                             white-space: nowrap;
                             text-align: left;
                         }
-                        & > #upper {
-                            span {
-                                font-family: "Dekko" !important;
-                                font-size: 60px;
-                                font-weight: 700;
-                                word-spacing: 5px;
-                                letter-spacing: 4px;
-                                &.red {
-                                    color: rgb(184, 16, 16);
-                                }
-                                &.yellow {
-                                    color: rgb(184, 16, 16);
-                                }
-                            }
+                        & > #upperpc {
+                            font-family: "Dekko" !important;
+                            font-size: 60px;
+                            font-weight: 700;
+                            word-spacing: 5px;
+                            letter-spacing: 4px;
+
+                            color: rgb(184, 16, 16);
                         }
-                        & > #lower {
+                        & > #lowerpc {
                             font-size: 14px;
                             letter-spacing: 0.4px;
                             font-weight: bold;