feat: responsive spacing

brown-ccv · May 29, 2024 · c79055e · c79055e
1 parent 5dac44a
commit c79055e
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -13,7 +13,7 @@ interface CardProps {
 const Card: React.FC<CardProps> = ({ position, image, title, name, address, phone, email }) => {
   return (
     <div
-      className={` flex flex-row items-center ${
+      className={`flex flex-row items-center ${
         position % 2 ? "md:flex-row-reverse md:text-right" : ""
       }`}
     >

diff --git a/src/components/CardContainer.astro b/src/components/CardContainer.astro
@@ -14,9 +14,9 @@ interface PersonProps {
 }
 ---
 
-<div class="flex flex-row items-start space-x-12">
+<div class="flex flex-row items-start space-x-12 lg:px-24 xl:px-48">
   <h2 class={`${color} [writing-mode:vertical-lr] rotate-180`}>{title}</h2>
-  <div class="flex flex-col space-y-20">
+  <div class="flex flex-col space-y-20 flex-1">
     {
       people.map((person: PersonProps, i: number) => {
         return (

diff --git a/src/pages/people.astro b/src/pages/people.astro
@@ -9,7 +9,7 @@ const support = people.filter((person) => person.data.type === "Supporting Staff
 ---
 
 <Layout title="Staff" description="Our Leadership, Advisors, and Staff">
-  <div class="flex flex-col items-center space-y-28">
+  <div class="flex flex-col space-y-28">
     <CardContainer title="Leadership" color="text-secondary-blue-500" people={leadership} />
     <CardContainer title="Advisors" color="text-primary-500" people={advisors} />
     <CardContainer title="Supporting Staff" color="text-secondary-brown-500" people={support} />