Add hover effect to meta info pills in case studies

Author: webstackdev

_TODO.md

@@ -216,8 +216,6 @@ https://mermaid.js.org/config/directives.html
 
 - There's a pretty long delay when you push the Content Switcher to go from short to deep dive, what's causing it? It should be fast - maybe it's a prefetch issue, prefetch on page load
 
-- Themepicker and search icon are too big in non-squished header. Logo too - the initial presentation should be smaller.
-
 - Search box in header should have blue outline, not highlight
 
 - Contact page Uppy file upload not displaying. Submit button is huge on Contact page.
@@ -239,6 +237,7 @@ https://mermaid.js.org/config/directives.html
 - Need to improve the "squish" animation where the header reduces in size on scroll down, and returns to full size on scroll up. Maybe reduce and expand the text and search / themepicker / hamburger menu sizes in place, and then slide them horizontally.
 
 - Moving the scroll bar up quickly with the mouse seems to make the header logic break - the Switcher component and Breadcrumbs are hidden under the header
+- Themepicker and search icon are too big in non-squished header. Logo too - the initial presentation should be smaller.
 
 ## Content Issues
 
@@ -252,8 +251,6 @@ https://mermaid.js.org/config/directives.html
 
 - Tags should break more evenly across two lines when there's a lot of them, instead of forcing the author name and date to break across two lines: platform-engineering-metrics-lead-time-developer-friction/index.mdx
 
-- Need to update Case Studies with lists and tables too
-
 17:15:36 [200] /articles/kubernetes-pod-disruption-budget-autoscaler-node-rotation 414ms
 [WebMentions] Failed to fetch mentions for https://www.webstackbuilders.com/articles/kubernetes-pod-disruption-budget-autoscaler-node-rotation. Will retry in 60s. DOMException [TimeoutError]: The operation was aborted due to timeout
     at node:internal/deps/undici/undici:15445:13

src/components/Layout/Markdown/Lead/index.astro

@@ -26,12 +26,12 @@ const modifiedDateText = shouldShowModifiedDate && modifiedDate ? formatShortDat
 ---
 
 <div class="mt-2 sm:mt-4 pt-2 border-t border-trim">
-  <div class="flex justify-between">
-    <div class="flex items-center gap-3">
+  <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
+    <div class="flex shrink-0 items-center gap-3">
       {author && <Avatar name={author} lead />}
 
       <div class="flex flex-col justify-center text-sm">
-        <div class="text-primary">
+        <div class="whitespace-nowrap text-primary">
           {author && (
             <a
               href="/about"
@@ -58,7 +58,7 @@ const modifiedDateText = shouldShowModifiedDate && modifiedDate ? formatShortDat
       </div>
     </div>
     {tags && tags.length > 0 && (
-      <div class="mt-1 mr-1 hidden sm:inline-block">
+      <div class="hidden sm:block sm:basis-full lg:mt-1 lg:mr-1 lg:flex lg:flex-1 lg:justify-end lg:basis-auto lg:min-w-0">
         <Tags tags={tags} />
       </div>
     )}

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

@@ -69,8 +69,10 @@ const section = 'Case Studies'
         <dl class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-base">
           {
             clientEntry?.data.businessType && (
-              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border border-trim shadow-sm">
-                <dt class="text-xs font-semibold uppercase tracking-wider opacity-60 mb-2">Client</dt>
+              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
+                <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
+                  Client
+                </dt>
                 <dd class="font-bold text-page-inverse leading-tight">
                   {clientEntry.data.businessType}
                 </dd>
@@ -79,8 +81,10 @@ const section = 'Case Studies'
           }
           {
             clientEntry?.data.industry && (
-              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border border-trim shadow-sm">
-                <dt class="text-xs font-semibold uppercase tracking-wider opacity-60 mb-2">Industry</dt>
+              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
+                <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
+                  Industry
+                </dt>
                 <dd class="font-bold text-page-inverse leading-tight">
                   {clientEntry.data.industry}
                 </dd>
@@ -89,8 +93,8 @@ const section = 'Case Studies'
           }
           {
             caseStudy.data.projectType && (
-              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border border-trim shadow-sm">
-                <dt class="text-xs font-semibold uppercase tracking-wider opacity-60 mb-2">
+              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
+                <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
                   Project Type
                 </dt>
                 <dd class="font-bold text-page-inverse leading-tight">
@@ -101,8 +105,10 @@ const section = 'Case Studies'
           }
           {
             caseStudy.data.duration && (
-              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border border-trim shadow-sm">
-                <dt class="text-xs font-semibold uppercase tracking-wider opacity-60 mb-2">Duration</dt>
+              <div class="bg-page-offset p-4 rounded-lg flex flex-col items-start border-2 border-dashed border-trim shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-page-inverse hover:bg-page hover:shadow-md">
+                <dt class="text-sm font-semibold uppercase tracking-wider opacity-60 mb-2">
+                  Duration
+                </dt>
                 <dd class="font-bold text-page-inverse leading-tight">
                   {caseStudy.data.duration}
                 </dd>