32 lines
1.1 KiB
Vue
32 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
title: string
|
|
subtitle?: string | null
|
|
}>()
|
|
|
|
const background = computed(() => {
|
|
let hue = 0
|
|
for (const char of props.title) hue = (hue * 31 + char.codePointAt(0)!) % 360
|
|
return `linear-gradient(155deg, hsl(${hue} 38% 40%), hsl(${(hue + 24) % 360} 42% 22%))`
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="relative size-full overflow-hidden text-white [container-type:inline-size]"
|
|
:style="{ background }"
|
|
role="img"
|
|
:aria-label="`Cover of ${title}`"
|
|
>
|
|
<span class="absolute inset-y-0 left-[7cqw] w-px bg-white/25" aria-hidden="true" />
|
|
<div class="flex size-full flex-col justify-between gap-1 p-[8cqw] pl-[12cqw]">
|
|
<span class="font-serif text-[clamp(0.5rem,11cqw,1.05rem)] leading-tight font-semibold text-balance wrap-anywhere line-clamp-6">
|
|
{{ title }}
|
|
</span>
|
|
<span v-if="subtitle" class="text-[clamp(0.4rem,7cqw,0.7rem)] leading-tight tracking-wide text-white/75 uppercase wrap-anywhere line-clamp-2">
|
|
{{ subtitle }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|