Stylings on case studies list view

Author: webstackdev

src/pages/case-studies/[slug].astro

@@ -34,20 +34,20 @@ const section = 'Case Studies'
   {
     caseStudy.data.cover && (
       <div
-        class="relative aspect-video max-w-3xl mx-auto rounded-2xl overflow-hidden shadow-lg mb-8"
+        class="relative w-full overflow-hidden mb-8"
+        style="aspect-ratio: 1564 / 670;"
         slot="hero-image"
       >
         <Picture
           src={caseStudy.data.cover}
           alt={caseStudy.data.coverAlt}
-          widths={[640, 960, 1280, 1920]}
-          sizes="(min-width: 1280px) 80vw, 100vw"
+          widths={[480, 768, 1024, 1280, 1564]}
+          sizes="100vw"
           formats={['avif', 'webp', 'jpeg']}
           layout="constrained"
           fit="cover"
           position="center"
-          class="absolute inset-0 h-full w-full object-cover"
-          loading="eager"
+          class="absolute inset-0 h-full w-full"
         />
       </div>
     )

src/pages/case-studies/index.astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content'
 import { Picture } from 'astro:assets'
+import Icon from '@components/Icon/index.astro'
 import PageLayout from '@layouts/PageLayout.astro'
 
 const allCaseStudies = await getCollection('caseStudies')
@@ -32,10 +33,13 @@ const path = '/case-studies'
     {
       sortedCaseStudies.map(caseStudy => {
         return (
-          <article class="bg-content-inverse rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
-            <a href={`/case-studies/${caseStudy.id}`} class="block h-full">
+          <article class="group h-full relative after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-within:after:opacity-100 focus-within:after:-inset-1.5 focus-within:after:border-spotlight">
+            <a
+              href={`/case-studies/${caseStudy.id}`}
+              class="flex h-full flex-col bg-content-inverse rounded-xl shadow-lg transition-all duration-300 overflow-hidden border border-trim transform hover:-translate-y-2 no-underline hover:no-underline focus-visible:no-underline focus-visible:outline-none focus-visible:shadow-none"
+            >
               {caseStudy.data.cover && (
-                <div class="relative aspect-video overflow-hidden">
+                <div class="relative aspect-video overflow-hidden shrink-0">
                   <Picture
                     src={caseStudy.data.cover}
                     alt={caseStudy.data.coverAlt}
@@ -51,33 +55,46 @@ const path = '/case-studies'
                 </div>
               )}
 
-              <div class="p-6 space-y-4">
-                <h2 class="text-xl font-semibold leading-tight group-hover:text-primary transition-colors duration-300">
-                  {caseStudy.data.title}
-                </h2>
+              <div class="flex flex-1 min-h-0 flex-col justify-between p-6">
+                <div>
+                  <h3 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
+                    {caseStudy.data.title}
+                  </h3>
 
-                {caseStudy.data.description && (
-                  <p class="text-sm leading-relaxed line-clamp-3">
-                    {caseStudy.data.description}
-                  </p>
-                )}
+                  {caseStudy.data.description && (
+                    <p class="text-content-offset leading-relaxed text-sm">
+                      {caseStudy.data.description}
+                    </p>
+                  )}
+                </div>
 
-                <div class="space-y-3">
+                <div class="space-y-3 mt-4">
                   {caseStudy.data.client && (
-                    <span class="inline-block text-sm font-medium text-primary bg-blue-100 px-3 py-1 rounded-full">
+                    <span class="inline-block text-sm font-medium text-primary bg-content-inverse-active px-3 py-1 rounded-full">
                       Client: {caseStudy.data.client}
                     </span>
                   )}
 
-                  <time
-                    datetime={caseStudy.data.publishDate.toISOString()}
-                    class="block text-sm"
-                  >
-                    {caseStudy.data.publishDate.toLocaleDateString('en-US', {
-                      year: 'numeric',
-                      month: 'long',
-                    })}
-                  </time>
+                  <div class="flex justify-between px-3">
+                    <time
+                      datetime={caseStudy.data.publishDate.toISOString()}
+                      class="block text-sm"
+                    >
+                      {caseStudy.data.publishDate.toLocaleDateString('en-US', {
+                        year: 'numeric',
+                        month: 'long',
+                      })}
+                    </time>
+
+                    <div class="flex items-center text-primary text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                      <span>Learn more</span>
+                      <Icon
+                        icon="exit-right-thin"
+                        size={4}
+                        classes="ml-0.5 mb-0.5 transform group-hover:translate-x-1 transition-transform"
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </a>

src/pages/testing/icons.astro

@@ -34,7 +34,7 @@ const description = 'Preview every marker icon to verify styling and availabilit
       <div class="flex flex-wrap gap-6">
         {iconNames.map(iconName => (
           <div class="flex min-w-50 flex-1 basis-55 flex-col items-center justify-between rounded-xl border border-trim bg-content-inverse p-8 text-center">
-            <Icon icon={iconName} color="primary" />
+            <Icon icon={iconName} color="primary" size={12} />
             <span class="mt-6 w-full border-t border-dashed border-trim pt-4 text-sm font-mono">
               {iconName}
             </span>