diff --git a/assets/ferris-hero.avif b/assets/ferris-hero.avif index 7290459..2d1df1c 100644 Binary files a/assets/ferris-hero.avif and b/assets/ferris-hero.avif differ diff --git a/assets/rustlangeshalloween.webp b/assets/rustlangeshalloween.webp new file mode 100644 index 0000000..d1a3389 Binary files /dev/null and b/assets/rustlangeshalloween.webp differ diff --git a/src/app.rs b/src/app.rs index cdef15b..f94d2dd 100644 --- a/src/app.rs +++ b/src/app.rs @@ -21,7 +21,7 @@ pub fn App() -> impl IntoView {
diff --git a/src/components/button_large_link.rs b/src/components/button_large_link.rs new file mode 100644 index 0000000..2600e30 --- /dev/null +++ b/src/components/button_large_link.rs @@ -0,0 +1,46 @@ +use leptos::{component, view, Children, IntoView}; +use std::collections::HashMap; + +#[component] +pub fn ButtonLargeLink( + #[prop(into)] href: String, + #[prop(default = "primary")] color: &'static str, + #[prop(default = "normal")] size: &'static str, + #[prop(default = "drop")] shadow: &'static str, + #[prop(into, optional)] class: String, + children: Children, +) -> impl IntoView { + let colors = HashMap::from([ + ( + "primary", + "bg-orange-200 dark:bg-transparent hover:bg-black hover:text-white", + ), + ("white", "bg-orange-100 dark:bg-transparent hover:bg-black hover:text-white"), + ]); + let shadows = HashMap::from([ + ("drop", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)]"), + ("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"), + ]); + let sizes = HashMap::from([("tiny", "min-h-7"), ("normal", "h-9"), ("big", "h-12")]); + let current_color = (*colors.get(&color).unwrap()).to_string(); + let current_size = (*sizes.get(&size).unwrap()).to_string(); + let shadow = (*shadows.get(&shadow).unwrap()).to_string(); + + view! { + + + {children()} + + } +} + diff --git a/src/components/button_link.rs b/src/components/button_link.rs index b5f0a03..7df61f7 100644 --- a/src/components/button_link.rs +++ b/src/components/button_link.rs @@ -15,7 +15,7 @@ pub fn ButtonLink( "primary", "bg-orange-200 dark:bg-transparent hover:bg-black hover:text-white", ), - ("white", "bg-orange-100 dark:bg-transparent hover:bg-black"), + ("white", "bg-orange-100 dark:bg-transparent hover:bg-black hover:text-white"), ]); let shadows = HashMap::from([ ("drop", "drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)]"), diff --git a/src/components/hacktoberfest.rs b/src/components/hacktoberfest.rs new file mode 100644 index 0000000..162031e --- /dev/null +++ b/src/components/hacktoberfest.rs @@ -0,0 +1,61 @@ +use leptos::{component, view, IntoView}; + +use crate::components::{ + button_link::ButtonLink, + button_large_link::ButtonLargeLink, + icons::{DiscordIcon, CalendarIcon, GithubIcon}, +}; + +#[component] +pub fn Hacktoberfest() -> impl IntoView { + view! { +
+
+
+

+ + "🚀 ¡Únete a la celebración del" + " Hacktoberfest " + "con nosotros! 🚀" + +

+

+ "Este" " 5 de Octubre"" + , nuestra comunidad se une a este emocionante evento de programación. + Aprovecha esta excelente oportunidad para contribuir a proyectos open-source, aprender nuevas habilidades + y conectar con otros amantes del open-source." +

+
+ + + "Participa" + + + + "Añade a tu calendario" + + + + "Postula tu proyecto" + +
+
+
+
+ } +} diff --git a/src/components/icons/calendar_icon.rs b/src/components/icons/calendar_icon.rs new file mode 100644 index 0000000..bd0183f --- /dev/null +++ b/src/components/icons/calendar_icon.rs @@ -0,0 +1,21 @@ +use leptos::{component, view, IntoView}; + +#[component] +pub fn CalendarIcon( + #[prop(default = 40)] size: u32, + #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str, +) -> impl IntoView { + view! { + + + + + } +} + diff --git a/src/components/icons/discord_icon.rs b/src/components/icons/discord_icon.rs index 885f208..b919809 100644 --- a/src/components/icons/discord_icon.rs +++ b/src/components/icons/discord_icon.rs @@ -3,7 +3,7 @@ use leptos::{component, view, IntoView}; #[component] pub fn DiscordIcon( #[prop(default = 40)] size: u32, - #[prop(default = "fill-black dark:fill-[#bf8821]")] class: &'static str, + #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str, ) -> impl IntoView { view! { } } + diff --git a/src/components/icons/github_icon.rs b/src/components/icons/github_icon.rs index 813bff3..374bc96 100644 --- a/src/components/icons/github_icon.rs +++ b/src/components/icons/github_icon.rs @@ -3,7 +3,7 @@ use leptos::{component, view, IntoView}; #[component] pub fn GithubIcon( #[prop(default = 40)] size: u32, - #[prop(default = "fill-black dark:fill-[#bf8821]")] class: &'static str, + #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str, ) -> impl IntoView { view! { impl IntoView { view! { } } + diff --git a/src/components/icons/mod.rs b/src/components/icons/mod.rs index bb8a77a..ad11172 100644 --- a/src/components/icons/mod.rs +++ b/src/components/icons/mod.rs @@ -1,4 +1,5 @@ mod cloudflare; +mod calendar_icon; mod discord_icon; mod github_icon; mod linkedin_icon; @@ -9,6 +10,7 @@ mod telegram_icon; mod twitter_icon; mod web_icon; +pub use calendar_icon::*; pub use cloudflare::*; pub use discord_icon::*; pub use github_icon::*; diff --git a/src/components/icons/telegram_icon.rs b/src/components/icons/telegram_icon.rs index 6108b50..68134a9 100644 --- a/src/components/icons/telegram_icon.rs +++ b/src/components/icons/telegram_icon.rs @@ -3,7 +3,7 @@ use leptos::{component, view, IntoView}; #[component] pub fn TelegramIcon( #[prop(default = 40)] size: u32, - #[prop(default = "fill-black dark:fill-[#bf8821]")] class: &'static str, + #[prop(default = "fill-current dark:fill-[#bf8821]")] class: &'static str, ) -> impl IntoView { view! { impl IntoView { @@ -8,6 +8,7 @@ pub fn Index() -> impl IntoView {
+ diff --git a/tailwind.config.js b/tailwind.config.js index 109e6b8..9524841 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,8 +14,12 @@ module.exports = { ...theme.screens, }), backgroundImage: (theme) => ({ - "kaku-dev": "url('/assets/kaku.avif')", - "kaku": "url('/kaku.avif')", + "kaku-dev": "url('/assets/rustlangeshalloween.webp')", + "kaku": "url('/rustlangeshalloween.webp')", + }), + backgroundSize: (theme) => ({ + 'small': '12rem', + ...theme.backgroundSize, }), gridTemplateColumns: (theme) => ({ "divided": "2.5fr 1fr", @@ -85,4 +89,4 @@ module.exports = { }, }, plugins: [], -}; \ No newline at end of file +};