31 add page labels and meta information

This commit is contained in:
survellow
2024-05-21 17:03:45 +02:00
parent 3c89c917a3
commit d4a248bc5d
8 changed files with 167 additions and 10 deletions

View File

@ -42,18 +42,18 @@ const hasContent = computed(() => {
</script>
<template>
<div class="flex flex-column align-items-center mt-0">
<heading class="flex flex-column align-items-center mt-0">
<div
class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown"
:class="{ 'md:mt-8': hideContent }"
>
<h3 class="text-4xl">
<h1 class="text-4xl">
{{ headline }}
</h3>
</h1>
<i v-if="icon" :class="icon" style="font-size: 2rem"></i>
</div>
<div v-if="subTitle" class="flex justify-content-center">
<h5 class="text-2xl m-2">{{ subTitle }}</h5>
<p class="subtitle text-2xl m-2">{{ subTitle }}</p>
</div>
<div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
<slot name="selection" flex-specs="flex-1 m-0"></slot>
@ -87,11 +87,15 @@ const hasContent = computed(() => {
>
<slot name="content"></slot>
</div>
</div>
</heading>
</template>
<style scoped>
.transition-rolldown {
transition: margin-top 0.5s ease-in-out;
}
.subtitle {
font-weight: 100;
font-size: 1.5rem;
}
</style>