155 lines
3.5 KiB
Vue
155 lines
3.5 KiB
Vue
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
link: {
|
|
type: String,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<router-link :to="{ name: 'home' }">
|
|
<svg
|
|
class="color-text"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M22 22L2 22"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M4 22V9.5"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M20 22V9.5"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
</svg>
|
|
</router-link>
|
|
<h1>{{ title }}</h1>
|
|
<a v-if="link" :href="link">
|
|
<svg
|
|
class="color-text"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 17V11"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<circle
|
|
cx="1"
|
|
cy="1"
|
|
r="1"
|
|
transform="matrix(1 0 0 -1 11 9)"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</header>
|
|
</template>
|
|
|
|
<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
|
|
|
|
a:first-child
|
|
border-right: 1px solid var(--color-header-text)
|
|
a:last-child
|
|
border-left: 1px solid var(--color-header-text)
|
|
|
|
a:hover svg, a:focus svg, a:active svg
|
|
transform: scale(1.1)
|
|
|
|
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
|
|
text-decoration: none
|
|
|
|
p
|
|
margin: 0 auto
|
|
font-size: 2rem
|
|
color: var(--color-header-text)
|
|
|
|
h1
|
|
margin: 0 1rem
|
|
line-height: 0.9
|
|
flex: 1
|
|
font-size: 1.2rem
|
|
font-weight: bold
|
|
text-align: center
|
|
|
|
svg
|
|
width: 2rem
|
|
margin: 0 auto
|
|
|
|
@media (min-height: 1000px)
|
|
p
|
|
font-size: 4rem
|
|
|
|
h1
|
|
font-size: 2rem
|
|
|
|
svg
|
|
width: 4rem
|
|
</style>
|