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> </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"> <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> <h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">{title}</h2>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
type="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} onclick={prev}
aria-label="Notícia anterior" aria-label="Notícia anterior"
disabled={items.length < 2} disabled={items.length < 2}
@@ -56,7 +56,7 @@
</button> </button>
<button <button
type="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} onclick={next}
aria-label="Próxima notícia" aria-label="Próxima notícia"
disabled={items.length < 2} disabled={items.length < 2}
@@ -68,7 +68,7 @@
{#if items.length === 0} {#if items.length === 0}
<div class="px-6 pb-7 sm:px-8"> <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. Nenhuma notícia disponível.
</p> </p>
</div> </div>
@@ -83,41 +83,56 @@
{#each items as item, i (item.slug)} {#each items as item, i (item.slug)}
<a <a
href={`/noticias/${item.slug}`} 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}`} aria-label={`Ler notícia: ${item.title}`}
> >
<div class="relative"> <div class="relative">
<div {#if item.imageSrc}
aria-hidden="true" <img
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" src={item.imageSrc}
></div> alt=""
<div aria-hidden="true"
class="absolute inset-0 bg-linear-to-t from-black/75 via-black/35 to-black/0" class="h-72 w-full object-cover sm:h-80 lg:h-96"
></div> loading={i === index ? 'eager' : 'lazy'}
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-7"> decoding="async"
<div class="flex flex-wrap items-center gap-2"> />
<span <div
class="rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10" 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 class="underline-offset-4 group-hover:underline">Ler notícia</span>
</span> <span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
<span </div>
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>
</div> </div>
<p class="mt-3 text-xl font-extrabold tracking-tight text-white drop-shadow-sm sm:text-2xl"> {/if}
{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>
</div> </div>
</a> </a>
{/each} {/each}

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

@@ -17,12 +17,12 @@
<a <a
href={`/${program.id}`} 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}`} aria-label={`Acessar página do programa ${program.name}`}
> >
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<div <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 <img
src={program.brandImageSrc} src={program.brandImageSrc}

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

