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 cat's photo above its and owner's name

Browse Source
This commit is contained in:
Maciej Pędzich 2023-09-03 04:00:58 +02:00
parent 73ccb2fa70
commit 7d31433de9
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/CatCard.astro
View File

@ -10,16 +10,17 @@ 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">
<h4>{cat.data.name}</h4>
<p>{cat.data.owner.name}</p>
<div class="img-wrapper"> <div class="img-wrapper">
<img <img
src={cat.data.image.src} src={cat.data.image.src}
alt={cat.data.image.alt} alt={cat.data.image.alt}
loading="lazy" loading="lazy"
decoding="async" decoding="async"
height="250"
/> />
</div> </div>
<h3>{cat.data.name}</h3>
<p>{cat.data.owner.name}</p>
</div> </div>
</a> </a>
@ -32,8 +33,8 @@ const { cat } = Astro.props;
opacity: 1; opacity: 1;
} }
.card-link-wrapper:focus { a:focus {
outline: var(--color-primary) solid 5px; outline-width: 5px;
} }
.card { .card {
@ -42,11 +43,17 @@ const { cat } = Astro.props;
flex-direction: column; flex-direction: column;
} }
.card h4 { .card h3 {
margin: 1.25rem 0 0.25rem 0; margin-top: 0.75rem;
margin-bottom: 0;
}
.card p {
margin-bottom: 1.25rem;
} }
.img-wrapper { .img-wrapper {
width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -54,9 +61,9 @@ const { cat } = Astro.props;
.card img { .card img {
display: block; display: block;
width: 100%; width: 100%;
max-height: 300px; max-height: 250px;
object-fit: cover; object-fit: cover;
transition: transform; transition-property: transform;
transition-duration: 300ms; transition-duration: 300ms;
} }