Skip to content

Commit caa771d

Browse files
basicavisualbasicavisual
authored
Merge pull request #55 from CodeandoMexico/feat/ajustes-launch
Feat/ajustes launch
2 parents 701d9aa + 4701a4e commit caa771d

File tree

13 files changed

+80
-49
lines changed

13 files changed

+80
-49
lines changed

‎src/components/Badge.svelte‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
<script>
22
import { onMount } from 'svelte';
33
export let text = 'Badge';
4-
export let color = '#0073F4';
4+
export let color = getRandomHexColor();
5+
function getRandomHexColor() {
6+
const letters = '0123456789ABCDEF';
7+
let color = '#';
8+
for (let i = 0; i < 6; i++) {
9+
color += letters[Math.floor(Math.random() * 16)];
10+
}
11+
return color;
12+
}
13+
let contrastedColor = '';
514
6-
7-
let contrastedColor = '';
8-
9-
onMount(async () => {
10-
const fontColorContrast = (await import('font-color-contrast')).default;
11-
contrastedColor = fontColorContrast(color);
12-
});
15+
onMount(async () => {
16+
const fontColorContrast = (await import('font-color-contrast')).default;
17+
contrastedColor = fontColorContrast(color);
18+
});
1319
</script>
1420

1521

‎src/components/Button.svelte‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,31 @@
33
export let action_label;
44
export let color = "#00D690";
55
let contrastedColor = '';
6-
7-
onMount(async () => {
8-
const fontColorContrast = (await import('font-color-contrast')).default;
9-
contrastedColor = fontColorContrast(color);
10-
});
6+
function darkenColor(hex, percent) {
7+
const num = parseInt(hex.slice(1), 16),
8+
amt = Math.round(2.55 * percent),
9+
R = (num >> 16) - amt,
10+
G = (num >> 8 & 0x00FF) - amt,
11+
B = (num & 0x0000FF) - amt;
12+
return `#${(
13+
0x1000000 +
14+
(R < 255 ? (R < 0 ? 0 : R) : 255) * 0x10000 +
15+
(G < 255 ? (G < 0 ? 0 : G) : 255) * 0x100 +
16+
(B < 255 ? (B < 0 ? 0 : B) : 255)
17+
)
18+
.toString(16)
19+
.slice(1)}`;
20+
}
21+
let darkerColor = darkenColor(color, 7);
22+
onMount(async () => {
23+
const fontColorContrast = (await import('font-color-contrast')).default;
24+
contrastedColor = fontColorContrast(color);
25+
});
1126
</script>
1227

