fix: adjust card folding and font size for different screens (#545)

* fix: adjust card folding and font size for different screens

* fix: change tablet services layout

Author: gloriababic

apps/website/src/components/ServiceCard.astro

@@ -54,7 +54,8 @@ const image = await src();
       `text-white
       h-full
       lg:h-[620px]
-      p-7
+      p-5
+      md:p-7
       lg:p-12
       grid
       grid-cols-6
@@ -71,17 +72,22 @@ const image = await src();
     )}
   >
     <div
-      class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
+      class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-4 md:gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
     >
-      <span class="grid md:flex gap-7">
-        <img src={iconPath} alt="" role="presentation" class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12" />
+      <span class="grid md:flex gap-4 md:gap-7">
+        <img
+          src={iconPath}
+          alt=""
+          role="presentation"
+          class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12"
+        />
         <div class="gap-y-2 flex flex-col">
           <h4
-            class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] text-left"
+            class="font-medium text-lg leading-[22px] md:text-[28px] md:leading-[30px] text-left"
           >
             {title}
           </h4>
-          <p class="text-lg">{subtitle}</p>
+          <p class="text-base md:text-lg">{subtitle}</p>
         </div>
       </span>
       <div
@@ -97,7 +103,7 @@ const image = await src();
         />
       </div>
       <div
-        class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:leading-[26px] md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
+        class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:text-sm [&_p]:leading-[26px] md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
         set:html={content.html}
       />
     </div>

apps/website/src/content/services/create-an-evolving-architecture.md

@@ -10,10 +10,9 @@ bgColor: "bg-[#424C6DE5]/[0.9]"
 
 From start to finish, we are there to design, implement, and guide you through the adoption of a future-proof, flexible software architecture. Backed by strong product engineering practices and tailored to your unique needs, we aim to reduce costs and mitigate the risks of downtime, technical debt, and evolving industry demands.
 </br>
-</br>
-</br>
-<a
-    class='underline underline-offset-2'
-    href="/blog/using-lago-to-create-a-flexible-billing-system">
-Case Study: Submix Billing System
-</a>
+
+<div class="pt-6">
+    <a class='underline underline-offset-2 text-base md:text-[20px]' href="/blog/using-lago-to-create-a-flexible-billing-system">
+        Case Study: Submix Billing System
+    </a>
+</div>

apps/website/src/content/services/improving-engineering-tempo.md

@@ -10,13 +10,12 @@ bgColor: "bg-[#3C3843E5]/[0.9]"
 
 By optimizing workflows and breaking down tasks, we boost engineering tempo and support your team in delivering higher-quality software, faster. Through hands-on process coaching, placing experienced engineers directly in your team, or deploying a dedicated task force to unblock delivery, we streamline development to make releases more frequent and reduce production failures.
 </br>
-</br>
-</br>
-<div class="flex justify-end items-center gap-4">
+
+<div class="flex justify-end items-center gap-4 pt-6">
   <p class="text-right">Schedule a free DevEx audit</p>
   <a id="contact-us-our-services-cta"
-     class="flex font-medium w-fit h-[61px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90"
+     class="flex font-medium w-fit h-[61px] items-center px-4 leading-tight py-2 rounded-md text-sm md:text-base text-center whitespace-nowrap bg-crocoder-yellow text-contrast hover:opacity-90 max-md:h-[45px]"
      href="/contact">
     Contact Us
   </a>
-</div>
+</div>

apps/website/src/styles/main.css

@@ -151,3 +151,96 @@ body:has(nav #nav-menu-toggle:checked) {
     top: 460px;
   }
 }
+
+@media (width < 768px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: -21px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 80px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 150px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 220px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 440px;
+  }
+}
+
+@media (width <= 435px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: 0px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 100px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 120px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 140px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 0px;
+  }
+}
+
+@media (width <= 375px) {
+  .animation-container {
+    /* 4 x card height - 3 x negative margin top */
+    height: calc((4 * 680px) - (3 * 20));
+  }
+
+  .animation-card {
+    position: sticky;
+    width: 100%;
+    max-height: 680px;
+    margin-top: 0px;
+  }
+
+  .animation-card:nth-child(1) {
+    top: 80px;
+    margin-top: 0;
+  }
+
+  .animation-card:nth-child(2) {
+    top: 100px;
+  }
+
+  .animation-card:nth-child(3) {
+    top: 120px;
+  }
+
+  .animation-card:nth-child(4) {
+    top: 0px;
+  }
+}