This commit is contained in:
parent
3da5d3aa71
commit
5d79bdd415
16
frontend/media/balloons.svg
Normal file
16
frontend/media/balloons.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 66 KiB |
@ -97,6 +97,8 @@
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-F384Z2JF20"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || []
|
||||
@ -183,6 +185,14 @@
|
||||
font-weight: 700;
|
||||
src: url("./lib/assets/fonts/logo-font.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
/* dekko-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Dekko";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("./lib/assets/fonts/dekko-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
.socialMedia {
|
||||
display: none;
|
||||
@ -203,7 +213,6 @@
|
||||
main {
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
overflow: hidden;
|
||||
max-width: @body-maxwidth;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
|
||||
BIN
frontend/src/lib/assets/fonts/dekko-v21-latin-regular.woff2
Normal file
BIN
frontend/src/lib/assets/fonts/dekko-v21-latin-regular.woff2
Normal file
Binary file not shown.
@ -3,56 +3,60 @@
|
||||
import { serviceNavigation, sites, darkMode, refresh } from "../stores"
|
||||
</script>
|
||||
|
||||
<div style="background-color: var(--background-color); height: 50px;width: 100%; z-index: 10"></div>
|
||||
<div class="footer">
|
||||
<div class="infos">
|
||||
<h3>AllKids Erfurt</h3>
|
||||
<div class="infos-inner">
|
||||
<div class="upper">
|
||||
<p>Inh. Grit Grenzdörfer</p>
|
||||
<p>Eichenstraße 8</p>
|
||||
<p>99084 Erfurt</p>
|
||||
<div class="container">
|
||||
<div class="infos">
|
||||
<h3>AllKids Erfurt</h3>
|
||||
<div class="infos-inner">
|
||||
<div class="upper">
|
||||
<p>Inh. Grit Grenzdörfer</p>
|
||||
<p>Eichenstraße 8</p>
|
||||
<p>99084 Erfurt</p>
|
||||
</div>
|
||||
<div class="lower">
|
||||
<p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p>
|
||||
<p>Email: <a href="allkids.erfurt@gmail.com">allkids.erfurt@gmail.com</a></p>
|
||||
<p>Erstellt von: Webmakers GmbH</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lower">
|
||||
<p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p>
|
||||
<p>Email: <a href="allkids.erfurt@gmail.com">allkids.erfurt@gmail.com</a></p>
|
||||
<div class="social">
|
||||
<a href="https://www.facebook.com/allkids.erfurt/">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18 3.06c-8.25 0-15 6.735-15 15.03 0 7.5 5.49 13.725 12.66 14.85v-10.5h-3.81v-4.35h3.81v-3.315c0-3.765 2.235-5.835 5.67-5.835 1.635 0 3.345.285 3.345.285v3.705h-1.89c-1.86 0-2.445 1.155-2.445 2.34v2.82h4.17l-.675 4.35H20.34v10.5A15 15 0 0 0 33 18.09c0-8.295-6.75-15.03-15-15.03z"
|
||||
fill="var(--normal-font-color)"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
class="darklight"
|
||||
on:click="{() => {
|
||||
const body = document.querySelector('body')
|
||||
if (body) {
|
||||
body.classList.toggle('darkTheme')
|
||||
}
|
||||
$darkMode = !$darkMode
|
||||
}}"
|
||||
>
|
||||
{#if !$darkMode}
|
||||
<img src="/media/dark.svg" alt="darkmode" />
|
||||
{:else}
|
||||
<img src="/media/light.svg" alt="lightmode" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social">
|
||||
<a href="https://www.facebook.com/allkids.erfurt/">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18 3.06c-8.25 0-15 6.735-15 15.03 0 7.5 5.49 13.725 12.66 14.85v-10.5h-3.81v-4.35h3.81v-3.315c0-3.765 2.235-5.835 5.67-5.835 1.635 0 3.345.285 3.345.285v3.705h-1.89c-1.86 0-2.445 1.155-2.445 2.34v2.82h4.17l-.675 4.35H20.34v10.5A15 15 0 0 0 33 18.09c0-8.295-6.75-15.03-15-15.03z"
|
||||
fill="var(--normal-font-color)"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
class="darklight"
|
||||
on:click="{() => {
|
||||
const body = document.querySelector('body')
|
||||
if (body) {
|
||||
body.classList.toggle('darkTheme')
|
||||
}
|
||||
$darkMode = !$darkMode
|
||||
}}"
|
||||
>
|
||||
{#if !$darkMode}
|
||||
<img src="/media/dark.svg" alt="darkmode" />
|
||||
{:else}
|
||||
<img src="/media/light.svg" alt="lightmode" />
|
||||
{/if}
|
||||
</button>
|
||||
<div class="services">
|
||||
{#each $serviceNavigation?.elemente || [] as service, i (i)}
|
||||
<button
|
||||
on:click="{() => {
|
||||
navigate(`${$sites[service.seite || '']?.path}`)
|
||||
$refresh = !$refresh
|
||||
}}">{service?.name}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="services">
|
||||
{#each $serviceNavigation?.elemente || [] as service, i (i)}
|
||||
<button
|
||||
on:click="{() => {
|
||||
navigate(`${$sites[service.seite || '']?.path}`)
|
||||
$refresh = !$refresh
|
||||
}}">{service?.name}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
@ -70,13 +74,18 @@
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
margin-top: 60px;
|
||||
.container {
|
||||
max-width: calc(@body-maxwidth - min(9vw, 200px));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
padding-top: 60px;
|
||||
width: 100vw;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: calc(@body-maxwidth - min(9vw, 200px));
|
||||
|
||||
background-color: var(--hover-color);
|
||||
z-index: 10;
|
||||
padding: min(4.5vw, 100px) min(4.5vw, 100px) 0px min(4.5vw, 100px);
|
||||
}
|
||||
.infos {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { onMount } from "svelte"
|
||||
import DesktopHeader from "./desktop.svelte"
|
||||
import MobileHeader from "./mobile.svelte"
|
||||
|
||||
|
||||
let background: boolean
|
||||
let isHomePage: boolean
|
||||
let scrolled: boolean = false
|
||||
@ -41,6 +41,7 @@
|
||||
}
|
||||
})
|
||||
let show = false
|
||||
$: console.log(show)
|
||||
</script>
|
||||
|
||||
<main class="headercontainer">
|
||||
@ -49,11 +50,13 @@
|
||||
<MobileHeader bind:show="{show}" />
|
||||
</div>
|
||||
<div class="desktop-header">
|
||||
<DesktopHeader />
|
||||
<DesktopHeader bind:show="{show}" />
|
||||
</div>
|
||||
</nav>
|
||||
</main>
|
||||
<div class="placeholder"></div>
|
||||
{#if !isHomePage}
|
||||
<div class="placeholder"></div>
|
||||
{/if}
|
||||
|
||||
<style global lang="less">
|
||||
@import "../../assets/css/main.less";
|
||||
|
||||
@ -3,9 +3,11 @@
|
||||
|
||||
import { apiBaseURL } from "../../../config"
|
||||
import { navigate } from "svelte-routing"
|
||||
|
||||
export let show = false
|
||||
function changeStateOfSite(menuOn: boolean) {
|
||||
let siteContainer = document.body
|
||||
show = menuOn
|
||||
console.log("TEST")
|
||||
if (menuOn) siteContainer.style.overflow = "hidden"
|
||||
else siteContainer.style.overflow = "initial"
|
||||
}
|
||||
@ -63,14 +65,14 @@
|
||||
}}"
|
||||
>
|
||||
<button class="img-logo-container">
|
||||
<img src="/media/Radfahrer.svg" alt="logo" />
|
||||
<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="upper"><span class="yellow">all</span> <span class="red">kids</span></p>
|
||||
<p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
|
||||
</div>
|
||||
<button class="img-logo-container">
|
||||
<img src="/media/MädchenmitBlume.svg" alt="logo" />
|
||||
<img src="/media/Radfahrer.svg" alt="logo" />
|
||||
</button>
|
||||
</button>
|
||||
<ul class="menuitem-container">
|
||||
@ -205,6 +207,7 @@
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -15px;
|
||||
.logo-text {
|
||||
padding: 0px 10px;
|
||||
p {
|
||||
@ -213,23 +216,24 @@
|
||||
}
|
||||
& > #upper {
|
||||
span {
|
||||
font-family: "Grandstander" !important;
|
||||
font-size: 42px;
|
||||
font-family: "Dekko" !important;
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
word-spacing: 5px;
|
||||
letter-spacing: 4px;
|
||||
&.red {
|
||||
color: red;
|
||||
color: rgb(184, 16, 16);
|
||||
}
|
||||
&.yellow {
|
||||
color: yellow;
|
||||
color: rgb(184, 16, 16);
|
||||
}
|
||||
}
|
||||
}
|
||||
& > #lower {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.4px;
|
||||
font-weight: bold;
|
||||
margin-top: -17px;
|
||||
color: orange;
|
||||
font-family: "Grandstander" !important;
|
||||
}
|
||||
@ -239,6 +243,8 @@
|
||||
}
|
||||
.img-logo-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
|
||||
@ -61,14 +61,14 @@
|
||||
}}"
|
||||
>
|
||||
<button class="img-logo-container">
|
||||
<img src="/media/Radfahrer.svg" alt="logo" />
|
||||
<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="upper"><span class="yellow">all</span> <span class="red">kids</span></p>
|
||||
<p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
|
||||
</div>
|
||||
<button class="img-logo-container">
|
||||
<img src="/media/MädchenmitBlume.svg" alt="logo" />
|
||||
<img src="/media/Radfahrer.svg" alt="logo" />
|
||||
</button>
|
||||
</button>
|
||||
<button
|
||||
@ -242,6 +242,7 @@
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -15px;
|
||||
.logo-text {
|
||||
padding: 0px 10px;
|
||||
p {
|
||||
@ -250,22 +251,23 @@
|
||||
}
|
||||
& > #upper {
|
||||
span {
|
||||
font-family: "Grandstander" !important;
|
||||
font-size: 30px;
|
||||
font-family: "Dekko" !important;
|
||||
font-size: 45px;
|
||||
font-weight: 700;
|
||||
word-spacing: 5px;
|
||||
letter-spacing: 4px;
|
||||
&.red {
|
||||
color: red;
|
||||
color: rgb(184, 16, 16);
|
||||
}
|
||||
&.yellow {
|
||||
color: yellow;
|
||||
color: rgb(184, 16, 16);
|
||||
}
|
||||
}
|
||||
}
|
||||
& > #lower {
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.4px;
|
||||
margin-top: -15px;
|
||||
font-weight: bold;
|
||||
color: orange;
|
||||
font-family: "Grandstander" !important;
|
||||
@ -276,6 +278,8 @@
|
||||
}
|
||||
.img-logo-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
|
||||
@ -49,72 +49,76 @@
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-img-redundant-alt -->
|
||||
<div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div>
|
||||
{#if teaser}
|
||||
<div class="container" id="HP">
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<swiper-container
|
||||
bind:this="{swiper}"
|
||||
slides-per-view="1"
|
||||
loop="{true}"
|
||||
direction="horizontal"
|
||||
effect="slide"
|
||||
navigation="{true}"
|
||||
init="{false}"
|
||||
autoplay="{{
|
||||
delay: 4000, // 5000ms = 5s
|
||||
pauseOnMouseEnter: true,
|
||||
}}"
|
||||
speed="600"
|
||||
on:focus
|
||||
on:blur
|
||||
on:slidechange="{() => handleSlideChange()}"
|
||||
on:mouseenter="{() => handleMouseOver()}"
|
||||
on:mouseleave="{() => handleMouseOut()}"
|
||||
class="relative"
|
||||
>
|
||||
{#each teasers as teaser}
|
||||
{#if teaser?.teaser?.showTeaser}
|
||||
<swiper-slide class="relative">
|
||||
<div class="inner-container">
|
||||
<div class="titles">
|
||||
<h2>{teaser?.teaser?.subTitle}</h2>
|
||||
<h1>
|
||||
{teaser?.teaser?.teaserTitle}
|
||||
<div class="underline"></div>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="placeholder"></div>
|
||||
<div
|
||||
style=" display: flex;
|
||||
<div class="homepage">
|
||||
<div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div>
|
||||
{#if teaser}
|
||||
<div class="container" id="HP">
|
||||
<div style="height: 105px;"></div>
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<swiper-container
|
||||
bind:this="{swiper}"
|
||||
slides-per-view="1"
|
||||
loop="{true}"
|
||||
direction="horizontal"
|
||||
effect="slide"
|
||||
navigation="{true}"
|
||||
init="{false}"
|
||||
autoplay="{{
|
||||
delay: 4000, // 5000ms = 5s
|
||||
pauseOnMouseEnter: true,
|
||||
}}"
|
||||
speed="600"
|
||||
on:focus
|
||||
on:blur
|
||||
on:slidechange="{() => handleSlideChange()}"
|
||||
on:mouseenter="{() => handleMouseOver()}"
|
||||
on:mouseleave="{() => handleMouseOut()}"
|
||||
class="relative"
|
||||
>
|
||||
{#each teasers as teaser}
|
||||
{#if teaser?.teaser?.showTeaser}
|
||||
<swiper-slide class="relative">
|
||||
<div class="inner-container">
|
||||
<div class="titles">
|
||||
<h2>{teaser?.teaser?.subTitle}</h2>
|
||||
<h1>
|
||||
{teaser?.teaser?.teaserTitle}
|
||||
<div class="underline"></div>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="placeholder"></div>
|
||||
<div
|
||||
style=" display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 20px;"
|
||||
>
|
||||
<div style="text-align: left;">
|
||||
<p>{@html teaser?.teaser?.teaserDescription}</p>
|
||||
</div>
|
||||
<button
|
||||
on:click="{() => navigate(teaser.path)}"
|
||||
style="
|
||||
>
|
||||
<div style="text-align: left;">
|
||||
<p>{@html teaser?.teaser?.teaserDescription}</p>
|
||||
</div>
|
||||
<button
|
||||
on:click="{() => navigate(teaser.path)}"
|
||||
style="
|
||||
font-weight: bold;
|
||||
color: var(--link-font-color);
|
||||
width: fit-content;
|
||||
border-top: 3px solid var(--link-font-color);
|
||||
margin-top: 3rem;
|
||||
">MEHR</button
|
||||
>
|
||||
>
|
||||
</div>
|
||||
<div class="placeholder"></div>
|
||||
</div>
|
||||
<div class="placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
{/if}
|
||||
{/each}
|
||||
</swiper-container>
|
||||
</div>
|
||||
{/if}
|
||||
</swiper-slide>
|
||||
{/if}
|
||||
{/each}
|
||||
</swiper-container>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="homepage-placeholder"></div>
|
||||
|
||||
<style lang="less" global>
|
||||
@import "../../assets/css/variables.less";
|
||||
@ -123,6 +127,24 @@
|
||||
@import "swiper/modules/navigation/navigation";
|
||||
@import "swiper/modules/pagination/pagination";
|
||||
@import "../../assets/css/SwiperStylesHP.less";
|
||||
.homepage-placeholder {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
|
||||
background-color: transparent;
|
||||
height: calc(100vh + 105px);
|
||||
}
|
||||
.homepage {
|
||||
height: 100vh;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100vw !important;
|
||||
align-items: center;
|
||||
}
|
||||
.background-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -151,7 +173,7 @@
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(48, 47, 47, 0.242);
|
||||
background: rgba(48, 47, 47, 0.612);
|
||||
z-index: 2; /* Higher than the image */
|
||||
}
|
||||
.container#HP {
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
isExpanded = true
|
||||
interval = setInterval(() => {
|
||||
currentIndex = (currentIndex + 1) % $banner.length
|
||||
}, 7000)
|
||||
@ -73,9 +72,9 @@
|
||||
|
||||
.toggle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
left: 0%;
|
||||
background-color: var(--banner-color);
|
||||
transform: translate(-50%, -100%);
|
||||
transform: translate(2%, -100%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
<Form formRow="{formRow}" formValues="{formValues}" index="{i}" />
|
||||
{/if}
|
||||
{/each}
|
||||
<div class="row additional">
|
||||
<div class="row additional" style="padding: 0px;">
|
||||
<div class="data-protection">
|
||||
<label bind:this="{$formValues[`agreement_label`]}">
|
||||
<input
|
||||
|
||||
@ -23,6 +23,9 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
|
||||
<main class="row" name="{row.title}" class:max-width="{getRowClass(row) === 'max-width'}" id="{`RowNr` + rowNr}">
|
||||
{#if row.title}
|
||||
<h3 class="row-title" class:no-margin="{rowNr == 0}">{row?.title || ""}</h3>
|
||||
@ -80,12 +83,14 @@
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
padding: 0px 0px 15px 0;
|
||||
padding: 15px min(4.5vw, 100px) 0px min(4.5vw, 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: @body-small-maxwidth;
|
||||
|
||||
background-color: var(--background-color);
|
||||
|
||||
ul {
|
||||
list-style-type: none; /* Remove default bullet points */
|
||||
padding: 0;
|
||||
|
||||
@ -26,7 +26,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2vw;
|
||||
width: 100%;
|
||||
padding: 15px min(4.5vw, 100px) 0px min(4.5vw, 100px);
|
||||
|
||||
max-width: @body-small-maxwidth;
|
||||
@media @desktop {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@ -20,12 +20,29 @@
|
||||
<main>
|
||||
{#if site != undefined}
|
||||
<Homepage />
|
||||
<div class="balloons">
|
||||
<div style=" background-color: var(--background-color)"></div>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
|
||||
{#each site.row as row, i}
|
||||
<Pagebuilder rowNr="{i}" row="{row}" rows="{site?.row}" siteId="{site?.id}" />
|
||||
<div class="row-wrapper" on:click|stopPropagation>
|
||||
<div class="middle-wrapper">
|
||||
<Pagebuilder rowNr="{i}" row="{row}" rows="{site?.row}" siteId="{site?.id}" />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#each Object.values($sites) as site, i}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
{#if site.showTeaser}
|
||||
<Teaser site="{site}" index="{i}" />
|
||||
<div class="row-wrapper" on:click|stopPropagation>
|
||||
<div class="middle-wrapper">
|
||||
<Teaser site="{site}" index="{i}" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
@ -35,10 +52,30 @@
|
||||
main {
|
||||
min-height: 80vh;
|
||||
width: 100%;
|
||||
padding: 0px min(4.5vw, 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: min(10vw, 60px);
|
||||
}
|
||||
.balloons {
|
||||
background-image: url("../../media/balloons.svg");
|
||||
background-repeat: repeat-x; /* Horizontal repetition */
|
||||
background-size: 150px 150px;
|
||||
width: 100%;
|
||||
|
||||
z-index: 10;
|
||||
height: 140px;
|
||||
}
|
||||
.row-wrapper {
|
||||
background-color: var(--background-color);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
padding-top: min(10vw, 60px);
|
||||
& .middle-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
<button
|
||||
on:click="{() => {
|
||||
navigate('/')
|
||||
$refresh = !$refresh
|
||||
}}"
|
||||
class="back-home">Zurück zur Startseite</button
|
||||
>
|
||||
|
||||
@ -64,9 +64,10 @@
|
||||
main {
|
||||
min-height: 70vh;
|
||||
width: 100%;
|
||||
padding: 0px min(4.5vw, 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--background-color);
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user