mirror of
https://github.com/maciejpedzich/cats-album.git
synced 2024-11-09 23:03:02 +01:00
Add styling for cards of cats that passed away
This commit is contained in:
parent
00d9590088
commit
e520b7dd99
@ -10,7 +10,7 @@ const { cat } = Astro.props;
|
|||||||
|
|
||||||
<a class="card-link-wrapper" href={`/cats/${cat.id}`}>
|
<a class="card-link-wrapper" href={`/cats/${cat.id}`}>
|
||||||
<div class="card is-center">
|
<div class="card is-center">
|
||||||
<div class="img-wrapper">
|
<div class:list={['img-wrapper', { 'passed-away': cat.data.passedAway }]}>
|
||||||
<img
|
<img
|
||||||
src={cat.data.image.src}
|
src={cat.data.image.src}
|
||||||
alt={cat.data.image.alt}
|
alt={cat.data.image.alt}
|
||||||
@ -19,6 +19,7 @@ const { cat } = Astro.props;
|
|||||||
width="350"
|
width="350"
|
||||||
height="250"
|
height="250"
|
||||||
/>
|
/>
|
||||||
|
{cat.data.passedAway && <span class="rip">Rest In Peace</span>}
|
||||||
</div>
|
</div>
|
||||||
<h3>{cat.data.name}</h3>
|
<h3>{cat.data.name}</h3>
|
||||||
<p>{cat.data.owner.name}</p>
|
<p>{cat.data.owner.name}</p>
|
||||||
@ -60,6 +61,8 @@ const { cat } = Astro.props;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.img-wrapper {
|
.img-wrapper {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
padding-bottom: 0.6rem;
|
padding-bottom: 0.6rem;
|
||||||
@ -70,4 +73,20 @@ const { cat } = Astro.props;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.passed-away > img {
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card span.rip {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: calc(100% - 4rem);
|
||||||
|
margin: 0 2rem;
|
||||||
|
padding: 0.2rem;
|
||||||
|
background-color: #000;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -58,6 +58,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
Some ideas: nicknames, age, breed(s), where you adopted this cat
|
Some ideas: nicknames, age, breed(s), where you adopted this cat
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="passedAway">Check this box if your cat has passed away</label>
|
||||||
|
<input type="checkbox" name="passedAway" />
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="name">Owner's name</label>
|
<label for="name">Owner's name</label>
|
||||||
<input type="text" name="ownerName" required />
|
<input type="text" name="ownerName" required />
|
||||||
|
Loading…
Reference in New Issue
Block a user