82 lines
1.5 KiB
Plaintext
82 lines
1.5 KiB
Plaintext
|
---
|
||
|
|
const { item } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-container">
|
||
|
|
<div class="card__illustration">
|
||
|
|
<img
|
||
|
|
src={item.quickImage}
|
||
|
|
width="150"
|
||
|
|
height="150"
|
||
|
|
alt=""
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<a href={`#${item.id}`} class="card__link clean-link">{item.quickTitle}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.card {
|
||
|
|
container-name: card;
|
||
|
|
container-type: inline-size;
|
||
|
|
inline-size: 100%;
|
||
|
|
block-size: 100%;
|
||
|
|
}
|
||
|
|
.card-container {
|
||
|
|
padding: var(--space-xs-s);
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
block-size: 100%;
|
||
|
|
flex-flow: column;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
gap: var(--space-xs);
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: var(--color-light-blue);
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
.card:focus-within {
|
||
|
|
outline: dotted 3px var(--color-blue);
|
||
|
|
}
|
||
|
|
.card:focus-within .card__link:focus {
|
||
|
|
outline: dotted 3px transparent;
|
||
|
|
}
|
||
|
|
.card__link {
|
||
|
|
font-weight: normal;
|
||
|
|
text-decoration: none;
|
||
|
|
color: currentColor;
|
||
|
|
}
|
||
|
|
.card__link:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.card__link::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
}
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
.card {
|
||
|
|
transition: all ease 0.2s;
|
||
|
|
}
|
||
|
|
.card:hover {
|
||
|
|
transform: translateY(-10px);
|
||
|
|
box-shadow: var(--shadow-elevation-high);
|
||
|
|
}
|
||
|
|
.card:focus-within {
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@container card (min-width: 20rem) {
|
||
|
|
.card-container {
|
||
|
|
flex-direction: row;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.card__illustration {
|
||
|
|
max-inline-size: 100px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|