fix: some improvements in mobile view

Author: Phosphorus-M

src/components/button_link.rs

@@ -13,18 +13,19 @@ pub fn ButtonLink(
         ("white", "bg-orange-100")
     ]);
     let sizes = HashMap::from([
-        ("tiny", "h-7"),
+        ("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();
 
+
     view! {
         <a
             href=href
             target="_blank"
-            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)
+            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 sm:whitespace-nowrap max-w-[10rem] sm:max-w-none {} {}", current_color, current_size)
         >
             {children()}
         </a>

src/components/cards/project_card.rs

@@ -27,7 +27,7 @@ pub fn ProjectCard(
         <a
             href=link
             target="_blank"
-            class="group flex flex-col gap-y-6 border border-black p-6 hover:bg-orange-500 bg-orange-200 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
+            class="group flex flex-col gap-y-6 border border-black p-2 sm:p-6 hover:bg-orange-500 bg-orange-200 drop-shadow-[0_0_0_rgba(0,0,0)] hover:drop-shadow-[-4px_-4px_0_rgba(0,0,0)] transition justify-between"
         >
             <div class="flex flex-col justify-between gap-y-2">
                 {if brand_as_letter {

src/components/community_projects.rs

@@ -95,7 +95,7 @@ pub fn CommunityProjects() -> impl IntoView {
                     <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 sm:grid-cols-2 lg:grid-cols-3 xl: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 sm:gap-x-8 gap-y-4">
                     {items.into_iter().map(|item| {
                         view! {
                             <ProjectCard

src/components/hero.rs

@@ -18,7 +18,7 @@ pub fn Hero() -> impl IntoView {
                             <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">
+                        <p class="font-work-sans font-light text-center lg:text-left">
                             "Una comunidad de gente mal intencionada y tonta."
                         </p>
                     </div>

style/output.css

@@ -630,10 +630,6 @@ video {
   height: 3rem;
 }
 
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-9 {
   height: 2.25rem;
 }
@@ -667,6 +663,10 @@ video {
   width: 100%;
 }
 
+.max-w-\[10rem\] {
+  max-width: 10rem;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -732,10 +732,6 @@ video {
   row-gap: 1.5rem;
 }
 
-.whitespace-nowrap {
-  white-space: nowrap;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -795,6 +791,10 @@ video {
   fill: #000;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -1453,6 +1453,10 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:max-w-none {
+    max-width: none;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1461,6 +1465,19 @@ video {
     flex-direction: row;
   }
 
+  .sm\:gap-x-8 {
+    -moz-column-gap: 2rem;
+         column-gap: 2rem;
+  }
+
+  .sm\:whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .sm\:p-6 {
+    padding: 1.5rem;
+  }
+
   .sm\:text-7xl {
     font-size: 4.5rem;
     line-height: 1;