change links size

README.md

@@ -33,7 +33,7 @@ WantedBy=multi-user.target
 [ ] value gestion des erreurs
 [x] deploy
 [x] hydratation
-[ ] liens icones
+[x] liens icones
 [ ] liens position
 [ ] liens edition
 

src/app.rs

@@ -26,7 +26,17 @@ pub fn App() -> impl IntoView {
                         //<Route path="/*any" view=move || view! { <NotFound/> }/>
                     </Routes>
                 </main>
-                <footer>Footer</footer>
+                <footer>
+                //<span>Footer</span>
+                //<ul>
+                //    <li class="xs:block sm:hidden md:hidden lg:hidden xl:hidden">xs</li>
+                //    <li class="sm:block xs:hidden md:hidden lg:hidden xl:hidden">sm</li>
+                //    <li class="md:block xs:hidden sm:hidden lg:hidden xl:hidden">md</li>
+                //    <li class="lg:block xs:hidden sm:hidden md:hidden xl:hidden">lg</li>
+                //    <li class="xl:block xs:hidden sm:hidden mg:hidden lg:hidden">xl</li>
+                //    <li class="md:hidden lg:hidden xl:hidden">sm</li>
+                //</ul>
+                </footer>
             </Router>
         </div>
     }

src/routes/link.rs

@@ -80,7 +80,7 @@ pub fn Links() -> impl IntoView {
 
     view! {
         <Title text="Liens"/>
-        <ul class="flex flex-wrap gap-5 m-5 justify-center">
+        <ul class="flex gap-5 m-5 flex-wrap justify-center">
             <Suspense fallback=move || view! {<p>"Loading Comments from the article"</p> }>
                 <ErrorBoundary fallback=|_| {
                     view! { <p class="error-messages text-xs-center">"Something went wrong."</p>}
@@ -131,13 +131,14 @@ fn Link<T: 'static + Clone, S: 'static>(
     links: Resource<T, S>,
 ) -> impl IntoView {
     view! {
-        <li>
+        <li class="mx-auto w-44 lg:w-60">
-            <a class="bg-prim-light hover:bg-prim-lightest border-b hover:border-third border-transparent text-xl rounded-lg text-center hover:text-third transition-colors px-5 py-4 min-w-60 inline-block"
+            <a class="bg-prim-light w-full hover:bg-prim-lightest border-b hover:border-third border-transparent text-xl rounded-lg text-center hover:text-third transition-colors px-5 py-4 inline-block"
                 target="_blank"
                 href={move || link.with(|x| x.link.to_string())}>
-                <div class="size-54 min-w-54 mb-2">
+                <div class="flex justify-center mb-2">
                     <img src={move || link.with(|x| x.icon.to_string())}
-                         alt={move || link.with(|x| x.name.to_string())} class="size-54 object-cover" />
+                         alt={move || link.with(|x| x.name.to_string())}
+                         class="block size-32 lg:size-54 object-cover overflow-hidden" />
                 </div>
 
                 <span>{move || link.with(|x| x.name.to_string())}</span>