dashy/src/components/PageStrcture/PageTitle.vue

42 lines
759 B
Vue

<template>
<router-link to="/" class="page-titles">
<h1>{{ title }}</h1>
<span class="subtitle">{{ description }}</span>
</router-link>
</template>
<script>
export default {
name: 'PageTitle',
props: {
title: String,
description: String,
},
};
</script>
<style scoped lang="scss">
@import '@/styles/media-queries.scss';
.page-titles {
display: flex;
flex-direction: column;
text-decoration: none;
h1 {
color: var(--heading-text-color);
font-size: 2.5rem;
margin: 0;
}
span.subtitle {
color: var(--heading-text-color);
font-style: italic;
text-shadow: 1px 1px 2px #130f23;
opacity: var(--dimming-factor);
}
@include phone {
text-align: center;
padding: 0.25rem 0;
}
}
</style>