firq-dev-website/src/components/favouriteCard.astro

90 lines
1.7 KiB
Text
Raw Normal View History

---
export interface Props {
name: string;
origin: string;
image: string;
}
const {image, origin, name } = Astro.props;
const img: string = `/favourites/${image}.webp`;
---
<article>
<div class="heading">{name}</div>
<img src={img} alt={name}>
<h2 class="subtext">
{origin}
</h2>
</article>
<style>
.heading {
display: flex;
height: 4rem;
font-size: 22px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
font-weight: bold;
margin: 0px;
justify-content: center;
align-items: center;
}
.servants-container {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
align-content: center;
}
article:hover {
transform: scale(var(--hover-scale));
}
article {
display: flex;
flex-wrap: wrap;
flex-direction: column;
2023-03-05 21:58:01 +01:00
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
width: 40%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
}
article>img {
padding: 0.25em;
width:120px;
height:auto;
}
@media(min-width: 512px) {
article {
padding: 10px 10px;
width: auto;
height: auto;
}
article>img {
padding: 1.5em;
width: 200px;
height: auto;
}
}
.subtext {
color: white;
font-size: 16px;
font-weight: 600;
margin: 5;
line-height: 20px;
}
</style>