From 44bd1e48100dbeecdeecad1c2111cfdb3fd144e7 Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Wed, 18 Feb 2026 14:54:07 -0600
Subject: [PATCH] feat: change selected blogs to switch to card form on small
 screens

---
 src/components/cards/LargeBlogLeftCard.astro       | 12 ++++++------
 src/components/cards/LargeBlogRightCard.astro      | 12 ++++++------
 src/components/sections/HeroSection.astro          |  2 +-
 src/components/sections/SelectedPostsSection.astro |  2 +-
 src/styles/utilities.css                           |  2 +-
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/cards/LargeBlogLeftCard.astro b/src/components/cards/LargeBlogLeftCard.astro
index c8bab57..7517f44 100644
--- a/src/components/cards/LargeBlogLeftCard.astro
+++ b/src/components/cards/LargeBlogLeftCard.astro
@@ -15,15 +15,15 @@ interface Props {
 const { title, subTitle, url, img, imgAlt } = Astro.props;
 ---
 
-<div class="smooth-reveal group">
+<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto">
   <a
-    class="card-base-hidden md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 items-center gap-8 xl:gap-16 max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 sm:py-16 lg:py-14 mx-auto"
+    class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
     href={url}
     data-astro-prefetch
   >
     <div>
       <Image
-        class="rounded-xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
+        class="rounded-2xl rounded-b-none md:rounded-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
         src={getDirectusImageURL(img)}
         alt={imgAlt}
         draggable="false"
@@ -32,11 +32,11 @@ const { title, subTitle, url, img, imgAlt } = Astro.props;
         height="420"
       />
     </div>
-    <div>
-      <h2 class="card-text-header mb-4">
+    <div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
+      <h2 class="card-text-header mb-2">
         {title}
       </h2>
-      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-4">
+      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
         {subTitle}
       </p>
       <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
diff --git a/src/components/cards/LargeBlogRightCard.astro b/src/components/cards/LargeBlogRightCard.astro
index 654f3e4..ae0caab 100644
--- a/src/components/cards/LargeBlogRightCard.astro
+++ b/src/components/cards/LargeBlogRightCard.astro
@@ -18,17 +18,17 @@ interface Props {
 const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
 ---
 
-<div class="smooth-reveal group">
+<div class="smooth-reveal flex flex-col px-5 py-10 mx-auto">
   <a
-    class="card-base-hidden items-center lg:grid lg:grid-cols-2 gap-16 max-w-340 2xl:max-w-full px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto"
+    class="md:card-base-hidden group flex flex-col-reverse md:items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
     href={url}
     data-astro-prefetch
   >
-    <div>
-      <h2 class="card-text-header mb-4">
+    <div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
+      <h2 class="card-text-header mb-2">
         {title}
       </h2>
-      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-4">
+      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
         {subTitle}
       </p>
       <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
@@ -46,7 +46,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
     {single ? (
     <div>
       <Image
-        class="rounded-xl w-full"
+        class="rounded-2xl rounded-b-none md:rounded-2xl w-full"
         src={getDirectusImageURL(imgOne)}
         alt={imgOneAlt}
         format="webp"
diff --git a/src/components/sections/HeroSection.astro b/src/components/sections/HeroSection.astro
index 092a1f0..7e77ab9 100644
--- a/src/components/sections/HeroSection.astro
+++ b/src/components/sections/HeroSection.astro
@@ -17,7 +17,7 @@ interface Props {
 
 const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } = Astro.props;
 
-const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;
+const roundedClasses = Astro.props.rounded ? "rounded-2xl" : null;
 ---
 
 <section class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full">
diff --git a/src/components/sections/SelectedPostsSection.astro b/src/components/sections/SelectedPostsSection.astro
index 1387b67..8011dbf 100644
--- a/src/components/sections/SelectedPostsSection.astro
+++ b/src/components/sections/SelectedPostsSection.astro
@@ -11,7 +11,7 @@ interface Props {
 const { posts } = Astro.props;
 ---
 
-<section class="smooth-reveal">
+<section class="smooth-reveal flex flex-col gap-4">
   {posts.map((post, index) => index % 2 === 0 ? (
   <LargeBlogLeftCard
     title={post.title}
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index 2f481b0..785aa48 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -62,7 +62,7 @@
 
 @utility card-base-hidden {
   @apply transition-all duration-300
-         rounded-xl
+         rounded-2xl
          border border-transparent
          hover:bg-neutral-400/20 dark:hover:bg-neutral-800/40
 }