66 lines
1.2 KiB
Plaintext
66 lines
1.2 KiB
Plaintext
---
|
|
import type { Post } from '../../lib/directus';
|
|
import { directus_url } from '../../lib/directus';
|
|
|
|
interface Props {
|
|
posts: Post;
|
|
}
|
|
|
|
const post: Post = Astro.props.posts;
|
|
---
|
|
|
|
<a class="card" href={`/projects/${post.slug}`}>
|
|
<span class="title">{post.title}</span>
|
|
<img src={`${directus_url}/assets/${post.image}?width=500`} alt={post.image_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>
|