13-
<button class="Button min-w-[137px] h-12 px-6 py-2 rounded-3xl justify-center items-center inline-flex" style={
28+
<button class="Button min-w-[137px] h-12 px-6 py-2 rounded-3xl justify-center items-center inline-flex hover:bg-white/75 transition ease-in duration-150" style={
1429
`background-color: ${color};
15-
color: ${contrastedColor}`
16-
}>
30+
color: ${contrastedColor}; `
31+
} onMouseOver="this.style.backgroundColor='{darkerColor}'" onMouseOut="this.style.backgroundColor='{color}'">
1732
<span class="Button text-base font-['Albert Sans'] uppercase leading-normal font-bold"> {action_label}</span>
1833
</button>

‎src/components/Cards/CommunityCard.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</script>
55

66
<div class="p-5 w-full md:w-1/3">
7-
<a href="{route}">
7+
<a href="{route}" target="_blank">
88
<div class="border border-cmxyellow p-5 h-[150px] flex justify-between flex-col hover:bg-zinc-100 transition-colors duration-200">
99
<h3 class="text-lg font-bold">{text}</h3>
1010
<img src="/flecha-amarilla.png" class="inline h-[20px] w-[20px]

‎src/components/Cards/ContentCard.svelte‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88

99
<div class="Card w-full min-h-[519px] bg-zinc-100 flex-col justify-start items-start inline-flex">
10-
<img class="Image4 self-stretch h-[250px]" src={image} />
11-
<div class="Frame5 self-stretch min-h-[269px] h-full p-8 flex-col justify-end items-start gap-4 flex">
10+
<img class="Image4 self-stretch h-[238px] object-cover" src={image} />
11+
<div class="Frame5 self-stretch min-h-[281px] p-8 flex-col justify-between items-start gap-4 flex">
1212
<div class="Heading self-stretch min-h-[41px] flex-col justify-end items-start gap-8 flex">
1313
<div class="Heading self-stretch text-black text-[31.25px] font-bold font-['Albert Sans'] leading-10">
1414
{title}
@@ -19,11 +19,10 @@
1919
{description}
2020
</div>
2121
</div>
22-
<div class="Button justify-start items-center gap-2 inline-flex">
23-
<!-- <div class="ConoceMS text-black text-base font-bold font-['Albert Sans'] uppercase leading-normal">
22+
<div class="Button justify-start items-center gap-2 inline-flex ">
23+
<a href="{link}" target="_blank" rel="noopener noreferrer" class="ConoceMS text-black text-base font-bold font-['Albert Sans'] uppercase leading-normal hover:underline">
2424
Conoce más
25-
</div> -->
26-
<div class="ExternalLink w-6 h-6 relative"></div>
25+
<img class="ExternalLink w-5 h-5 inline align-sub ml-1" src="/Vector.svg" alt="flecha"></a>
2726
</div>
2827
</div>
2928
</div>

‎src/components/Cards/ProjectCard.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="Card w-full min-h-[519px] flex-col justify-start items-start inline-flex">
1414
<img class="Image4 object-cover h-[200px] w-full" src={image} />
1515
<div class="Frame5 self-stretch min-h-[269px] h-full flex-col justify-start pt-3 items-start gap-4 flex">
16-
<div class="Heading self-stretch min-h-[41px] flex-col justify-end items-start gap-8 flex">
16+
<div class="Heading self-stretch min-h-[84px] flex-col justify-start items-start gap-8 flex">
1717
<div class="Heading self-stretch text-black text-[31.25px] font-bold font-['Albert Sans'] leading-10">
1818
{title}
1919
</div>
@@ -23,18 +23,18 @@
2323
{description}
2424
</div>
2525
</div>
26-
<div class="Button justify-start items-center gap-2 inline-flex">
26+
<!-- <div class="Button justify-start items-center gap-2 inline-flex">
2727
<div class="ConoceMS text-black text-base font-bold font-['Albert Sans'] leading-normal">
2828
{website}
2929
</div>
30-
</div>
30+
</div> -->
3131
<div>
3232
<p>{maker}</p>
3333
</div>
3434
<div class="flex flex-wrap gap-2">
3535

3636
{#each tags as tag}
37-
<Badge text={tag} color="#6596FF"/>
37+
<Badge text={tag}/>
3838
{/each}
3939
</div>
4040
<div class="flex gap-3 my-2">

‎src/components/Footer.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="Footer flex w-full h-full container justify-between gap-5 items-center flex-col md:flex-row">
33
<img class="Image1 mix-blend-screen" src="/logo-blanco.png" alt="Logo de Codeando"/>
44
<div class="Frame30 flex-col justify-start items-center gap-4 inline-flex">
5-
<div class="HechoConPorLaComunidad text-neutral-50 text-sm font-normal font-['Albert Sans'] leading-[21px]">Hecho con ❤️ por <s>Hans y @basicavisual</s> la comunidad</div>
5+
<div class="HechoConPorLaComunidad text-neutral-50 text-sm font-normal font-['Albert Sans'] leading-[21px]">Hecho con ❤️ por la comunidad</div>
66
</div>
77
<div class="Frame7 flex-col justify-center items-start gap-2 inline-flex">
88
<div class="Frame31 self-stretch justify-center items-center gap-4 inline-flex">

‎src/components/Hero.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<div class="flex-col-reverse md:flex-row flex items-center gap-10 columns-2">
2020
<div class="md:w-1/2 md:p-5">
2121
<h1 class="text-6xl font-bold text-white leading-tight">{title}</h1>
22-
<p class="md:py-6 text-2xl leading-loose"
22+
<p class="md:py-6 text-2xl leading-normal"
2323
style={`color: ${contrastedColor}`}
2424
>
2525
{subtitle}

‎src/components/IconTextAction.svelte‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,18 @@
1111
<div class="space-y-5">
1212
<img src={icon} alt="Icon" class="" />
1313

14-
<h2 class="text-2xl font-bold">{title}</h2>
14+
<h2 class="text-3xl font-bold">{title}</h2>
1515
{#if description }
16-
<p class="max-w-[550px]">
16+
<p class="max-w-[550px] min-h-[90px] text-xl">
1717
{description}
1818
</p>
1919
{/if }
2020
{#if action }
21-
<Button action={action} action_label={action_label} />
21+
<div class="my-3">
22+
23+
<a href={action}>
24+
<Button action_label={action_label} />
25+
</a>
26+
</div>
2227
{/if }
2328
</div>

‎src/components/TitleDescription.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="">
77
<h1 class="text-5xl font-bold">{title}</h1>
88
{#if description }
9-
<p class="py-6">
9+
<p class="py-6 text-2xl">
1010
{description}
1111
</p>
1212
{/if }

‎src/routes/+page.svelte‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import SubscribeBox from '@/components/SubscribeBox.svelte';
99
import ArticleCard from '@/components/Cards/ArticleCard.svelte';
1010
import Button from '@/components/Button.svelte';
11+
import ContentCard from '@/components/Cards/ContentCard.svelte';
1112
export let data
1213
const { home, posts, projects } = data
1314
</script>
@@ -20,39 +21,38 @@
2021
<div id="quienes-somos" class="container px-5 mx-auto my-8">
2122
<div class="flex-col md:flex-row flex my-10 gap-20 items-center">
2223
<ShadowImage />
23-
<TitleDescription title="Trabajamos de manera abierta y colaborativa" description="con gobiernos, activistas, periodistas, diseñadoras, desarrolladoras y más. Nos enfocamos en la parte tecnológica que acompaña al impacto cívico y social." />
24+
<div class="w-5/6 p-6">
25+
26+
<TitleDescription title={home.about_title} description={home.about_subtitle} />
27+
</div>
2428
</div>
2529
</div>
2630

2731
<section id="con-quien-trabajamos" class="bg-[#E6F8EE] py-8 w-full mx-auto my-8">
2832
<div class="container m-auto">
2933
<div class="flex flex-col md:flex-row my-10 gap-20 p-10 justify-center">
30-
<IconTextAction icon="/who_1.png" title="Organizaciones" description="Construimos herramientas digitales, abrimos conocimiento y acompañamos a equipos técnicos y no técnicos." action="/organizaciones" action_label="Hablemos"/>
34+
<IconTextAction icon="/who_1.png" title="Organizaciones" description="Construimos herramientas digitales, abrimos conocimiento y acompañamos a equipos técnicos y no técnicos." action="/proyectos" action_label="Colaboremos"/>
3135
<IconTextAction icon="/who_2.png" title="Personas" description="Colaboramos con personas de todos los perfiles, cualquiera que comparta nuestros principios, valores y código de conducta puede ser parte de esta comunidad." action="/comunidad" action_label="Súmate"/>
3236
</div>
3337
</div>
3438
</section>
3539

36-
<section id="en-que-estamos-trabajando" class="p-8 mx-auto my-8">
37-
<div class="text-center">
40+
<section id="en-que-estamos-trabajando" class="p-8 mx-auto my-8 container">
41+
<div class="text-center my-6 w-2/3 mx-auto">
3842
<TitleDescription title="En qué estamos trabajando" description="Todos nuestros proyectos son open source, esto significa que cualquiera es libre de utilizar el código, datos y otros materiales de acuerdo a la licencia que contenga." />
3943
</div>
4044

4145
<div id="nuestros-proyectos" class="md:grid grid-cols-3 container m-auto gap-5">
4246
{#each projects as project}
43-
<ProjectCard
47+
<ContentCard
4448
title={project.title}
4549
description={project.short_description}
46-
tags={project.tags || []}
4750
image={`https://content.codeandomexico.org/assets/${project.image}`}
48-
website={project.website}
49-
maker={project.maker}
50-
repository={project.repository}
51-
/>
51+
link={project.website} />
5252
{/each}
5353

5454
</div>
55-
<div class="text-center my-8">
55+
<div class="text-center my-8 max-w-1/2">
5656
<a href="/proyectos" >
5757
<Button action_label="Ver todos los proyectos" />
5858
</a>
@@ -66,7 +66,7 @@
6666

6767
<section id="blog" class="p-8 mx-auto my-8 container">
6868
<div class="text-center my-12">
69-
<TitleDescription title="Blog" />
69+
<TitleDescription title="Hablemos de tecnología cívica" />
7070
</div>
7171
<div class="md:grid grid-cols-3 gap-5 mb-5">
7272
{#each posts as post}

0 commit comments

Comments
 (0)