Skip to content

Commit c8a0e7c

Browse files
Phosphorus-MPhosphorus-M
committed
feat: initial dark mode
1 parent 44429e6 commit c8a0e7c

29 files changed

+110
-97
lines changed

‎Cargo.lock

+10-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Cargo.toml

+11-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ leptos_actix = { version = "0.6.9", features = [
1515
"experimental-islands",
1616
], optional = true }
1717
leptos_router = { version = "0.6.9", features = ["nightly"] }
18-
wasm-bindgen = "=0.2.91"
18+
wasm-bindgen = "=0.2.92"
1919
rand = "0.8.5"
2020
serde = { version = "1", features = ["derive"] }
2121
futures = "0.3.30"
@@ -83,6 +83,16 @@ env = "DEV"
8383
#
8484
# Optional. Can be over-ridden with the command line parameter --bin-features
8585
bin-features = ["ssr"]
86+
# The tailwind input file.
87+
#
88+
# Optional, Activates the tailwind build
89+
# tailwind-input-file = "input.css"
90+
91+
# The tailwind config file.
92+
#
93+
# Optional, defaults to "tailwind.config.js" which if is not present
94+
# is generated for you
95+
# tailwind-config-file = "tailwind.config.js"
8696

8797
# If the --no-default-features flag should be used when compiling the bin target
8898
#

‎Makefile.toml

+2-3
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ dependencies = ["get-sitemap", "prebuild"]
5454
install_crate = { crate_name = "cargo-leptos", binary = "cargo", test_arg = [
5555
"leptos",
5656
"--version",
57-
], version = "0.2.12" }
57+
], version = "0.2.16" }
5858
command = "cargo"
5959
args = ["leptos", "serve", "-r"]
6060

@@ -65,7 +65,6 @@ script.pre = "npx tailwind -i input.css -o style/output.css"
6565
install_crate = { crate_name = "cargo-leptos", binary = "cargo", test_arg = [
6666
"leptos",
6767
"--version",
68-
], version = "0.2.12" }
69-
dependencies = ["build-style"]
68+
], version = "0.2.16" }
7069
command = "cargo"
7170
args = ["leptos", "watch", "--features", "development", "--hot-reload"]

‎assets/kaku.png

4.83 MB
Loading

