Skip to content

Commit c622638

Browse files
Phosphorus-MPhosphorus-M
committed
feat: update styles and add resources section
- Updated the breakpoint for desktop in input.css. - Added a secondary background style for light theme in input.css. - Updated @rustlanges/styles dependency to version 0.0.2 in package.json and package-lock.json. - Refactored CommunityProjectSection to improve layout and responsiveness in community_project.rs. - Added resources module to mod.rs and created resources component in resources.rs. - Enhanced the Aprende page to include a resources section and improved layout in aprende.rs. - Updated the Index page layout and button styles for better user experience in index.rs.
1 parent d6e91de commit c622638

File tree

12 files changed

+169
-45
lines changed

12 files changed

+169
-45
lines changed

‎Cargo.lock‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/new/background/hero-secondary-bg.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎assets/new/logos/logo-minified.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎input.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88

99
@import "@rustlanges/styles";
1010

11+
@theme static {
12+
/* ----- Breakpoints ----- */
13+
--breakpoint-desktop: 640px;
14+
}
15+
1116
.text-akira {
1217
font-family: "Akira", sans-serif;
1318
}
@@ -22,10 +27,17 @@
2227
background-size: cover;
2328
}
2429

30+
.rustlang-es-background-secondary {
31+
background: linear-gradient(0deg, rgba(62, 28, 150, 0.80) 0%, rgba(62, 28, 150, 0.80) 100%), url("/assets/new/background/hero-secondary-bg.svg") lightgray 50% / cover no-repeat;
32+
}
33+
2534
&:where([data-theme=light]) {
2635
.rustlang-es-background {
2736
background: url("/assets/new/background/hero-bg.svg") lightgray 50% / cover no-repeat;
2837
}
38+
.rustlang-es-background-secondary {
39+
background: url("/assets/new/background/hero-secondary-bg.svg") lightgray 50% / cover no-repeat;
40+
}
2941
.bg-ferris-left {
3042
background-image: url("/assets/new/background/ferris-light-left.svg");
3143
background-size: cover;
@@ -76,3 +88,11 @@
7688
*/
7789

7890
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *), &:where(&:not([data-theme='light'], @media (prefers-color-scheme: dark))));
91+
92+
93+
94+
.resource-card {
95+
/* clip-path: polygon(66% 0, 100% 32%, 100% 100%, 0 100%, 0 0), inset(0 0 0 0 round 0% 20% 0 0%); */
96+
aspect-ratio: 0.75;
97+
clip-path: shape(from 86.92% 2.32%,curve to 80.37% 0% with 85.31% 0.85%/82.91% 0%,hline to 8.48%,curve to 0% 6.36% with 3.8% 0%/0% 2.85%,vline to 93.64%,curve to 8.48% 100% with 0% 97.15%/3.8% 100%,hline to 91.52%,curve to 100% 93.64% with 96.2% 100%/100% 97.15%,vline to 16.52%,curve to 98.07% 12.47% with 100% 15.04%/99.32% 13.61%,line to 86.92% 2.32%,close);
98+
}

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
},
1515
"homepage": "https://github.com/RustLangES/RustLangES.github.io",
1616
"dependencies": {
17-
"@rustlanges/styles": "^0.0.1"
17+
"@rustlanges/styles": "^0.0.2"
1818
},
1919
"devDependencies": {
2020
"tailwindcss": "^4.1.14"

‎src/components/community_project.rs‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ pub fn CommunityProjectSection() -> impl IntoView {
2121

2222
view! {
2323
<section class="flex flex-col justify-center items-center w-full gap-8 py-20 bg-orange-100 dark:bg-neutral-950 bg-ferris-left">
24-
<div class="container flex flex-col justify-center items-center gap-8">
24+
<div class="flex flex-col justify-center items-center gap-8 w-full">
2525
<h2 class="text-h2 mb-4">"Proyectos de la comunidad"</h2>
2626
<div class="mb-8">
2727
<p class="text-center max-w-lg">
@@ -34,31 +34,33 @@ pub fn CommunityProjectSection() -> impl IntoView {
3434
</div>
3535

3636
// <div>
37-
<div class="flex flex-row justify-center items-center gap-4 max-w-full flex-wrap">
38-
<ProjectCard
39-
label=view! {
40-
<StarBold size=16 as u32 />
41-
<p class="w-fit mr-2">Destacado</p>
42-
}
43-
.into_any()
44-
users=users.clone()
45-
title="Rust para C#/.NET Developers"
46-
description="La guía esta hecha por la misma Microsoft y es para desarrolladores experimentados en C#/.NET que exploran Rust. Ofrece una breve comparación, enlaces a recursos y respuestas rápidas."
47-
/>
48-
<ProjectCard
49-
label=view! { <p class="w-fit mr-2">Oficial</p> }.into_any()
50-
users=users.clone()
51-
title="Cangrebot"
52-
description="Bot de la comunidad de Discord de RustLang en Español."
53-
badge_color="before:bg-secondary-400"
54-
/>
55-
<ProjectCard
56-
label=view! { <p class="w-fit mr-2">$200</p> }.into_any()
57-
users=users
58-
title="Memsos"
59-
description="Memsos is a tool written in rust with the objective to check your memory in a fast way, memsos works for both uefi and bios."
60-
badge_color="before:bg-primary-200"
61-
/>
37+
<div class="flex flex-row justify-center items-center gap-4 max-w-full w-full">
38+
<div class="inline-flex flex-row items-center gap-8 overflow-x-auto p-4">
39+
<ProjectCard
40+
label=view! {
41+
<StarBold size=16 />
42+
<p class="w-fit mr-2">Destacado</p>
43+
}
44+
.into_any()
45+
users=users.clone()
46+
title="Rust para C#/.NET Developers"
47+
description="La guía esta hecha por la misma Microsoft y es para desarrolladores experimentados en C#/.NET que exploran Rust. Ofrece una breve comparación, enlaces a recursos y respuestas rápidas."
48+
/>
49+
<ProjectCard
50+
label=view! { <p class="w-fit mr-2">Oficial</p> }.into_any()
51+
users=users.clone()
52+
title="Cangrebot"
53+
description="Bot de la comunidad de Discord de RustLang en Español."
54+
badge_color="before:bg-secondary-400"
55+
/>
56+
<ProjectCard
57+
label=view! { <p class="w-fit mr-2">$200</p> }.into_any()
58+
users=users
59+
title="Memsos"
60+
description="Memsos is a tool written in rust with the objective to check your memory in a fast way, memsos works for both uefi and bios."
61+
badge_color="before:bg-primary-200"
62+
/>
63+
</div>
6264
</div>
6365

6466
<Button

‎src/components/mod.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,5 @@ pub mod footer;
1515
pub mod our_community;
1616
pub mod our_sponsors;
1717
pub mod project_card;
18+
pub mod resources;
1819
pub mod sponsor_block;

‎src/components/project_card.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ pub fn ProjectCard(
2222
let badge_classes = format!("flex w-fit project-card-badge ml-6 px-5 pb-1 pt-2 items-center justify-center gap-2 text-black border-2 border-b-0 border-black before:bg-orange-400 {badge_color}");
2323

2424
view! {
25-
<div>
25+
<div class="min-w-[15rem] max-w-xs">
2626
<div class=badge_classes>{label}</div>
2727
<Card class="relative max-w-xs lg:max-w-md min-h-96 flex flex-col justify-between ">
2828
<div id="card-body-1">
@@ -39,7 +39,7 @@ pub fn ProjectCard(
3939

4040
<div class="rounded-full border border-white p-1">
4141
// <Button>
42-
<Github size=40 as u32 />
42+
<Github size=40 />
4343
</div>
4444
</div>
4545
</Card>

‎src/components/resources.rs‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
use leptos::{component, prelude::*};
2+
use rustlanges_components::{
3+
card::Card,
4+
input::{Filter, InputSearch},
5+
};
6+
7+
type ResourceAlias = Vec<Filter>;
8+
9+
#[component]
10+
pub fn Resources() -> impl IntoView {
11+
let (resources, set_resources) = signal(vec![Filter {
12+
label: "Libros".to_string(),
13+
value: "books".to_string(),
14+
}]);
15+
16+
view! {
17+
<section class="bg-light dark:bg-dark flex justify-center w-full">
18+
<div class="container">
19+
<h2 class="text-h2 text-center mb-8 mt-16">"Recursos"</h2>
20+
<InputSearch on_change_filter=move |resource: ResourceAlias| () />
21+
<div class="flex flex-row flex-nowrap gap-4 overflow-x-auto pb-8 pt-4 grid grid-cols-3">
22+
<Card class="resource-card min-w-20 min-h-20 p-4">
23+
<p>"Recurso 1"</p>
24+
</Card>
25+
<Card class="resource-card min-w-20 min-h-20 p-4">
26+
<p>"Recurso 1"</p>
27+
</Card>
28+
<Card class="resource-card min-w-20 min-h-20 p-4">
29+
<p>"Recurso 1"</p>
30+
</Card>
31+
<Card class="resource-card min-w-20 min-h-20 p-4">
32+
<p>"Recurso 1"</p>
33+
</Card>
34+
</div>
35+
</div>
36+
</section>
37+
}
38+
}

0 commit comments

Comments
 (0)