2023-08-06 16:27:24 +02:00
|
|
|
<script setup lang="ts">
|
2023-11-14 19:17:04 +01:00
|
|
|
withDefaults(
|
2023-11-14 18:33:23 +01:00
|
|
|
defineProps<{
|
|
|
|
|
text?: string
|
|
|
|
|
srOnly?: boolean
|
|
|
|
|
}>(),
|
|
|
|
|
{
|
|
|
|
|
text: undefined,
|
|
|
|
|
srOnly: false,
|
|
|
|
|
},
|
|
|
|
|
)
|
2023-08-06 16:27:24 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
2023-11-14 18:33:23 +01:00
|
|
|
<h1
|
|
|
|
|
id="main-target"
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
class="inline-block text-4xl font-bold"
|
|
|
|
|
:class="{ 'sr-only focus:not-sr-only': srOnly }"
|
|
|
|
|
>
|
2023-08-06 16:27:24 +02:00
|
|
|
<slot name="default">
|
|
|
|
|
{{ text }}
|
|
|
|
|
</slot>
|
2023-08-28 15:08:33 +02:00
|
|
|
</h1>
|
2023-08-06 16:27:24 +02:00
|
|
|
</template>
|
2023-11-14 18:33:23 +01:00
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
h1 {
|
|
|
|
|
/* Need some override here because of `not-sr-only` styles */
|
|
|
|
|
margin-top: 2rem !important;
|
|
|
|
|
margin-bottom: 0.75rem !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
