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 47s
Details

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-10-08 19:05:02 +00:00
parent 5d79bdd415
commit 9c5d59c88b
5 changed files with 144 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,6 +49,38 @@
imageSlide(images)
}
}
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 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("lower")
containerWidth = container.offsetWidth
textWidth = textElement.offsetWidth
characterCount = textElement.textContent.length - 1
spaceNeeded = containerWidth - textWidth
if (characterCount > 0 && spaceNeeded > 0) {
const letterSpacing = spaceNeeded / characterCount
textElement.style.letterSpacing = `${letterSpacing}px`
}
}
window.addEventListener("resize", stretchText)
window.addEventListener("load", stretchText)
</script>
<ul>
@@ -63,8 +95,8 @@
<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>
<div class="logo-text" id="logo-container">
<p id="upper">all kids</p>
<p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
</div>
<button class="img-logo-container">
@@ -250,22 +282,16 @@
text-align: left;
}
& > #upper {
span {
font-family: "Dekko" !important;
font-size: 45px;
font-weight: 700;
word-spacing: 5px;
letter-spacing: 4px;
&.red {
color: rgb(184, 16, 16);
}
&.yellow {
color: rgb(184, 16, 16);
}
}
font-family: "Dekko" !important;
font-size: 48px;
font-weight: 700;
word-spacing: 5px;
letter-spacing: 4px;
color: rgb(184, 16, 16);
}
& > #lower {
font-size: 11px;
font-size: 12px;
letter-spacing: 0.4px;
margin-top: -15px;
font-weight: bold;