124 lines
3.9 KiB
Svelte
124 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import { serviceNavigation, content } from "../store"
|
|
import { navigateWrapper } from "../functions/utils"
|
|
</script>
|
|
|
|
<footer class="footer">
|
|
<div class="infos">
|
|
<h3>webmakers Erfurt</h3>
|
|
<div class="infos-inner">
|
|
<div class="upper">
|
|
<p>Inh. Marc Oschmann</p>
|
|
<p>Marktstraße 34</p>
|
|
<p>99084 Erfurt</p>
|
|
</div>
|
|
<div class="lower">
|
|
<p>Tel.: 0361 6021502</p>
|
|
<p>Fax.: 0361 6021502</p>
|
|
<p>Email: webmakers@gmail.de</p>
|
|
</div>
|
|
</div>
|
|
<div class="social">
|
|
<a href="">
|
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M11.7 3h12.6c4.8 0 8.7 3.9 8.7 8.7v12.6a8.7 8.7 0 0 1-8.7 8.7H11.7C6.9 33 3 29.1 3 24.3V11.7A8.7 8.7 0 0 1 11.7 3zm-.3 3A5.4 5.4 0 0 0 6 11.4v13.2c0 2.985 2.415 5.4 5.4 5.4h13.2a5.4 5.4 0 0 0 5.4-5.4V11.4C30 8.415 27.585 6 24.6 6H11.4zm14.475 2.25a1.875 1.875 0 1 1 0 3.75 1.875 1.875 0 0 1 0-3.75zM18 10.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15zm0 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"
|
|
fill="#333333"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
<a href="">
|
|
<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="#333333"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<nav class="services">
|
|
<ul>
|
|
{#each $serviceNavigation || [] as service, i (i)}
|
|
<li>
|
|
<button
|
|
on:click="{() => {
|
|
navigateWrapper(`${$content[service?.page || '']?.path}`)
|
|
}}"
|
|
><a class="nav-title-m" href="{$content?.[service?.page || '']?.path}" on:click|preventDefault
|
|
>{service?.name}</a
|
|
></button
|
|
>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|
|
</footer>
|
|
|
|
<style lang="less">
|
|
@import "../assets/css/variables.less";
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
.social {
|
|
margin-top: 20px;
|
|
}
|
|
.footer {
|
|
margin-top: 60px;
|
|
width: 100vw;
|
|
min-height: fit-content;
|
|
font-size: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
max-width: calc(@body-maxwidth - min(9vw, 200px));
|
|
background-color: @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;
|
|
}
|
|
.infos-inner {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.footer {
|
|
}
|
|
}
|
|
@media @desktop {
|
|
.footer {
|
|
height: 350px;
|
|
.infos-inner {
|
|
gap: 5vw;
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
}
|
|
</style>
|