@@ -17,10 +17,10 @@
<a <a
href={`/${program.id}`} 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}`} 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 <img
src={program.brandImageSrc} src={program.brandImageSrc}
alt={`Logomarca ${program.name}`} 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"> <main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
<a <a
href="/" 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> <span aria-hidden="true">←</span>
Voltar para a página inicial Voltar para a página inicial
</a> </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 <div
class={`bg-linear-to-b ${accentBgByAccent[program.accent]} to-transparent px-6 py-10 sm:px-10`} 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="min-w-0">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div <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 <img
src={program.brandImageSrc} src={program.brandImageSrc}
@@ -69,7 +69,7 @@
</p> </p>
<div class="mt-6 grid gap-3 sm:grid-cols-2"> <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)"> <p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Inscrições 2026 Inscrições 2026
</p> </p>
@@ -79,21 +79,21 @@
<p class="mt-2 text-xs text-(--text-muted)">Exclusivamente online.</p> <p class="mt-2 text-xs text-(--text-muted)">Exclusivamente online.</p>
</div> </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="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Quem pode</p>
<p class="mt-2 text-sm text-(--text)">{program.eligibility}</p> <p class="mt-2 text-sm text-(--text)">{program.eligibility}</p>
</div> </div>
</div> </div>
<div class="mt-3 grid gap-3 sm:grid-cols-2"> <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)"> <p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Como funciona Como funciona
</p> </p>
<p class="mt-2 text-sm leading-relaxed text-(--text)">{program.signupProcess}</p> <p class="mt-2 text-sm leading-relaxed text-(--text)">{program.signupProcess}</p>
</div> </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)"> <p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Benefícios Benefícios
</p> </p>
@@ -114,7 +114,7 @@
href={program.signupUrl} href={program.signupUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" 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 Inscrição
<span aria-hidden="true">↗</span> <span aria-hidden="true">↗</span>
@@ -124,7 +124,7 @@
href={program.editalUrl} href={program.editalUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" 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 Edital
<span aria-hidden="true">↗</span> <span aria-hidden="true">↗</span>

9
src/lib/data/news.ts
View File

@@ -5,6 +5,7 @@ export type News = {
date: string; date: string;
category: string; category: string;
featured?: boolean; featured?: boolean;
imageSrc?: string;
body?: string[]; body?: string[];
}; };
@@ -16,9 +17,9 @@ export const news: News[] = [
date: '2026-01-02', date: '2026-01-02',
category: 'Programas', category: 'Programas',
featured: true, featured: true,
imageSrc: '/brand/imageminscricoesabertas.png',
body: [ body: [
'As inscrições para os programas Bolsa Atleta, Bolsa Técnico e Time Pernambuco 2026 estão abertas.', 'As inscrições para os programas Bolsa Atleta, Bolsa Técnico e Time Pernambuco 2026 estão abertas.',
'Este conteúdo é um placeholder — você poderá substituir por dados vindos de banco/CMS futuramente.'
] ]
}, },
{ {
@@ -27,10 +28,8 @@ export const news: News[] = [
dek: 'Mais de 1,2 mil atletas e técnicos contemplados, com investimento aproximado de R$ 13 milhões.', dek: 'Mais de 1,2 mil atletas e técnicos contemplados, com investimento aproximado de R$ 13 milhões.',
date: '2025-12-18', date: '2025-12-18',
category: 'Resultados', category: 'Resultados',
featured: true,
body: [ body: [
'Em 2025, os programas de incentivo ao esporte alcançaram um número recorde de beneficiados.', 'Em 2025, os programas de incentivo ao esporte alcançaram um número recorde de beneficiados.',
'Este conteúdo é um placeholder — você poderá substituir por dados vindos de banco/CMS futuramente.'
] ]
}, },
{ {
@@ -41,7 +40,6 @@ export const news: News[] = [
category: 'Comunicados', category: 'Comunicados',
body: [ body: [
'Após preencher o formulário eletrônico, é necessário anexar a documentação exigida na plataforma.', 'Após preencher o formulário eletrônico, é necessário anexar a documentação exigida na plataforma.',
'Este conteúdo é um placeholder — você poderá substituir por dados vindos de banco/CMS futuramente.'
] ]
}, },
{ {
@@ -52,12 +50,11 @@ export const news: News[] = [
category: 'Serviço', category: 'Serviço',
body: [ body: [
'Veja perguntas e respostas sobre inscrição, documentos, prazos e acompanhamento.', 'Veja perguntas e respostas sobre inscrição, documentos, prazos e acompanhamento.',
'Este conteúdo é um placeholder — você poderá substituir por dados vindos de banco/CMS futuramente.'
] ]
} }
]; ];
export const featuredNews = news.filter((item) => item.featured); export const featuredNews = news.filter((item) => item.featured).slice(0, 1);
export function getNews(slug: string): News { export function getNews(slug: string): News {
const item = news.find((n) => n.slug === slug); const item = news.find((n) => n.slug === slug);

12
src/routes/+error.svelte
View File

@@ -32,7 +32,7 @@
<div class="min-h-dvh bg-(--page-bg)"> <div class="min-h-dvh bg-(--page-bg)">
<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14"> <main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
<section class="overflow-hidden rounded-3xl bg-white/80 shadow-sm ring-1 ring-black/5"> <section class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
<div class="px-6 py-10 sm:px-10 sm:py-12"> <div class="px-6 py-10 sm:px-10 sm:py-12">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)"> <p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
Erro {page.status} Erro {page.status}
@@ -45,7 +45,7 @@
</p> </p>
{#if safeDetails} {#if safeDetails}
<div class="mt-5 rounded-2xl bg-white/70 p-4 ring-1 ring-black/5"> <div class="mt-5 rounded-lg bg-white/70 p-4 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Detalhes</p> <p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Detalhes</p>
<p class="mt-2 text-sm text-(--text)">{safeDetails}</p> <p class="mt-2 text-sm text-(--text)">{safeDetails}</p>
</div> </div>
@@ -54,7 +54,7 @@
<div class="mt-8 flex flex-wrap items-center gap-3"> <div class="mt-8 flex flex-wrap items-center gap-3">
<a <a
href="/" href="/"
class="inline-flex items-center justify-center rounded-xl bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white" class="inline-flex items-center justify-center rounded-md bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
> >
Ir para a página inicial Ir para a página inicial
</a> </a>
@@ -62,7 +62,7 @@
<button <button
type="button" type="button"
onclick={goBack} onclick={goBack}
class="inline-flex items-center justify-center 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 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"
> >
Voltar Voltar
</button> </button>
@@ -71,14 +71,14 @@
<button <button
type="button" type="button"
onclick={reload} onclick={reload}
class="inline-flex items-center justify-center 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 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"
> >
Tentar novamente Tentar novamente
</button> </button>
{/if} {/if}
</div> </div>
<div class="mt-8 rounded-2xl bg-white/70 p-5 ring-1 ring-black/5"> <div class="mt-8 rounded-lg bg-white/70 p-5 ring-1 ring-black/5">
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Dica</p> <p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Dica</p>
<p class="mt-2 text-sm text-(--text)"> <p class="mt-2 text-sm text-(--text)">
Se você chegou aqui por um link antigo, volte para a página inicial e escolha o programa no card Se você chegou aqui por um link antigo, volte para a página inicial e escolha o programa no card

12
src/routes/+page.svelte
View File

@@ -36,7 +36,7 @@
<div class="hidden items-center gap-3 sm:flex"> <div class="hidden items-center gap-3 sm:flex">
<span <span
class="rounded-full bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5" class="rounded-lg bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
> >
SESP-PE SESP-PE
</span> </span>
@@ -49,7 +49,7 @@
<section class="space-y-8"> <section class="space-y-8">
<NewsCarousel items={featuredNews} title="Notícias em destaque" /> <NewsCarousel items={featuredNews} title="Notícias em destaque" />
<section class="rounded-3xl bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8"> <section class="rounded-lg bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8">
<div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between"> <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
<div> <div>
<h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">Notícias</h2> <h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">Notícias</h2>
@@ -64,17 +64,17 @@
{#each news as item (item.slug)} {#each news as item (item.slug)}
<a <a
href={`/noticias/${item.slug}`} href={`/noticias/${item.slug}`}
class="group block rounded-2xl bg-white/80 p-5 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 block rounded-lg bg-white/80 p-5 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={`Abrir notícia: ${item.title}`} aria-label={`Abrir notícia: ${item.title}`}
> >
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
<span <span
class="rounded-full bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5" class="rounded-lg bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
> >
{item.category} {item.category}
</span> </span>
<span <span
class="rounded-full bg-white/80 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5" class="rounded-lg bg-white/80 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
> >
{new Date(item.date).toLocaleDateString('pt-BR')} {new Date(item.date).toLocaleDateString('pt-BR')}
</span> </span>
@@ -96,7 +96,7 @@
</section> </section>
<aside class="space-y-6"> <aside class="space-y-6">
<section class="rounded-3xl bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8"> <section class="rounded-lg bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8">
<h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">Programas</h2> <h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">Programas</h2>
<p class="mt-1 text-sm text-(--text)"> <p class="mt-1 text-sm text-(--text)">
Acesso rápido aos links oficiais de inscrição e edital. Acesso rápido aos links oficiais de inscrição e edital.

8
src/routes/layout.css
View File

@@ -11,14 +11,14 @@
--text-muted: #60708a; --text-muted: #60708a;
/* Brand accents (inspirado nas logomarcas anexadas) */ /* Brand accents (inspirado nas logomarcas anexadas) */
--accent-blue: #1f4a86; --accent-blue: #2f6fd4;
--accent-yellow: #f4d01d; --accent-yellow: #f4d01d;
--accent-green: #2bb34a; --accent-green: #2bb34a;
--accent-red: #e0382f; --accent-red: #e0382f;
/* UI */ /* UI */
--link: #1f4a86; --link: #2f6fd4;
--focus-ring: #1f4a86; --focus-ring: #2f6fd4;
} }
html, html,
@@ -44,7 +44,7 @@ a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
border-radius: 9999px; border-radius: 0.5rem;
padding: 0.375rem 0.625rem; padding: 0.375rem 0.625rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;

10
src/routes/noticias/[slug]/+page.svelte
View File

@@ -16,28 +16,28 @@
<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14"> <main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
<a <a
href="/" 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> <span aria-hidden="true">←</span>
Voltar para a página inicial Voltar para a página inicial
</a> </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="relative"> <div class="relative">
<div <div
aria-hidden="true" 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-72" class="h-56 w-full bg-linear-to-br from-(--accent-blue)/15 via-white/40 to-(--accent-yellow)/20 sm:h-72"
></div> ></div>
<div class="absolute inset-0 bg-linear-to-t from-black/30 via-black/0 to-black/0"></div> <div class="absolute inset-0 bg-linear-to-t from-black/30 via-black/0 to-black/0"></div>
<div class="absolute bottom-0 left-0 right-0 px-6 py-6 sm:px-10 sm:py-10"> <div class="absolute bottom-0 left-0 right-0 px-6 py-6 sm:px-10 sm:py-10">
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
<span <span
class="rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10" class="rounded-lg bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
> >
{data.item.category} {data.item.category}
</span> </span>
<span <span
class="rounded-full bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10" class="rounded-lg bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
> >
{new Date(data.item.date).toLocaleDateString('pt-BR')} {new Date(data.item.date).toLocaleDateString('pt-BR')}
</span> </span>

BIN
static/brand/imageminscricoesabertas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 MiB