127 lines
3.5 KiB
Svelte
127 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { navigate } from "svelte-routing"
|
|
import { serviceNavigation, sites, darkMode } from "../stores"
|
|
</script>
|
|
|
|
<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>
|
|
<div class="lower">
|
|
<p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p>
|
|
<p>Email: <a href="mailto:kiro0206@icloud.com">kiro0206@icloud.com</a></p>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
<div class="services">
|
|
{#each $serviceNavigation?.elemente || [] as service, i (i)}
|
|
<button
|
|
on:click="{() => {
|
|
navigate(`${$sites[service.seite || '']?.path}`)
|
|
}}">{service?.name}</button
|
|
>
|
|
{/each}
|
|
</div>
|
|
<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>
|
|
|
|
<style lang="less">
|
|
@import "../assets/css/variables.less";
|
|
.social {
|
|
margin-top: 20px;
|
|
}
|
|
.darklight {
|
|
width: 36px;
|
|
height: 36px;
|
|
object-fit: contain;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.footer {
|
|
margin-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);
|
|
padding: min(4.5vw, 100px) min(4.5vw, 100px) 0px min(4.5vw, 100px);
|
|
}
|
|
.infos {
|
|
display: flex;
|
|
height: 70%;
|
|
.infos-inner {
|
|
gap: 10px;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.services {
|
|
display: flex;
|
|
flex-direction: column;
|
|
button {
|
|
font-size: inherit;
|
|
padding: 6px 0px;
|
|
text-align: start;
|
|
}
|
|
}
|
|
|
|
@media @mobile {
|
|
.infos {
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
|
|
@media @mobile {
|
|
gap: 20px;
|
|
}
|
|
@media @tablet {
|
|
gap: 40px;
|
|
}
|
|
min-height: 350px;
|
|
.infos-inner {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
@media @desktop {
|
|
.footer {
|
|
min-height: 350px;
|
|
.infos-inner {
|
|
gap: 5vw;
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
}
|
|
</style>
|