Skip to content

Commit 5732aeb

Browse files
webstackdevwebstackdev
committed
Stylings on case studies list view
1 parent 1e212b1 commit 5732aeb

3 files changed

Lines changed: 46 additions & 29 deletions

File tree

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,20 @@ const section = 'Case Studies'
3434
{
3535
caseStudy.data.cover && (
3636
<div
37-
class="relative aspect-video max-w-3xl mx-auto rounded-2xl overflow-hidden shadow-lg mb-8"
37+
class="relative w-full overflow-hidden mb-8"
38+
style="aspect-ratio: 1564 / 670;"
3839
slot="hero-image"
3940
>
4041
<Picture
4142
src={caseStudy.data.cover}
4243
alt={caseStudy.data.coverAlt}
43-
widths={[640, 960, 1280, 1920]}
44-
sizes="(min-width: 1280px) 80vw, 100vw"
44+
widths={[480, 768, 1024, 1280, 1564]}
45+
sizes="100vw"
4546
formats={['avif', 'webp', 'jpeg']}
4647
layout="constrained"
4748
fit="cover"
4849
position="center"
49-
class="absolute inset-0 h-full w-full object-cover"
50-
loading="eager"
50+
class="absolute inset-0 h-full w-full"
5151
/>
5252
</div>
5353
)

‎src/pages/case-studies/index.astro‎

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { getCollection } from 'astro:content'
33
import { Picture } from 'astro:assets'
4+
import Icon from '@components/Icon/index.astro'
45
import PageLayout from '@layouts/PageLayout.astro'
56

67
const allCaseStudies = await getCollection('caseStudies')
@@ -32,10 +33,13 @@ const path = '/case-studies'
3233
{
3334
sortedCaseStudies.map(caseStudy => {
3435
return (
35-
<article class="bg-content-inverse rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
36-
<a href={`/case-studies/${caseStudy.id}`} class="block h-full">
36+
<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">
37+
<a
38+
href={`/case-studies/${caseStudy.id}`}
39+
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"
40+
>
3741
{caseStudy.data.cover && (
38-
<div class="relative aspect-video overflow-hidden">
42+
<div class="relative aspect-video overflow-hidden shrink-0">
3943
<Picture
4044
src={caseStudy.data.cover}
4145
alt={caseStudy.data.coverAlt}
@@ -51,33 +55,46 @@ const path = '/case-studies'
5155
</div>
5256
)}
5357

54-
<div class="p-6 space-y-4">
55-
<h2 class="text-xl font-semibold leading-tight group-hover:text-primary transition-colors duration-300">
56-
{caseStudy.data.title}
57-
</h2>
58+
<div class="flex flex-1 min-h-0 flex-col justify-between p-6">
59+
<div>
60+
<h3 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
61+
{caseStudy.data.title}
62+
</h3>
5863

59-
{caseStudy.data.description && (
60-
<p class="text-sm leading-relaxed line-clamp-3">
61-
{caseStudy.data.description}
62-
</p>
63-
)}
64+
{caseStudy.data.description && (
65+
<p class="text-content-offset leading-relaxed text-sm">
66+
{caseStudy.data.description}
67+
</p>
68+
)}
69+
</div>
6470

65-
<div class="space-y-3">
71+
<div class="space-y-3 mt-4">
6672
{caseStudy.data.client && (
67-
<span class="inline-block text-sm font-medium text-primary bg-blue-100 px-3 py-1 rounded-full">
73+
<span class="inline-block text-sm font-medium text-primary bg-content-inverse-active px-3 py-1 rounded-full">
6874
Client: {caseStudy.data.client}
6975
</span>
7076
)}
7177

72-
<time
73-
datetime={caseStudy.data.publishDate.toISOString()}
74-
class="block text-sm"
75-
>
76-
{caseStudy.data.publishDate.toLocaleDateString('en-US', {
77-
year: 'numeric',
78-
month: 'long',
79-
})}
80-
</time>
78+
<div class="flex justify-between px-3">
79+
<time
80+
datetime={caseStudy.data.publishDate.toISOString()}
81+
class="block text-sm"
82+
>
83+
{caseStudy.data.publishDate.toLocaleDateString('en-US', {
84+
year: 'numeric',
85+
month: 'long',
86+
})}
87+
</time>
88+
89+
<div class="flex items-center text-primary text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
90+
<span>Learn more</span>
91+
<Icon
92+
icon="exit-right-thin"
93+
size={4}
94+
classes="ml-0.5 mb-0.5 transform group-hover:translate-x-1 transition-transform"
95+
/>
96+
</div>
97+
</div>
8198
</div>
8299
</div>
83100
</a>

‎src/pages/testing/icons.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const description = 'Preview every marker icon to verify styling and availabilit
3434
<div class="flex flex-wrap gap-6">
3535
{iconNames.map(iconName => (
3636
<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">
37-
<Icon icon={iconName} color="primary" />
37+
<Icon icon={iconName} color="primary" size={12} />
3838
<span class="mt-6 w-full border-t border-dashed border-trim pt-4 text-sm font-mono">
3939
{iconName}
4040
</span>

0 commit comments

Comments
 (0)