From 7782f0c277db0b35c7d724d7b0807fa6cb0a2e35 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sat, 12 Nov 2022 23:17:10 -0800
Subject: team mobile styles

---
 src/components/About.svelte | 50 +++++++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

(limited to 'src/components')

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 4e3b7d25..317c190e 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -49,33 +49,35 @@
 		</h3>
 		<div class="space-y-10 2xl:space-y-0 2xl:grid gap-y-10 grid-cols-2">
 			{#each team as member}
-				<div class="md:flex justify-center 2xl:items-start md:space-x-10">
-					<div class="w-[220px]">
-						<Image image={member.name} style="rounded-full mx-auto w-40 h-40 mb-5 object-cover" />
+				<div class="flex w-full">
+					<div class="md:flex 2xl:items-start md:max-w-2xl mx-auto">
+						<div class="w-[220px] mx-auto">
+							<Image image={member.name} style="rounded-full mx-auto w-40 h-40 mb-5 object-cover" />
 
-						<div class="space-y-2">
-							<span class="text-2xl text-center font-semibold block"
-								>{$t(`about.team.${member.name}.name`)}</span
-							>
-							<span class="text-xl text-center text-secondary block"
-								>{$t(`about.team.${member.name}.position`)}</span
-							>
-						</div>
-
-						<div class="mt-2 flex justify-center items-center space-x-5">
-							{#each member.socials as social}
-								<a
-									href={social.url}
-									target="_blank"
-									rel="noreferrer"
-									class={`rounded-full p-2 ${social.color} hover:opacity-80`}
-									><Icon icon={social.type} style="w-6" /></a
+							<div class="space-y-2">
+								<span class="text-2xl text-center font-semibold block"
+									>{$t(`about.team.${member.name}.name`)}</span
+								>
+								<span class="text-xl text-center text-secondary block"
+									>{$t(`about.team.${member.name}.position`)}</span
 								>
-							{/each}
+							</div>
+
+							<div class="mt-2 flex justify-center items-center space-x-5">
+								{#each member.socials as social}
+									<a
+										href={social.url}
+										target="_blank"
+										rel="noreferrer"
+										class={`rounded-full p-2 ${social.color} hover:opacity-80`}
+										><Icon icon={social.type} style="w-6" /></a
+									>
+								{/each}
+							</div>
+						</div>
+						<div class="text-secondary text-xl w-full max-w-[450px] mt-5">
+							{$t(`about.team.${member.name}.bio`)}
 						</div>
-					</div>
-					<div class="text-secondary text-xl w-full md:w-[450px] mt-5">
-						{$t(`about.team.${member.name}.bio`)}
 					</div>
 				</div>
 			{/each}
-- 
cgit v1.2.3