fix: reduce the issues in mobile

Author: Phosphorus-M

src/components/aprende/books.rs

@@ -15,8 +15,8 @@ pub fn Books(
                     "Hemos dedicado tiempo y esfuerzo a adaptar libros al español, estamos orgullosos de compartir estos recursos, esperando que contribuyan al acceso y comprensión de valiosos conocimientos."
                 </p>
             </div>
-            <div class="flex flex-row justify-center items-center  container mx-auto mb-28">
-                <section class="w-1/2 px-10">
+            <div class="flex flex-col md:flex-row justify-center items-center  container mx-auto mb-16 md:mb-28 gap-4">
+                <section class="w-full md:w-1/2 px-10">
                     <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">
                         <span class="absolute top-0 end-0 inline-flex items-center size-3.5 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">
                             <span class="sr-only text-black badge-content transition-all transform ">
@@ -37,7 +37,7 @@ pub fn Books(
                     </div>
                 </section>
 
-                <section class="w-1/2 px-10">
+                <section class="w-full md:w-1/2 px-10 flex flex-col h-full ">
                     <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">
                         <span class="absolute top-0 end-0 inline-flex items-center size-3.5 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">
                             <span class="sr-only text-black badge-content transition-all transform ">
@@ -70,8 +70,8 @@ pub fn Books(
                     "Estos son algunos otros libros que nos interesa compartir con ustedes."
                 </p>
             </div>
-            <div class="flex flex-row justify-center items-center  container mx-auto">
-                <section class="w-1/2 px-10">
+            <div class="flex flex-col md:flex-row justify-center items-center container mx-auto">
+                <section class="w-full lg:w-1/2 px-10">
                     <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">
                         <h1 class="font-alfa-slab text-xl sm:text-2xl lg:text-3xl text-center mb-5">
                             "Comprehensive Rust"
@@ -83,6 +83,7 @@ pub fn Books(
                             <ButtonLink
                                 href="https://google.github.io/comprehensive-rust/es/index.html"
                                 size="big"
+                                class="max-w-fit"
                             >
                                 "Ir a Comprehensive Rust"
                             </ButtonLink>

src/components/aprende/roadmap.rs

@@ -12,8 +12,8 @@ pub fn Roadmap(
     };
 
     view! {
-        <section class="bg-orange-200 py-20 flex flex-col md:flex-row items-center justify-center container mx-auto gap-10">
-            <div class="container mx-auto flex flex-wrap text-balance gap-5  w-1/2">
+        <section class="bg-orange-200 py-20 flex flex-col-reverse md:flex-row items-center justify-center  container mx-auto gap-10">
+            <div class="container px-10  lg:mx-auto flex flex-wrap text-balance gap-5  lg:w-1/2">
                 <h1 class="font-alfa-slab text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left">
                     "Roadmap de aprendizaje del lenguaje"
                 </h1>
@@ -24,8 +24,8 @@ pub fn Roadmap(
                     "Ir al Roadmap"
                 </ButtonLink>
             </div>
-            <div class=" w-1/2 lg:min-h-[500px]">
-                <div class="image-container w-full">
+            <div class="w-full lg:w-1/2 min-h-72 xs:min-h-[420px] lg:min-h-[450px]  xs:mb-12">
+                <div class="image-container w-full max-w-60 xs:max-w-none mx-auto">
                     <img
                         src=format!("{}/roadmap.avif", assets_folder)
                         alt="Roadmap"

src/components/aprende/youtube.rs

@@ -17,7 +17,7 @@ pub fn Youtube(
                 </p>
             </div>
             <div class="p-6 w-full">
-                <div class="list">
+                <div class="list py-6">
                     <YoutubeCard
                         username="robertohuertasm"
                         title="Roberto Huertas"

src/components/button_link.rs

@@ -6,6 +6,7 @@ pub fn ButtonLink(
     #[prop(into)] href: String,
     #[prop(default = "primary")] color: &'static str,
     #[prop(default = "normal")] size: &'static str,
+    #[prop(into, optional)] class: String,
     children: Children,
 ) -> impl IntoView {
     let colors = HashMap::from([
@@ -21,9 +22,10 @@ pub fn ButtonLink(
             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 sm:whitespace-nowrap max-w-[10rem] sm:max-w-none {} {}",
+                "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,
+                class,
             )
         >
 

tailwind.config.js

@@ -2,6 +2,8 @@ const svgToDataUri = require("mini-svg-data-uri");
 const {
   default: flattenColorPalette,
 } = require("tailwindcss/lib/util/flattenColorPalette");
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -14,6 +16,10 @@ module.exports = {
       "work-sans": ["Work Sans", "sans-serif"],
     },
     extend: {
+      screens: {
+        'xs': '475px',
+        ...defaultTheme.screens,
+      },
       gridTemplateColumns:  (theme) => ({
         "divided": "2.5fr 1fr",
         "sidebar": "1fr 1fr"