ceiba-scores/src/components/ScoreHeader.vue

104 lines
2.8 KiB
Vue
Raw Normal View History

2022-03-29 23:30:23 +02:00
<script setup>
defineProps({
title: {
type: String,
required: true,
},
});
</script>
<template>
<header>
<router-link :to="{ name: 'home' }">
<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>
<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
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
p
margin: 0 auto
font-size: 2rem
color: var(--color-header-text)
2022-03-29 23:30:23 +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
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>