161 lines
3.4 KiB
Vue
161 lines
3.4 KiB
Vue
<template>
|
|
<footer
|
|
class="default-footer"
|
|
data-cy="page-footer"
|
|
>
|
|
<div class="default-footer__section">
|
|
<div class="default-footer__info">
|
|
<div class="default-footer__who-are-we who-are-we">
|
|
<h5 class="who-are-we__title">
|
|
Wer sind wir?
|
|
</h5>
|
|
<p class="who-are-we__text">
|
|
mySkillbox ist ein Angebot des hep Verlags in
|
|
Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
|
|
</p>
|
|
</div>
|
|
|
|
<a
|
|
href="https://www.hep-verlag.ch/"
|
|
target="_blank"
|
|
>
|
|
<hep-logo class="default-footer__logo-hep" />
|
|
</a>
|
|
<a
|
|
href="https://www.ehb.swiss/"
|
|
target="_blank"
|
|
>
|
|
<ehb-logo class="default-footer__logo-ehb" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="default-footer__section">
|
|
<div class="default-footer__links">
|
|
<a
|
|
href="https://myskillbox.ch/datenschutz"
|
|
target="_blank"
|
|
class="default-footer__link"
|
|
>Datenschutz</a>
|
|
<a
|
|
href="https://myskillbox.ch/impressum"
|
|
target="_blank"
|
|
class="default-footer__link"
|
|
>Impressum</a>
|
|
<a
|
|
href="https://myskillbox.ch/agb"
|
|
target="_blank"
|
|
class="default-footer__link"
|
|
>AGB</a>
|
|
<a
|
|
:href="$flavor.supportLink"
|
|
target="_blank"
|
|
class="default-footer__link"
|
|
>Support</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script>
|
|
import {defineAsyncComponent} from 'vue';
|
|
|
|
const HepLogo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogo'));
|
|
const EhbLogo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo'));
|
|
|
|
export default {
|
|
components: {
|
|
HepLogo,
|
|
EhbLogo
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.default-footer {
|
|
background-color: $color-silver-light;
|
|
max-width: 100vw;
|
|
overflow: hidden;
|
|
|
|
&__section {
|
|
width: 100%;
|
|
border-bottom: $color-silver 1px solid;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__info {
|
|
width: 100%;
|
|
max-width: $footer-width;
|
|
padding: 2*$large-spacing 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include desktop {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
&__who-are-we {
|
|
width: 100%;
|
|
margin-bottom: $large-spacing;
|
|
|
|
@include desktop {
|
|
width: 330px;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__logo-hep {
|
|
width: auto;
|
|
height: 35px;
|
|
margin-bottom: $large-spacing;
|
|
|
|
@include desktop {
|
|
width: 147px;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__logo-ehb {
|
|
width: 100px;
|
|
height: 32px;
|
|
}
|
|
|
|
&__links {
|
|
width: 100%;
|
|
max-width: $footer-width;
|
|
padding: $large-spacing 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include desktop {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
&__link {
|
|
@include aside-with-cheese;
|
|
margin-right: $large-spacing;
|
|
margin-bottom: $small-spacing;
|
|
|
|
@include desktop {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.who-are-we {
|
|
&__title {
|
|
@include heading-4;
|
|
}
|
|
|
|
&__text {
|
|
@include aside-text;
|
|
}
|
|
}
|
|
</style>
|