MinPluto/Polestar
1
Fork 0
Code Issues Pull requests Activity

Add category

Browse source
This commit is contained in:
Korbs 2024-09-06 23:46:03 -04:00
parent 3a55534dbb
commit 348dfcca7e
1 changed files with 56 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/Category.astro Normal file
View file

@ -0,0 +1,56 @@
---
// Properties
const {
Name,
Link,
Thumbnail,
Platform
} = Astro.props
---
<a href={Link} class="category-card">
{Platform ?
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
:
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></svg></span>
}
<img onload="this.style.opacity = '1'" src={Thumbnail}/>
<p>{Name}</p>
</a>
<style lang="scss">
.category-card {
position: relative;
color: white;
text-decoration: none;
&::before {
content: "";
position: absolute;
backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 6px;
}
img {
border-radius: 6px;
height: 100%;
width: 100%;
opacity: 0;
}
p {
font-size: 32px;
font-weight: bold;
margin: 24px;
position: absolute;
bottom: 0px;
}
span {
fill: white;
width: 32px;
position: absolute;
margin: 24px;
}
}
</style>