‎src/app.rs

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ pub fn App() -> impl IntoView {
5353
content="OntIe2SKuQalaapGvxdded9tU4G2p57h0A6e0Rkoni0"
5454
/>
5555

56-
<Body class="bg-orange-200 overflow-x-hidden"/>
56+
<Body class="bg-orange-200 dark:bg-[#131313]/90 bg-center bg-fixed dark:bg-kaku dark:bri dark:bg-cover dark:bg-blend-darken dark:backdrop-blur-xl overflow-x-hidden dark:text-[#e2cea9]"/>
5757
<Router>
5858
<Header/>
5959
<main>

‎src/components/aprende/books.rs

+6-6
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const OTHER_BOOKS: [BookData; 5] = [BookData {
2222
}, BookData { name: "Libro de Referencia de Rust", description: "Este libro es la guía definitiva para dominar Rust, explicando construcciones, memoria, concurrencia y más, con apéndices y referencias. Ideal para sumergirse en la programación con Rust.", english: true, complete: false, url: "https://doc.rust-lang.org/reference/introduction.html", url_name: "Ir a “El Libro de Referencia”" }, BookData { name: "Embedded Book", description: "Guía para usar Rust en sistemas integrados 'Bare Metal', ideal para programación integrada con seguridad y conceptos avanzados. Cubre configuración, prácticas y manuales, enfocado en ARM Cortex-M, sin asumir conocimientos previos.", english: true, complete: true, url: "https://docs.rust-embedded.org/book/intro/index.html", url_name: "Ir a “Embedded Book”" },
2323
BookData {
2424
name: "The Rustonomicon",
25-
description: "¡Descubre los oscuros secretos de Rust no seguro! Este libro te lleva a las profundidades de la programación no segura en Rust, con detalles espeluznantes y útiles sobre su uso. Perfecto para aquellos que desean explorar las entrañas del lenguaje o escribir código no seguro. ¡Prepárate para una inmersión intensa en el lado oscuro de Rust!",
25+
description: "Explora los aspectos oscuros de la programación no segura en Rust con este libro, que ofrece detalles espeluznantes y prácticos para aquellos interesados en adentrarse en el código no seguro. Una inmersión intensa en el lado oscuro de Rust.",
2626
english: true,
2727
complete: false,
2828
url: "https://doc.rust-lang.org/nomicon/intro.html",
@@ -41,8 +41,8 @@ BookData {
4141
pub fn Books() -> impl IntoView {
4242
let book = |book: BookData| {
4343
view! {
44-
<section class="w-full md:w-1/2 lg:w-1/3 h-full xs:px-8">
45-
<div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform">
44+
<section class="w-full md:w-1/2 lg:w-1/3 min-h-[28rem] px-8">
45+
<div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform min-h-[inherit]">
4646
{book
4747
.english
4848
.then_some(|| {
@@ -86,7 +86,7 @@ pub fn Books() -> impl IntoView {
8686
};
8787

8888
view! {
89-
<section class=" bg-orange-300/30 py-20">
89+
<section class=" bg-orange-300/30 dark:bg-transparent py-20">
9090
<div class="container mx-auto mb-5">
9191
<h1 class="font-alfa-slab text-3xl sm:text-4xl lg:text-5xl text-center mb-5">
9292
"¡Nuestros Libros!"
@@ -97,7 +97,7 @@ pub fn Books() -> impl IntoView {
9797
</div>
9898
<div class="flex flex-col md:flex-row justify-center items-center container mx-auto mb-16 md:mb-28 gap-4">
9999
<section class="w-full md:w-1/2 px-8">
100-
<div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform">
100+
<div class="relative group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] justify-between group transition-all transform">
101101
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-teal-500 dark:border-slate-900 badge-container">
102102
<span class="sr-only text-black badge-content transition-all transform ">
103103
"Recomendado"
@@ -118,7 +118,7 @@ pub fn Books() -> impl IntoView {
118118
</section>
119119

120120
<section class="w-full md:w-1/2 px-8 flex flex-col h-full">
121-
<div class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
121+
<div class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
122122
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-28 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-yellow-500 dark:border-slate-900 badge-container">
123123
<span class="sr-only text-black badge-content transition-all transform ">
124124
"¡En Progreso!"

‎src/components/aprende/header.rs

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ use leptos::{component, view, IntoView};
33
#[component]
44
pub fn HeaderAprende() -> impl IntoView {
55
view! {
6-
<header class="border-b border-b-black/20 bg-orange-100 py-20 flex ">
6+
<header class="border-b border-b-black/20 dark:border-b-transparent bg-orange-100 dark:bg-transparent py-20 flex ">
77
<div class="container mx-auto">
88
<h1 class="font-alfa-slab text-6xl sm:text-7xl lg:text-8xl text-center lg:text-left">
99
"Aprende Rust"

‎src/components/aprende/roadmap.rs

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ pub fn Roadmap() -> impl IntoView {
1111
};
1212

1313
view! {
14-
<section class="bg-orange-200 py-20 flex flex-col-reverse md:flex-row items-center justify-center container mx-auto gap-10">
14+
<section class="bg-orange-200 dark:bg-transparent py-20 flex flex-col-reverse md:flex-row items-center justify-center container mx-auto gap-10">
1515
<div class="container px-10 lg:mx-auto flex flex-wrap text-balance gap-5 lg:w-1/2">
1616
<h1 class="font-alfa-slab text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left">
1717
"Roadmap de aprendizaje del lenguaje"

‎src/components/aprende/youtube.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ use crate::components::ButtonLink;
55
#[component]
66
pub fn Youtube() -> impl IntoView {
77
view! {
8-
<section class="bg-orange-200 py-20 gap-10 w-full lg:px-5">
8+
<section class="bg-orange-200 dark:bg-transparent py-20 gap-10 w-full lg:px-5">
99
<div class="">
1010
<h1 class="font-alfa-slab text-2xl sm:text-3xl lg:text-4xl text-center text-balance mb-5">
1111
"Algunos canales de Youtube que recomendamos"
@@ -59,7 +59,7 @@ fn YoutubeCard(
5959
};
6060

6161
view! {
62-
<div class="list-container flex flex-col h-full gap-y-1 p-4 sm:p-6 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] border border-black justify-between mb-4">
62+
<div class="list-container flex flex-col h-full gap-y-1 p-4 sm:p-6 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] border border-black justify-between mb-4">
6363
<img
6464
src=format!("{}/{}.avif", assets_folder, username)
6565
alt=format!("Foto del canal {}", username)

‎src/components/button_link.rs

+13-3
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,36 @@ pub fn ButtonLink(
66
#[prop(into)] href: String,
77
#[prop(default = "primary")] color: &'static str,
88
#[prop(default = "normal")] size: &'static str,
9+
#[prop(default = "drop")] shadow: &'static str,
910
#[prop(into, optional)] class: String,
1011
children: Children,
1112
) -> impl IntoView {
1213
let colors = HashMap::from([
13-
("primary", "bg-orange-200 hover:bg-black hover:text-white"),
14-
("white", "bg-orange-100"),
14+
(
15+
"primary",
16+
"bg-orange-200 dark:bg-transparent hover:bg-black hover:text-white",
17+
),
18+
("white", "bg-orange-100 dark:bg-transparent hover:bg-black"),
19+
]);
20+
let shadows = HashMap::from([
21+
("drop", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)]"),
22+
("box", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)] dark:drop-shadow-none shadow-sm hover:drop-shadow-none dark:hover:shadow-lg shadow-black"),
1523
]);
1624
let sizes = HashMap::from([("tiny", "min-h-7"), ("normal", "h-9"), ("big", "h-12")]);
1725
let current_color = (*colors.get(&color).unwrap()).to_string();
1826
let current_size = (*sizes.get(&size).unwrap()).to_string();
27+
let shadow = (*shadows.get(&shadow).unwrap()).to_string();
1928

2029
view! {
2130
<a
2231
href=href
2332
target="_blank"
2433
class=format!(
25-
"tracking-wider font-work-sans border border-black flex items-center px-4 drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)] transition w-fit gap-x-4 sm:whitespace-nowrap max-w-[10rem] sm:max-w-none {} {} {}",
34+
"tracking-wider font-work-sans border border-black dark:border-white flex items-center px-4 transition w-fit gap-x-4 sm:whitespace-nowrap max-w-[10rem] sm:max-w-none {} {} {} {}",
2635
current_color,
2736
current_size,
2837
class,
38+
shadow,
2939
)
3040
>
3141

‎src/components/cards/card_title.rs

+6-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,10 @@ pub fn CardTitle(#[prop(into)] texts: &'static [&'static str]) -> impl IntoView
1212
}
1313
}
1414

15-
view! { <h3 class="text-xl font-work-sans text-black" inner_html=words.join(" ")></h3> }
15+
view! {
16+
<h3
17+
class="text-xl font-work-sans text-black dark:text-white"
18+
inner_html=words.join(" ")
19+
></h3>
20+
}
1621
}

‎src/components/cards/community_card.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ pub fn CommunityCard(
1818
<a
1919
href=link
2020
target="_blank"
21-
class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-50 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
21+
class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-50 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
2222
>
2323
<div>
2424
<img
@@ -30,7 +30,7 @@ pub fn CommunityCard(
3030
alt=brand_alt
3131
/>
3232
<CardTitle texts=name/>
33-
<p class="font-work-sans text-black">{description}</p>
33+
<p class="font-work-sans text-black dark:text-white">{description}</p>
3434
</div>
3535
<span class="ml-auto">
3636
{move || match icon {

‎src/components/cards/contributor_card.rs

+7-5
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ pub fn ContributorCard(
1717
<a
1818
href=link.clone()
1919
target="_blank"
20-
class="group flex flex-col gap-y-6 border border-black p-4 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between h-full"
20+
class="group flex flex-col gap-y-6 border border-black p-4 hover:bg-orange-500 bg-orange-100 dark:hover:bg-zinc-900/40 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between h-full"
2121
>
2222
<span class="absolute top-0 end-0 inline-flex items-center size-3.5 group-hover:min-w-16 rounded-full border-2 border-white text-xs font-medium transition-all transform -translate-y-1/2 translate-x-1/2 bg-teal-500 dark:border-slate-900 badge-container">
2323
<span class="sr-only text-black badge-content transition-all transform">
@@ -26,21 +26,23 @@ pub fn ContributorCard(
2626
</span>
2727
<div class="flex flex-col gap-y-2">
2828
<img src=brand_src width="60" class="rounded-full mb-4" alt=name.clone()/>
29-
<h2 class="font-work-sans text-black text-xl">{name}</h2>
29+
<h2 class="font-work-sans text-black dark:text-white text-xl">{name}</h2>
3030
{location
3131
.map_or_else(
3232
|| view! { <div class="hidden"></div> },
3333
|location| {
3434
view! {
35-
<div class="flex gap-2 items-center bg-slate-200/20 rounded-md p-1">
35+
<div class="flex gap-2 items-center bg-slate-200/20 dark:bg-neutral-500/40 rounded-md p-1">
3636
<LocationIcon size=16/>
37-
<p class="font-work-sans text-black text-sm">{location}</p>
37+
<p class="font-work-sans text-black dark:text-white text-sm">
38+
{location}
39+
</p>
3840
</div>
3941
}
4042
},
4143
)}
4244

43-
<p class="font-work-sans text-black">{description}</p>
45+
<p class="font-work-sans text-black dark:text-white">{description}</p>
4446
</div>
4547
<span class="ml-auto flex">
4648
{twitter

‎src/components/cards/project_card.rs

+5-9
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,21 @@ pub fn ProjectCard(
1515
#[prop(into, optional)] button_text: &'static str,
1616
) -> impl IntoView {
1717
let colors = HashMap::from([
18-
("white", "bg-white text-black"),
19-
("black", "bg-black text-white"),
18+
("white", "bg-white dark:bg-black text-black dark:text-white"),
19+
("black", "bg-black dark:bg-white text-white dark:text-black"),
2020
]);
2121
let current_color = (*colors.get(&button_bg_color).unwrap()).to_string();
2222

2323
view! {
24-
<div class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 hover:bg-orange-500 bg-orange-100 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
24+
<div class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 hover:bg-orange-500 dark:hover:bg-zinc-900/40 bg-orange-100 dark:bg-black/40 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between">
2525
<a href=link target="_blank">
26-
2726
<div class="flex flex-col justify-between gap-y-2">
2827
{if brand_as_letter {
2928
view! {
3029
<span class=format!(
3130
"h-[60px] w-[60px] rounded-full text-4xl flex justify-center items-center {}",
3231
current_color,
33-
)>
34-
35-
{brand_src}
36-
</span>
32+
)>{brand_src}</span>
3733
}
3834
.into_any()
3935
} else {
@@ -49,7 +45,7 @@ pub fn ProjectCard(
4945
.into_any()
5046
}}
5147
<CardTitle texts=name/>
52-
<p class="mt-2 font-work-sans text-black">{description}</p>
48+
<p class="mt-2 font-work-sans text-black dark:text-white">{description}</p>
5349
</div>
5450
<div class="flex gap-2 items-center mt-4">
5551
<ButtonLink href=button_link size="tiny">

0 commit comments

Comments
 (0)