maciejpedzich/cats-album
1
0
Fork 0
mirror of https://github.com/maciejpedzich/cats-album.git synced 2024-09-19 18:36:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Move passed-away class to global CSS

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/ryanfurrer-skutch.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

7
src/components/CatCard.astro
View File

@ -10,8 +10,9 @@ 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:list={['img-wrapper', { 'passed-away': cat.data.passedAway }]}> <div class="img-wrapper">
<img <img
class:list={[{ 'passed-away': cat.data.passedAway }]}
src={cat.data.image.src} src={cat.data.image.src}
alt={cat.data.image.alt} alt={cat.data.image.alt}
loading="lazy" loading="lazy"
@ -74,10 +75,6 @@ const { cat } = Astro.props;
object-fit: cover; object-fit: cover;
} }
.passed-away > img {
filter: grayscale(100%);
}
.card span.rip { .card span.rip {
display: block; display: block;
position: absolute; position: absolute;

4
src/styles/global.css
View File

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