Move passed-away class to global CSS

This commit is contained in:
Maciej Pędzich 2023-09-05 21:27:51 +02:00
parent 4d2045e4e0
commit bd27c6cfdc
3 changed files with 6 additions and 5 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

View File

@ -10,8 +10,9 @@ const { cat } = Astro.props;
<a class="card-link-wrapper" href={`/cats/${cat.id}`}>
<div class="card is-center">
<div class:list={['img-wrapper', { 'passed-away': cat.data.passedAway }]}>
<div class="img-wrapper">
<img
class:list={[{ 'passed-away': cat.data.passedAway }]}
src={cat.data.image.src}
alt={cat.data.image.alt}
loading="lazy"
@ -74,10 +75,6 @@ const { cat } = Astro.props;
object-fit: cover;
}
.passed-away > img {
filter: grayscale(100%);
}
.card span.rip {
display: block;
position: absolute;

View File

@ -22,6 +22,10 @@ button:focus {
outline: var(--color-primary) solid 3px;
}
img.passed-away {
filter: grayscale(100%);
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.col-6-md {
-webkit-box-flex: 0;