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
frontend

File diff suppressed because one or more lines are too long

Before

(image error) Size: 66 KiB

After

(image error) Size: 12 KiB

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

@ -49,6 +49,38 @@
imageSlide(images) 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> </script>
<ul> <ul>
@ -63,8 +95,8 @@
<button class="img-logo-container"> <button class="img-logo-container">
<img src="/media/MädchenmitBlume.svg" alt="logo" /> <img src="/media/MädchenmitBlume.svg" alt="logo" />
</button> </button>
<div class="logo-text"> <div class="logo-text" id="logo-container">
<p id="upper"><span class="yellow">all</span> <span class="red">kids</span></p> <p id="upper">all kids</p>
<p id="lower">SO GÜNSTIG WIE NACHHALTIG</p> <p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
</div> </div>
<button class="img-logo-container"> <button class="img-logo-container">
@ -250,22 +282,16 @@
text-align: left; text-align: left;
} }
& > #upper { & > #upper {
span { font-family: "Dekko" !important;
font-family: "Dekko" !important; font-size: 48px;
font-size: 45px; font-weight: 700;
font-weight: 700; word-spacing: 5px;
word-spacing: 5px; letter-spacing: 4px;
letter-spacing: 4px;
&.red { color: rgb(184, 16, 16);
color: rgb(184, 16, 16);
}
&.yellow {
color: rgb(184, 16, 16);
}
}
} }
& > #lower { & > #lower {
font-size: 11px; font-size: 12px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
margin-top: -15px; margin-top: -15px;
font-weight: bold; font-weight: bold;

@ -31,6 +31,14 @@
firstSlideH1.classList.add("active") firstSlideH1.classList.add("active")
} }
} }
const el = document.getElementById("HP")
let heightOfEl = el?.clientHeight
const hp = document.getElementById("Homepage")
const homepage_placeholder = document.getElementById("homepage-placeholder")
if (hp) {
hp.style.minHeight = (heightOfEl || window.innerHeight) + 200 + "px"
homepage_placeholder.style.minHeight = (heightOfEl || window.innerHeight) + 350 + "px"
}
}) })
function handleSlideChange() { function handleSlideChange() {
@ -49,7 +57,7 @@
</script> </script>
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- svelte-ignore a11y-img-redundant-alt -->
<div class="homepage"> <div class="homepage" id="Homepage">
<div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div> <div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div>
{#if teaser} {#if teaser}
<div class="container" id="HP"> <div class="container" id="HP">
@ -118,7 +126,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<div class="homepage-placeholder"></div> <div id="homepage-placeholder"></div>
<style lang="less" global> <style lang="less" global>
@import "../../assets/css/variables.less"; @import "../../assets/css/variables.less";
@ -127,7 +135,7 @@
@import "swiper/modules/navigation/navigation"; @import "swiper/modules/navigation/navigation";
@import "swiper/modules/pagination/pagination"; @import "swiper/modules/pagination/pagination";
@import "../../assets/css/SwiperStylesHP.less"; @import "../../assets/css/SwiperStylesHP.less";
.homepage-placeholder { #homepage-placeholder {
position: relative; position: relative;
width: 100vw; width: 100vw;

@ -59,11 +59,11 @@
.balloons { .balloons {
background-image: url("../../media/balloons.svg"); background-image: url("../../media/balloons.svg");
background-repeat: repeat-x; /* Horizontal repetition */ background-repeat: repeat-x; /* Horizontal repetition */
background-size: 150px 150px; background-size: 150px 140px;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
height: 140px; height: 120px;
} }
.row-wrapper { .row-wrapper {
background-color: var(--background-color); background-color: var(--background-color);