zenn
5f2b2b8c4f
Ordered list, 멀티라인/대체 인용구 문법을 추가하고 Prose 컴포넌트(리스트/인용/이미지/카드/임베드) 기본 스타일을 Thred 톤으로 통일했다. Co-authored-by: Cursor <cursoragent@cursor.com>
28 lines
782 B
Vue
28 lines
782 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
level: {
|
|
type: Number,
|
|
default: 2
|
|
}
|
|
})
|
|
|
|
const tagName = computed(() => `h${Math.min(Math.max(props.level, 1), 6)}`)
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="tagName"
|
|
class="prose-heading mt-12 font-semibold leading-[1.25] tracking-normal first:mt-0"
|
|
: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>
|