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

85 lines
1.5 KiB
Text
Raw Normal View History

---
export interface Props {
2023-03-09 11:44:18 +01:00
name: string
origin: string
image: string
link: string
}
const { link, image, origin, name } = Astro.props
const img: string = `/assets/favourites/${image}.webp`
---
<a href={link} target="_blank" rel="noopener noreferrer">
2023-03-11 00:18:33 +01:00
<div class="heading">{name}</div>
<img src={img} alt={name} />
<h2 class="subtext">
{origin}
</h2>
</a>
<style>
2023-03-09 11:44:18 +01:00
.heading {
display: flex;
height: 4rem;
2023-07-06 19:41:28 +02:00
font-size: 24px;
2023-03-09 11:44:18 +01:00
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
font-weight: bold;
margin: 0px;
justify-content: center;
align-items: center;
}
2023-03-11 00:18:33 +01:00
a:hover {
2023-03-09 11:44:18 +01:00
transform: scale(var(--hover-scale));
}
2023-03-11 00:18:33 +01:00
a {
2023-07-06 19:41:28 +02:00
border-radius: 1rem;
2023-03-09 11:44:18 +01:00
display: flex;
flex-wrap: wrap;
flex-direction: column;
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);
2023-03-11 00:18:33 +01:00
text-decoration: none;
2023-03-09 11:44:18 +01:00
}
2023-03-11 00:18:33 +01:00
a > img {
2023-07-06 19:41:28 +02:00
padding: 0px 0.25em;
2023-03-11 00:30:10 +01:00
width: 90%;
2023-03-09 11:44:18 +01:00
height: auto;
}
2023-03-09 11:44:18 +01:00
@media (min-width: 512px) {
2023-03-11 00:18:33 +01:00
a {
2023-03-09 11:44:18 +01:00
padding: 10px 10px;
width: auto;
height: auto;
}
2023-03-11 00:18:33 +01:00
a > img {
2023-07-06 19:41:28 +02:00
padding: 0px 1.5em;
2023-03-09 11:44:18 +01:00
width: 200px;
height: auto;
}
2023-03-09 11:44:18 +01:00
}
.subtext {
color: white;
font-size: 16px;
font-weight: 600;
margin: 5;
line-height: 20px;
}
</style>