SESP/sesp-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance NewsCarousel component: Update background gradient and add drop shadows to text elements for improved readability and visual appeal.

Browse Source
This commit is contained in:
killer-cf
2026-01-06 13:22:12 -03:00
parent da387ed7e7
commit 78964261d9
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/NewsCarousel.svelte
View File

@@ -91,7 +91,9 @@
aria-hidden="true"
class="h-56 w-full bg-linear-to-br from-[color:var(--accent-blue)]/15 via-white/40 to-[color:var(--accent-yellow)]/20 sm:h-64"
></div>
<div class="absolute inset-0 bg-linear-to-t from-black/35 via-black/0 to-black/0"></div>
<div
class="absolute inset-0 bg-linear-to-t from-black/75 via-black/35 to-black/0"
></div>
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-7">
<div class="flex flex-wrap items-center gap-2">
<span
@@ -105,13 +107,13 @@
{new Date(item.date).toLocaleDateString('pt-BR')}
</span>
</div>
<p class="mt-3 text-xl font-extrabold tracking-tight text-white sm:text-2xl">
<p class="mt-3 text-xl font-extrabold tracking-tight text-white drop-shadow-sm sm:text-2xl">
{item.title}
</p>
<p class="mt-2 max-w-3xl text-sm leading-relaxed text-white/90">
<p class="mt-2 max-w-3xl text-sm leading-relaxed text-white/90 drop-shadow-sm">
{item.dek}
</p>
<div class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-white">
<div class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-white drop-shadow-sm">
<span class="underline-offset-4 group-hover:underline">Ler notícia</span>
<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
</div>