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

Refactor component styles: Update various components to use rounded-lg instead of rounded-2xl for a more consistent design, and adjust button styles for improved visual coherence across the application.

Browse Source
This commit is contained in:
killer-cf
2026-01-06 14:12:00 -03:00
parent a478c834e3
commit 0fbd56d39e
10 changed files with 86 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,13 +41,13 @@
}
</script>
<section aria-label={title} class="overflow-hidden rounded-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
<section aria-label={title} class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
<header class="flex items-center justify-between gap-3 px-6 py-5 sm:px-8">
<h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">{title}</h2>
<div class="flex items-center gap-2">
<button
type="button"
class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
onclick={prev}
aria-label="Notícia anterior"
disabled={items.length < 2}
@@ -56,7 +56,7 @@
</button>
<button
type="button"
class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
onclick={next}
aria-label="Próxima notícia"
disabled={items.length < 2}
@@ -68,7 +68,7 @@
{#if items.length === 0}
<div class="px-6 pb-7 sm:px-8">
<p class="rounded-2xl bg-white/80 p-6 text-sm text-(--text) ring-1 ring-black/5">
<p class="rounded-lg bg-white/80 p-6 text-sm text-(--text) ring-1 ring-black/5">
Nenhuma notícia disponível.
</p>
</div>
@@ -83,41 +83,56 @@
{#each items as item, i (item.slug)}
<a
href={`/noticias/${item.slug}`}
class={`group block overflow-hidden rounded-3xl ring-1 ring-black/10 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${i === index ? '' : 'hidden'}`}
class={`group block overflow-hidden rounded-lg ring-1 ring-black/10 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${i === index ? '' : 'hidden'}`}
aria-label={`Ler notícia: ${item.title}`}
>
<div class="relative">
<div
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/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
class="rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
{#if item.imageSrc}
<img
src={item.imageSrc}
alt=""
aria-hidden="true"
class="h-72 w-full object-cover sm:h-80 lg:h-96"
loading={i === index ? 'eager' : 'lazy'}
decoding="async"
/>
<div
aria-hidden="true"
class="pointer-events-none absolute inset-0 bg-black/0 transition group-hover:bg-black/10"
></div>
{:else}
<div
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/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
class="rounded-lg bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
>
{item.category}
</span>
<span
class="rounded-lg bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
>
{new Date(item.date).toLocaleDateString('pt-BR')}
</span>
</div>
<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 drop-shadow-sm">
{item.dek}
</p>
<div
class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-white drop-shadow-sm"
>
{item.category}
</span>
<span
class="rounded-full bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
>
{new Date(item.date).toLocaleDateString('pt-BR')}
</span>
<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>
</div>
<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 drop-shadow-sm">
{item.dek}
</p>
<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>
</div>
{/if}
</div>
</a>
{/each}

4
src/lib/components/ProgramCard.svelte
View File

@@ -17,12 +17,12 @@
<a
href={`/${program.id}`}
class={`group relative block overflow-hidden rounded-2xl bg-white/90 p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:bg-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${accentClassByAccent[program.accent]}`}
class={`group relative block overflow-hidden rounded-lg bg-white/90 p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:bg-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${accentClassByAccent[program.accent]}`}
aria-label={`Acessar página do programa ${program.name}`}
>
<div class="flex items-start gap-4">
<div
class="grid h-16 w-16 shrink-0 place-items-center rounded-xl bg-(--surface-muted) ring-1 ring-black/5"
class="grid h-16 w-16 shrink-0 place-items-center rounded-md bg-(--surface-muted) ring-1 ring-black/5"
>
<img
src={program.brandImageSrc}

4
src/lib/components/ProgramMiniCard.svelte
View File

@@ -17,10 +17,10 @@
<a
href={`/${program.id}`}
class="group flex items-start gap-3 rounded-2xl bg-white/80 p-4 shadow-sm ring-1 ring-black/5 transition hover:bg-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
class="group flex items-start gap-3 rounded-lg bg-white/80 p-4 shadow-sm ring-1 ring-black/5 transition hover:bg-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
aria-label={`Acessar programa ${program.name}`}
>
<div class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-(--surface-muted) ring-1 ring-black/5">
<div class="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-(--surface-muted) ring-1 ring-black/5">
<img
src={program.brandImageSrc}
alt={`Logomarca ${program.name}`}

18
src/lib/components/ProgramPage.svelte
View File

@@ -32,13 +32,13 @@
<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
<a
href="/"
class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
class="inline-flex items-center gap-2 rounded-md px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
>
<span aria-hidden="true">←</span>
Voltar para a página inicial
</a>
<section class="mt-6 overflow-hidden rounded-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
<section class="mt-6 overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
<div
class={`bg-linear-to-b ${accentBgByAccent[program.accent]} to-transparent px-6 py-10 sm:px-10`}
>
@@ -46,7 +46,7 @@
<div class="min-w-0">
<div class="flex items-center gap-4">
<div
class="grid h-16 w-16 place-items-center rounded-2xl bg-white/90 ring-1 ring-black/5"
class="grid h-16 w-16 place-items-center rounded-lg bg-white/90 ring-1 ring-black/5"
>
<img
src={program.brandImageSrc}
@@ -69,7 +69,7 @@
</p>
<div class="mt-6 grid gap-3 sm:grid-cols-2">
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Inscrições 2026
</p>
@@ -79,21 +79,21 @@
<p class="mt-2 text-xs text-(--text-muted)">Exclusivamente online.</p>
</div>
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Quem pode</p>
<p class="mt-2 text-sm text-(--text)">{program.eligibility}</p>
</div>
</div>
<div class="mt-3 grid gap-3 sm:grid-cols-2">
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Como funciona
</p>
<p class="mt-2 text-sm leading-relaxed text-(--text)">{program.signupProcess}</p>
</div>
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Benefícios
</p>
@@ -114,7 +114,7 @@
href={program.signupUrl}
target="_blank"
rel="noopener noreferrer"
class={`inline-flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white ${accentButtonByAccent[program.accent]}`}
class={`inline-flex items-center justify-center gap-2 rounded-md px-4 py-3 text-sm font-bold text-white shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white ${accentButtonByAccent[program.accent]}`}
>
Inscrição
<span aria-hidden="true">↗</span>
@@ -124,7 +124,7 @@
href={program.editalUrl}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
class="inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
>
Edital
<span aria-hidden="true">↗</span>