diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/About.svelte | 50 |
1 files changed, 26 insertions, 24 deletions
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} |