2022-03-29 23:30:23 +02:00
|
|
|
<script setup>
|
|
|
|
defineProps({
|
|
|
|
title: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<header>
|
|
|
|
<router-link :to="{ name: 'home' }">
|
2023-04-27 22:31:59 +02:00
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
|
|
|
|
<path
|
|
|
|
fill="#5C913B"
|
|
|
|
d="M36 33.5c0 .828-.672 1.5-1.5 1.5h-33C.672 35 0 34.328 0 33.5S.672 32 1.5 32h33c.828 0 1.5.672 1.5 1.5z"
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
fill="#A0041E"
|
|
|
|
d="M12.344 14.702h-2c-.276 0-.5-.224-.5-.5v-7c0-.276.224-.5.5-.5h2c.276 0 .5.224.5.5v7c0 .276-.224.5-.5.5z"
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
fill="#FFCC4D"
|
|
|
|
d="M5.942 32c-.137-4.657-.506-8-.942-8-.435 0-.804 3.343-.941 8h1.883z"
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
fill="#77B255"
|
|
|
|
d="M10 18.731C10 24.306 7.762 26 5 26c-2.761 0-5-1.694-5-7.269C0 13.154 4 5 5 5s5 8.154 5 13.731z"
|
|
|
|
/>
|
|
|
|
<path fill="#FFE8B6" d="M8 16L21 3l13 13v16H8z" />
|
|
|
|
<path fill="#FFCC4D" d="M21 16h1v16h-1z" />
|
|
|
|
<path
|
|
|
|
fill="#66757F"
|
|
|
|
d="M34 17c-.256 0-.512-.098-.707-.293L21 4.414 8.707 16.707c-.391.391-1.023.391-1.414 0s-.391-1.023 0-1.414l13-13c.391-.391 1.023-.391 1.414 0l13 13c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
fill="#66757F"
|
|
|
|
d="M21 17c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l6.5-6.5c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-6.5 6.5c-.195.195-.451.293-.707.293z"
|
|
|
|
/>
|
|
|
|
<path fill="#C1694F" d="M13 26h4v6h-4z" />
|
|
|
|
<path fill="#55ACEE" d="M13 17h4v4h-4zm12.5 0h4v4h-4zm0 9h4v4h-4z" />
|
|
|
|
<path
|
|
|
|
fill="#77B255"
|
|
|
|
d="M10.625 29.991c0 1.613-.858 2.103-1.917 2.103-1.058 0-1.917-.49-1.917-2.103 0-1.613 1.533-3.973 1.917-3.973s1.917 2.359 1.917 3.973zm25.25 0c0 1.613-.858 2.103-1.917 2.103-1.058 0-1.917-.49-1.917-2.103 0-1.613 1.533-3.973 1.917-3.973.384 0 1.917 2.359 1.917 3.973z"
|
|
|
|
/>
|
|
|
|
</svg>
|
2022-03-29 23:30:23 +02:00
|
|
|
</router-link>
|
|
|
|
<h1>{{ title }}</h1>
|
|
|
|
</header>
|
|
|
|
</template>
|
|
|
|
|
2023-04-27 22:31:59 +02:00
|
|
|
<style lang="sass" scoped>
|
|
|
|
header
|
|
|
|
height: var(--header-size)
|
|
|
|
position: fixed
|
|
|
|
background: var(--color-header-background)
|
|
|
|
color: var(--color-header-text)
|
|
|
|
width: 100%
|
|
|
|
z-index: 1
|
|
|
|
top: 0
|
|
|
|
border-bottom: 1px solid var(--color-header-text)
|
|
|
|
display: flex
|
|
|
|
align-items: center
|
|
|
|
align-content: center
|
2022-03-29 23:30:23 +02:00
|
|
|
|
2023-04-27 22:31:59 +02:00
|
|
|
a
|
|
|
|
height: 100%
|
|
|
|
width: var(--header-size)
|
|
|
|
min-width: var(--header-size)
|
|
|
|
margin: 0
|
|
|
|
display: flex
|
|
|
|
align-items: center
|
|
|
|
text-align: center
|
|
|
|
align-content: center
|
|
|
|
border-right: 1px solid var(--color-header-text)
|
|
|
|
text-decoration: none
|
2022-03-29 23:30:23 +02:00
|
|
|
|
2023-04-27 22:31:59 +02:00
|
|
|
p
|
|
|
|
margin: 0 auto
|
|
|
|
font-size: 2rem
|
|
|
|
color: var(--color-header-text)
|
2022-03-29 23:30:23 +02:00
|
|
|
|
2023-04-27 22:31:59 +02:00
|
|
|
h1
|
|
|
|
margin: 0 1rem
|
|
|
|
line-height: 0.9
|
|
|
|
flex: 1
|
|
|
|
font-size: 1.2rem
|
|
|
|
font-weight: bold
|
2022-03-29 23:30:23 +02:00
|
|
|
|
2023-04-27 22:31:59 +02:00
|
|
|
svg
|
|
|
|
width: 2rem
|
|
|
|
margin: 0 auto
|
|
|
|
|
|
|
|
@media (min-height: 800px)
|
|
|
|
p
|
|
|
|
font-size: 4rem
|
|
|
|
|
|
|
|
h1
|
|
|
|
font-size: 2rem
|
|
|
|
|
|
|
|
svg
|
|
|
|
width: 4rem
|
2022-03-29 23:30:23 +02:00
|
|
|
</style>
|