Grit-Grenzdoerfer/wm-AllKids-tibi2023
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tst
All checks were successful
deploy to production / deploy (push) Successful in 42s
Details

Browse Source
This commit is contained in:
Robin Grenzdörfer 2023-10-08 19:25:01 +00:00
parent 7305a6231f
commit 2531d07032
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/lib/components/header/desktop.svelte
View File

@ -47,13 +47,13 @@
} }
textElement = document.getElementById("lowerpc") textElement = document.getElementById("lowerpc")
console.log(textElement, "textel")
containerWidth = container.offsetWidth containerWidth = container.offsetWidth
textWidth = textElement.offsetWidth textWidth = textElement.offsetWidth
characterCount = textElement.textContent.length - 1 characterCount = textElement.textContent.length - 1
spaceNeeded = containerWidth - textWidth spaceNeeded = containerWidth - textWidth
console.log(characterCount, spaceNeeded, containerWidth)
if (characterCount > 0 && spaceNeeded > 0) { if (characterCount > 0 && spaceNeeded > 0) {
const letterSpacing = spaceNeeded / characterCount const letterSpacing = spaceNeeded / characterCount
textElement.style.letterSpacing = `${letterSpacing}px` textElement.style.letterSpacing = `${letterSpacing}px`
@ -101,8 +101,8 @@
<img src="/media/MädchenmitBlume.svg" alt="logo" /> <img src="/media/MädchenmitBlume.svg" alt="logo" />
</button> </button>
<div class="logo-text" id="logo-containerpc"> <div class="logo-text" id="logo-containerpc">
<p id="upperpc">all kids</p> <div id="upperpc">all kids</div>
<p id="lowerpc">SO GÜNSTIG WIE NACHHALTIG</p> <div id="lowerpc">SO GÜNSTIG WIE NACHHALTIG</div>
</div> </div>
<button class="img-logo-container"> <button class="img-logo-container">
<img src="/media/Radfahrer.svg" alt="logo" /> <img src="/media/Radfahrer.svg" alt="logo" />

27
frontend/src/lib/components/header/mobile.svelte
View File

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