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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/media/balloons.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 12 KiB

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

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

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;

14
frontend/src/lib/components/pagebuilder/Homepage.svelte
View File

@ -31,6 +31,14 @@
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() {
@ -49,7 +57,7 @@
</script>
<!-- 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>
{#if teaser}
<div class="container" id="HP">
@ -118,7 +126,7 @@
</div>
{/if}
</div>
<div class="homepage-placeholder"></div>
<div id="homepage-placeholder"></div>
<style lang="less" global>
@import "../../assets/css/variables.less";
@ -127,7 +135,7 @@
@import "swiper/modules/navigation/navigation";
@import "swiper/modules/pagination/pagination";
@import "../../assets/css/SwiperStylesHP.less";
.homepage-placeholder {
#homepage-placeholder {
position: relative;
width: 100vw;

4
frontend/src/routes/HomePage.svelte
View File

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