From 57e09f8b310a88f03e38f82d87c25f1d86b4aa34 Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Thu, 11 Jul 2024 17:06:31 +0200
Subject: [PATCH] feat(ui): :lipstick: improve membercard size and background

---
 components/MemberCard.css | 8 +++++---
 routes/index.tsx          | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/MemberCard.css b/components/MemberCard.css
index 5ebf375..421b64b 100644
--- a/components/MemberCard.css
+++ b/components/MemberCard.css
@@ -1,11 +1,12 @@
 .components__member_card {
 	display: grid;
-	grid-template-rows: 1fr 5rem;
-	min-width: 15rem;
+	grid-template-rows: 1fr auto;
+	width: 16rem;
 	aspect-ratio: 1;
 	box-shadow: 0 0 0.4rem 0.2rem var(--_translucent);
 	border: var(--_border-size) solid transparent;
-	background-size: cover;
+	background-size: 90%;
+	background-position-x: center;
 	background-repeat: no-repeat;
 
 	&:has(a:focus-visible),
@@ -15,6 +16,7 @@
 
 	& h3 {
 		margin: 0;
+		text-align: center;
 	}
 
 	& a {
diff --git a/routes/index.tsx b/routes/index.tsx
index e2fdc65..d6b77e7 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -51,7 +51,7 @@ export default function Home() {
 			</section>
 			<section>
 				<h2>Nos membres</h2>
-				<AutoGrid columnWidth='15rem' style={{ alignItems: 'center' }}>
+				<AutoGrid columnWidth='16rem' style={{ alignItems: 'center' }}>
 					<MemberCardList
 						limit={4}
 						usePlaceholder={true}