ceiba-scores/src/components/ScoreHeader.vue

66 lines
1007 B
Vue

<script setup>
defineProps({
title: {
type: String,
required: true,
},
});
</script>
<template>
<header>
<router-link :to="{ name: 'home' }">
<p></p>
</router-link>
<h1>{{ title }}</h1>
</header>
</template>
<style scoped>
header {
height: var(--header-size);
position: fixed;
background: var(--color-green);
width: 100%;
z-index: 1;
top: 0;
border-bottom: 1px solid var(--color-white);
display: flex;
align-items: center;
align-content: center;
}
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-white);
text-decoration: none;
}
p {
margin: 0 auto;
font-size: 2rem;
color: var(--color-white);
}
h1 {
margin: 0 1rem;
line-height: 0.9;
flex: 1;
font-size: 1.2rem;
font-weight: bold;
}
@media (min-width: 1024px) {
p {
font-size: 4rem;
}
}
</style>