Merge pull request #19 from michaelcardoza/main

refactor: add mobile design
RustLangES · Aug 28, 2023 · 419b33f · 419b33f
2 parents acdba87 + 9bc6928
commit 419b33f
Show file tree

Hide file tree

Showing 11 changed files with 305 additions and 68 deletions.
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="es">
  <head>
  <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link data-trunk rel="rust" data-wasm-opt="z" />
  <link data-trunk rel="icon" type="image/ico" href="/public/LogoSegunMichael.ico" />
  <link

diff --git a/src/components/button_link.rs b/src/components/button_link.rs
@@ -24,7 +24,7 @@ pub fn ButtonLink(
  <a
  href=href
  target="_blank"
- class=format!("tracking-widest 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 {} {}", current_color, current_size)
+ class=format!("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 whitespace-nowrap {} {}", current_color, current_size)
  >
  {children()}
  </a>

diff --git a/src/components/community_projects.rs b/src/components/community_projects.rs
@@ -6,13 +6,13 @@ use crate::components::button_link::ButtonLink;
 #[component]
 pub fn CommunityProjects() -> impl IntoView {
  view! {
- <section class="bg-orange-200 py-20 ">
+ <section class="bg-orange-200 py-20">
  <div class="container mx-auto px-4">
- <h2 class="text-2xl text-left mb-4">
+ <h2 class="text-3xl text-left mb-6">
  <span class="font-work-sans font-light">"Proyectos de la "</span>
  <span class="font-alfa-slab text-orange-500">"Comunidad"</span>
  </h2>
- <div class="w-full grid grid-cols-4 gap-x-8 gap-y-4">
+ <div class="w-full grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-4">
  <a
  href="https://github.com/RustLangES/rust-book-es"
  target="_blank"

diff --git a/src/components/footer.rs b/src/components/footer.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Footer() -> impl IntoView {
+ view! {
+ <footer class="w-full bg-orange-900 text-center py-6 text-white">
+ "Comunidad - Rust Lang en español"
+ </footer>
+ }
+}
diff --git a/src/components/header.rs b/src/components/header.rs
@@ -4,37 +4,56 @@ use crate::components::button_link::ButtonLink;
 
 #[component]
 pub fn Header() -> impl IntoView {
+ let (is_open, set_is_open) = create_signal(false);
+
  view! {
  <header class="border-b border-b-black/20">
- <div class="container mx-auto px-4 flex items-center justify-between">
- <div class="flex items-center gap-x-4">
- <img
- src="https://www.rust-lang.org/static/images/rust-logo-blk.svg"
- class="max-h-20 rounded-full"
- alt="Rust Lang en Español"
- />
+ <div class="container mx-auto px-4 flex items-center justify-between flex-col lg:flex-row">
+ <div class="flex justify-between w-full lg:w-auto">
+ <div class="flex items-center gap-x-4">
+ <img
+ src="https://www.rust-lang.org/static/images/rust-logo-blk.svg"
+ class="max-h-20 rounded-full"
+ alt="Rust Lang en Español"
+ />
+ </div>
+ <button class="lg:hidden" on:click=move |_| {set_is_open.update(|n| *n = !*n)}>
+ <span class="w-6 h-1 bg-black block my-4 relative after:absolute after:block after:bg-black after:w-6 after:h-1 after:bottom-2 before:absolute before:block before:bg-black before:w-6 before:h-1 before:-bottom-2"></span>
+ </button>
  </div>
- <nav>
- <ul class="flex items-center gap-5">
+ <nav
+ class=move || format!(
+ "w-full lg:w-auto pb-10 pt-5 lg:p-0 {}",
+ if is_open() { "block" } else { "hidden lg:block" }
+ )
+ >
+ <ul class="flex items-center gap-6 flex-col lg:flex-row lg:items-center">
  <li>
- <a href="https://rustlanges.github.io/rust-book-es" target="_blank" >"Aprende"</a>
+ <a
+ href="https://rustlanges.github.io/rust-book-es"
+ target="_blank"
+ >
+ "Aprende"
+ </a>
  </li>
  <li>
  <a href="#">"Comunidad"</a>
  </li>
  <li>
  <a href="#">"Blog"</a>
  </li>
- <li class="ml-4">
- <ButtonLink href="https://github.com/RustLangES" >
- "Github"
- </ButtonLink>
- </li>
- <li>
- <ButtonLink href="https://discord.gg/4ng5HgmaMg" >
- "Discord"
- </ButtonLink>
- </li>
+ <ul class="lg:ml-4 flex items-center gap-x-6">
+ <li>
+ <ButtonLink href="https://github.com/RustLangES">
+ "Github"
+ </ButtonLink>
+ </li>
+ <li>
+ <ButtonLink href="https://discord.gg/4ng5HgmaMg">
+ "Discord"
+ </ButtonLink>
+ </li>
+ </ul>
  </ul>
  </nav>
  </div>

diff --git a/src/components/hero.rs b/src/components/hero.rs
@@ -7,16 +7,16 @@ pub fn Hero() -> impl IntoView {
  view! {
  <section class="w-full flex flex-col">
  <Header />
- <div class="flex items-center justify-center py-32">
- <div class="flex items-center gap-x-20">
- <figure>
+ <div class="flex items-center justify-center py-14 lg:py-32 px-4">
+ <div class="grid items-center gap-x-20 gap-y-10 lg:grid-cols-2">
+ <figure class="w-80 mx-auto lg:w-full">
  <img src="./rhq3ezvso9611.png" width="500" class="mx-auto" />
  </figure>
  <div class="">
  <h1 class="flex flex-col mb-4 gap-y-2">
- <span class="font-work-sans text-4xl font-light">"Bienvenidos a"</span>
- <span class="font-alfa-slab text-orange-500 text-8xl">"Rust Lang"</span>
- <span class="font-work-sans text-5xl font-semibold">"En Español"</span>
+ <span class="font-work-sans text-4xl font-light text-center lg:text-left">"Bienvenidos a"</span>
+ <span class="font-alfa-slab text-orange-500 text-6xl sm:text-7xl lg:text-8xl text-center lg:text-left">"Rust Lang"</span>
+ <span class="font-work-sans text-5xl font-semibold text-center lg:text-left">"En Español"</span>
  </h1>
  <p class="font-work-sans font-light">
  "Una comunidad de gente mal intencionada y tonta."

diff --git a/src/components/mod.rs b/src/components/mod.rs
@@ -1,7 +1,8 @@
 pub mod icons;
 pub mod hero;
 pub mod header;
+pub mod footer;
 pub mod button_link;
 pub mod our_communities;
 pub mod other_communities;
-pub mod community_projects;
+pub mod community_projects;
diff --git a/src/components/other_communities.rs b/src/components/other_communities.rs
@@ -5,15 +5,15 @@ use crate::components::icons::telegram_icon::TelegramIcon;
 
 #[component]
 pub fn OtherCommunities() -> impl IntoView {
- view! { 
- <section class="bg-orange-100 py-20 drop-shadow-md">
+ view! {
+ <section class="bg-orange-100 py-20">
  <div class="container mx-auto px-4">
- <h2 class="text-2xl text-left mb-4">
+ <h2 class="text-3xl text-left mb-6">
  <span class="font-work-sans font-light">"Otras "</span>
  <span class="font-alfa-slab text-orange-500">"Comunidades"</span>
  <span class="font-work-sans font-light">" recomendadas "</span>
  </h2>
- <div class="w-full grid grid-cols-5 gap-x-8">
+ <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-8 gap-y-4">
  <a
  href="https://discord.gg/DeZKCCyMcq"
  target="_blank"

diff --git a/src/components/our_communities.rs b/src/components/our_communities.rs
@@ -12,10 +12,14 @@ pub fn OurCommunities() -> impl IntoView {
  <div class="container mx-auto px-4">
  <div class="flex flex-col items-center py-20 gap-y-6">
  <h2 class="text-4xl text-center mb-4">
- <span class="font-work-sans font-light">"Unete a nuestra "</span>
- <span class="font-alfa-slab text-orange-500">"Comunidad"</span>
+ <span class="font-work-sans font-light">
+ "Unete a nuestra "
+ </span>
+ <span class="font-alfa-slab text-orange-500">
+ "Comunidad"
+ </span>
  </h2>
- <div class="flex items-center gap-x-12">
+ <div class="flex items-center gap-x-12 gap-y-6 flex-col sm:flex-row">
  <ButtonLink
  href="https://discord.gg/4ng5HgmaMg"
  color="white"

diff --git a/src/pages/index.rs b/src/pages/index.rs
@@ -1,20 +1,22 @@
 use leptos::*;
 
 use crate::components::hero::Hero;
+use crate::components::footer::Footer;
 use crate::components::our_communities::OurCommunities;
 use crate::components::other_communities::OtherCommunities;
 use crate::components::community_projects::CommunityProjects;
 
 #[component]
 pub fn Index() -> impl IntoView {
- view!{ 
+ view!{
  <div>
  <Hero />
  <main>
  <OurCommunities />
  <OtherCommunities />
  <CommunityProjects />
  </main>
+ <Footer />
  </div>
  }
 }