style: rework member list style

Author: NoeTerrier

app/src/components/MembersList.tsx

@@ -12,7 +12,7 @@ export default function MembersList(props: {
   return (
     <div className={styles.membersList}>
       <h1>{translate("committee", locale(router), { capitalize: true })}</h1>
-      <div>
+      <div className={styles.list}>
         {props.membership.map((m) => (
           <Card
             size="small"

app/src/pages/commissions/[slug].tsx

@@ -30,8 +30,8 @@ export default function Page(
         <Markdown className="text">{translation.description}</Markdown>
 
         <SocialsList socials={props.socialLinks} />
-        <MembersList membership={props.members} />
       </div>
+      <MembersList membership={props.members} />
     </div>
   );
 }

app/src/styles/Card.module.scss

@@ -4,8 +4,8 @@
 .card {
   @extend .glass;
 
-  width: 30ch;
-  height: 10ch;
+  width: 18rem;
+  height: 6rem;
   border-radius: 5rem;
   padding: 1rem;
 

app/src/styles/MembersList.module.scss

@@ -6,20 +6,25 @@
   row-gap: 1em;
   margin-top: 5rem;
 
+  width: 80%;
+
+  padding-bottom: 2rem;
+
   border-radius: 3rem;
   background-color: variables.$white-background-color;
-  width: 80%;
 
   @media (max-width: 800px) {
     width: 100%;
   }
 
-  > div {
+  .list {
+    width: 100%;
     display: grid;
-    grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
+
+    gap: 1rem;
+
     align-items: center;
     justify-items: center;
-    padding: 2rem;
   }
 }

app/src/styles/NavigationBar.module.scss

@@ -14,8 +14,6 @@
   position: fixed;
   z-index: 100;
 
-  align-items: center;
-
   color: variables.$text-color;
   font-weight: lighter;
   font-size: 15pt;