parent
5d79bdd415
commit
9c5d59c88b
frontend
media
src
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);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user