Merge pull request #18 from nvodoor/nvodoor-update-card-layout

Fix spacing for cards.
ros-navigation · Apr 7, 2024 · acdf196 · acdf196
2 parents 4b28918 + f711d90
commit acdf196
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/src/components/cards/Cards.astro b/src/components/cards/Cards.astro
@@ -5,7 +5,7 @@ import LeftCard from "./leftCard.astro";
 import cardItems from "content/contentItems/cardItems";
 ---
 
-<div class="max-w-full">
+<div class="flex flex-col w-full justify-center items-center">
   {
     cardItems.map((item, index) => (
       index % 2 === 0 ? 

diff --git a/src/components/cards/leftCard.astro b/src/components/cards/leftCard.astro
@@ -3,21 +3,30 @@ const { videoSrc, title, oneWord, description } = Astro.props;
 ---
 
 <div class="h-full place-items-center bg-white py-8">
-  <div class="container grid items-center relative lg:grid-cols-2">
-    <div class="flex">
-      <video controls={false} autoplay loop muted transition:persist width="446" height="296"><source src={videoSrc} type="video/mp4"></video>
+  <div
+    class="container items-center flex max-sm:gap-10 gap-40 max-sm:flex-col max-sm:w-[20rem]">
+    <div class="flex max-sm:order-1 max-sm:w-[20rem]">
+      <video
+        controls={false}
+        autoplay
+        loop
+        muted
+        transition:persist
+        width="446"
+        height="296"><source src={videoSrc} type="video/mp4" /></video
+      >
     </div>
-    <div class="text-center lg:text-left">
+    <div class="text-center lg:text-left w-[446px] max-sm:w-[20rem]">
       <div
         class="flex items-center justify-center lg:justify-start font-medium text-sm mb-5">
         {oneWord}
-    </div>
-
-      <div  class="mb-8 text-blackGrey leading-tight text-2xl font-bold">
+      </div>
+      <div class="mb-8 text-blackGrey leading-tight text-2xl font-bold">
         {title}
       </div>
       <div class="lg:pr-20 font-normal">
         {description}
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/components/cards/rightCard.astro b/src/components/cards/rightCard.astro
@@ -2,23 +2,30 @@
 const { videoSrc, title, oneWord, description } = Astro.props;
 ---
 
-<div class="h-full place-items-center bg-white py-20">
-  <div class="container grid items-center relative lg:grid-cols-2">
-    <div class="mb-8">
-      <div
-        class="flex items-center font-medium text-sm mb-5">
+<div class="h-full place-items-center bg-white py-8">
+  <div
+    class="container flex items-center gap-10 sm:gap-40 max-sm:flex-col max-sm:w-[20rem]">
+    <div class="max-sm:text-center mb-8 w-[446px] max-sm:w-[20rem]">
+      <div class="flex items-center max-sm:justify-center font-medium text-sm mb-5">
         {oneWord}
       </div>
-
       <div class="mb-4 text-blackGrey leading-tight text-2xl font-bold">
         {title}
       </div>
       <div class="lg:pr-32 font-normal">
         {description}
       </div>
     </div>
-    <div class="flex">
-      <video controls={false} autoplay loop muted transition:persist width="446" height="296"><source src={videoSrc} type="video/mp4"></video>
+    <div class="flex max-sm:order-1 max-sm:w-[20rem]">
+      <video
+        controls={false}
+        autoplay
+        loop
+        muted
+        transition:persist
+        width="446"
+        height="296"><source src={videoSrc} type="video/mp4" /></video
+      >
     </div>
   </div>
 </div>