65 lines
1.2 KiB
Plaintext
65 lines
1.2 KiB
Plaintext
---
|
|
import type { CollectionEntry } from 'astro:content';
|
|
|
|
interface Props {
|
|
project: CollectionEntry<'work'>;
|
|
}
|
|
|
|
const { data, slug } = Astro.props.project;
|
|
---
|
|
|
|
<a class="card" href={`/work/${slug}`}>
|
|
<span class="title">{data.title}</span>
|
|
<img src={data.img} alt={data.img_alt || ''} loading="lazy" decoding="async" />
|
|
</a>
|
|
|
|
<style>
|
|
.card {
|
|
display: grid;
|
|
grid-template: auto 1fr / auto 1fr;
|
|
height: 11rem;
|
|
background: var(--gradient-subtle);
|
|
border: 1px solid var(--gray-800);
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
text-decoration: none;
|
|
font-family: var(--font-brand);
|
|
font-size: var(--text-lg);
|
|
font-weight: 500;
|
|
transition: box-shadow var(--theme-transition);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.title {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
z-index: 1;
|
|
margin: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--gray-999);
|
|
color: var(--gray-200);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
img {
|
|
grid-area: 1 / 1 / 3 / 3;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
.card {
|
|
height: 22rem;
|
|
border-radius: 1.5rem;
|
|
}
|
|
|
|
.title {
|
|
border-radius: 0.9375rem;
|
|
}
|
|
}
|
|
</style>
|