From 2585f9cab237cc6f624887bddcdc76badf8590f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <corentin@ki-dour.org>
Date: Wed, 22 May 2024 22:03:08 +0200
Subject: [PATCH] feat: improve members section responsiveness

---
 src/pages/index/presentation.html |  4 ++--
 src/pages/index/presentation.scss | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/pages/index/presentation.html b/src/pages/index/presentation.html
index 74559ea..70275e7 100644
--- a/src/pages/index/presentation.html
+++ b/src/pages/index/presentation.html
@@ -2,7 +2,7 @@
 
 {% macro comrade(name, title, alt, avatar) %}
   <div class="comrade">
-    <img src="{{ avatar }}" alt-text="{{ alt }}" title="{{ title }}"></img>
+    <img class="comrade--picture" src="{{ avatar }}" alt-text="{{ alt }}" title="{{ title }}"></img>
     <h4 aria-hidden="True">{{ name }}</h4>
   </div>
 {% endmacro %}
@@ -52,7 +52,7 @@
         where small is mighty, and fun knows no bounds! 
       {% endtrans %}
     </p>
-    <h2>{{ gettext("The team") }}</h2>
+    <h2 class="comrades--title">{{ gettext("The team") }}</h2>
     <div class="comrades">
       {{ comrade(
           "Aurel",
diff --git a/src/pages/index/presentation.scss b/src/pages/index/presentation.scss
index 5f7132d..bf6bfa7 100644
--- a/src/pages/index/presentation.scss
+++ b/src/pages/index/presentation.scss
@@ -7,8 +7,10 @@
     display: flex;
     justify-content: center;
     gap: var(--space-medium);
-    @media ($mobile-breakpoint) {
-        flex-direction: column;
+    flex-wrap: wrap;
+
+    &--title {
+        text-align: center;
     }
 }
 
@@ -16,6 +18,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+
+    &--picture {
+        @media($mobile-breakpoint) {
+            max-width: 120px;
+        }
+    }
 }