mirror of
https://github.com/maciejpedzich/cats-album.git
synced 2025-04-06 13:51:11 +02:00
88 lines
1.5 KiB
Plaintext
88 lines
1.5 KiB
Plaintext
---
|
|
import { type CollectionEntry } from 'astro:content';
|
|
|
|
export interface Props {
|
|
cat: CollectionEntry<'cats'>;
|
|
}
|
|
|
|
const { cat } = Astro.props;
|
|
---
|
|
|
|
<a class="card-link-wrapper" href={`/cats/${cat.id}`}>
|
|
<div class="card is-center">
|
|
<div class="image-wrapper">
|
|
<img
|
|
class:list={[{ 'rip-image': cat.data.passedAway }]}
|
|
src={cat.data.image.src}
|
|
alt={cat.data.image.alt}
|
|
loading="lazy"
|
|
decoding="sync"
|
|
width="350"
|
|
height="250"
|
|
/>
|
|
{cat.data.passedAway && <div class="rip-text">Rest In Peace</div>}
|
|
</div>
|
|
<h3>{cat.data.name}</h3>
|
|
<p>{cat.data.owner.name}</p>
|
|
</div>
|
|
</a>
|
|
|
|
<style>
|
|
.card-link-wrapper {
|
|
color: var(--font-color);
|
|
}
|
|
|
|
.card-link-wrapper:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-link-wrapper:focus {
|
|
outline-width: 5px;
|
|
}
|
|
|
|
.card {
|
|
margin: 0.5rem 0;
|
|
padding: 0;
|
|
flex-direction: column;
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 10px var(--color-grey);
|
|
}
|
|
|
|
.image-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 2rem 2rem 0.6rem 2rem;
|
|
}
|
|
|
|
.rip-text {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: calc(100% - 4rem);
|
|
margin: 0 2rem 0.5rem 2rem;
|
|
padding: 0.25rem;
|
|
background-color: #000;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.card img {
|
|
display: block;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.card h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card p {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
</style>
|