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")
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" />

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

@ -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;