pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

feat(list): add header shadow

Browse source
This commit is contained in:
Kim, Jimin 2025-03-21 12:35:44 +09:00
parent 8090737996
commit d494aacd80
Signed by: pomp
GPG key ID: D3932F82A0667A3B
1 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

34
apps/list/components/Header.vue
View file

@ -5,22 +5,24 @@ const props = defineProps<{
</script>
<template>
<div class="slant mb-12 bg-light-card-bg dark:bg-dark-card-bg">
<ThemeController class="h-12" />
<div class="slant-shadow">
<div class="slant mb-12 bg-light-card-bg dark:bg-dark-card-bg">
<ThemeController class="h-12" />
<h1
class="mb-12 text-center text-4xl leading-[3rem] text-slate-800 dark:text-slate-200"
>
<span class="font-semibold">pomp</span>'s<br />
biased & opinionated
<br />
list of
<span
class="highlight px-1 font-extrabold text-light-text-default dark:text-dark-text-default"
<h1
class="mb-12 text-center text-4xl leading-[3rem] text-slate-800 dark:text-slate-200"
>
{{ props.highlight }}
</span>
</h1>
<span class="font-semibold">pomp</span>'s<br />
biased & opinionated
<br />
list of
<span
class="highlight px-1 font-extrabold text-light-text-default dark:text-dark-text-default"
>
{{ props.highlight }}
</span>
</h1>
</div>
</div>
</template>
@ -34,4 +36,8 @@ const props = defineProps<{
padding-bottom: 8rem /* 128px (pb-32) */;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 128px));
}
.slant-shadow {
filter: drop-shadow(0px 0px 20px #ccc);
}
</style>