Skip to content

Fix/accesibilidad comunidad #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
flkt-crnpio wants to merge 4 commits into
base: main
Choose a base branch
from
+20 −16
Open

Fix/accesibilidad comunidad #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab0e6a7
agregando estilos de estado a la etiqueta de enlace. agregando icono …
flkt-crnpio Jul 9, 2026
bc3674c
agregando icono de enlace externo
flkt-crnpio Jul 9, 2026
c98fcd7
agregando opcional propiedad para mostrar icono de enlace externo
flkt-crnpio Jul 9, 2026
a7f317f
cambiando titulo para respetar el orden jerarquico de los encabezados
flkt-crnpio Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/components/Cards/CommunityCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<script>
import ExternalLinkIcon from "@/components/Icon/ExternalLink.svelte";
let { text, route } = $props();
</script>

<div class="p-5 w-full md:w-1/3">
<a href="{route}" target="_blank">
<div class="border border-cmxyellow p-5 h-[150px] flex justify-between flex-col hover:bg-zinc-100 transition-colors duration-200">
<h3 class="text-lg font-bold">{text}</h3>
<img src="/flecha-amarilla.png" class="inline h-[20px] w-[20px]
self-end" alt="flecha amarilla">
</div>
<a href="{route}" target="_blank" class="border border-cmxyellow p-5 h-[150px] flex justify-between flex-col hover:bg-zinc-100 transition-colors duration-200 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-cmxyellow focus:bg-zinc-100">
<h3 class="text-lg font-bold">{text}</h3>
<span class="inline h-[20px] w-[20px] self-end text-cmxyellow">
<ExternalLinkIcon />
</span>
</a>
</div>
12 changes: 5 additions & 7 deletions src/components/Cards/GetInvolvedCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import Button from "../Button.svelte";
import LinkLikeButton from "../LinkLikeButton.svelte";
let {
image,
image_alt,
Expand All @@ -10,10 +10,8 @@
} = $props();
</script>

<div class="flex flex-col justify-start gap-8 p-6">
<img src={image} alt={image_alt} class="w-[250px]">
<p class="text-xl font-light">{text}</p>
<a href={url}>
<Button action_label={label} color={color} />
</a>
<div class="p-6">
<img src={image} alt={image_alt} class="w-[250px] my-8">
<p class="text-xl font-light my-8">{text}</p>
<LinkLikeButton go_to={url} action_label={label} color={color} external={true}/>
</div>
10 changes: 8 additions & 2 deletions src/components/LinkLikeButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<script>
import ExternalLinkIcon from "@/components/Icon/ExternalLink.svelte";
import { fontColorContrast } from '$lib/fontColorContrast.js';

/** @type {{ go_to: string, action_label: string, color?: string }} */
let { go_to = '', action_label, color = "#00D690" } = $props();
/** @type {{ go_to: string, action_label: string, color?: string, external?: boolean }} */
let { go_to = '', action_label, color = "#00D690", external = false } = $props();

const labelColor = $derived(fontColorContrast(color));

Expand Down Expand Up @@ -75,4 +76,9 @@
}}
>
{action_label}
{#if external}
<span class="inline self-center ml-2">
<ExternalLinkIcon />
</span>
{/if}
</a>
2 changes: 1 addition & 1 deletion src/routes/comunidad/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

<section class="container mx-auto">
<div class="mx-auto md:w-1/2 p-3 my-8">
<h1 class="text-5xl font-bold my-10 text-center">Comienza a participar</h1>
<h2 class="text-5xl font-bold my-10 text-center">Comienza a participar</h2>
<p class="text-center md:text-left text-lg">¿Quieres participar pero no sabes por dónde comenzar? Este es un espacio abierto y tenemos un lugar para todas las personas. Empieza por aquí:</p>
</div>
<div class="my-10 flex flex-column md:flex-row flex-wrap">
Expand Down