34 lines
936 B
Vue
34 lines
936 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
level: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const tagName = computed(() => `h${Math.min(Math.max(props.level, 1), 6)}`)
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="tagName"
|
|
:id="id || undefined"
|
|
class="prose-heading mb-2.5 font-semibold leading-[1.25] tracking-normal first:mt-0"
|
|
style="scroll-margin-top: calc(var(--site-top-chrome-height, 57px) + 24px)"
|
|
:class="{
|
|
'text-[clamp(1.35rem,1.25rem+0.35vw,1.6rem)] leading-[1.15]': level === 1,
|
|
'text-[clamp(1.2rem,1.15rem+0.3vw,1.4rem)]': level === 2,
|
|
'text-[clamp(1.1rem,1.05rem+0.25vw,1.25rem)]': level === 3,
|
|
'text-[clamp(1.025rem,1rem+0.2vw,1.15rem)]': level === 4,
|
|
'text-[clamp(0.95rem,0.925rem+0.15vw,1.05rem)]': level === 5,
|
|
'text-[clamp(0.9rem,0.875rem+0.1vw,1rem)]': level === 6
|
|
}"
|
|
>
|
|
<slot />
|
|
</component>
|
|
</template>
|