81 lines
1.6 KiB
Vue
81 lines
1.6 KiB
Vue
<template>
|
|
<div class="layout layout--public public">
|
|
<div class="public__logo">
|
|
<router-link
|
|
:to="{name: 'hello'}"
|
|
class="hep-link"
|
|
>
|
|
<logo />
|
|
</router-link>
|
|
</div>
|
|
<router-view class="public__content layout__content" />
|
|
<default-footer
|
|
class="skillbox__footer public__footer footer"
|
|
v-if="$flavor.showFooter"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {defineAsyncComponent} from 'vue';
|
|
import DefaultFooter from '@/layouts/DefaultFooter';
|
|
const Logo = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */'@/components/icons/Logo'));
|
|
|
|
export default {
|
|
components: {
|
|
Logo,
|
|
DefaultFooter
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
@import "@/styles/_default-layout.scss";
|
|
|
|
@mixin content-block {
|
|
padding-right: $medium-spacing;
|
|
padding-left: $medium-spacing;
|
|
max-width: 800px;
|
|
min-width: 320px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.logo {
|
|
position: relative;
|
|
|
|
width: auto;
|
|
height: 43px;
|
|
}
|
|
|
|
.public {
|
|
grid-template-areas: "h" "c" "f";
|
|
|
|
&__content {
|
|
@include content-block();
|
|
margin-bottom: $large-spacing;
|
|
width: auto;
|
|
}
|
|
|
|
&__logo {
|
|
@include content-block();
|
|
margin-top: $medium-spacing
|
|
}
|
|
|
|
&__footer {
|
|
background-color: $color-silver-light;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
padding: $large-spacing $medium-spacing 0;
|
|
|
|
&__content {
|
|
@include content-block();
|
|
}
|
|
}
|
|
</style>
|