56 lines
1.8 KiB
Text
56 lines
1.8 KiB
Text
---
|
|
import { getCollection } from "astro:content";
|
|
|
|
const badges = await getCollection("badges");
|
|
---
|
|
|
|
<div class="badges">
|
|
{badges.map((badge) => {
|
|
const hasHref = badge.data.href !== undefined;
|
|
|
|
// ugh.
|
|
// i wish we could dedupe this, but im not sure how
|
|
return <>
|
|
{hasHref ? <a class="badge" href={badge.data.href} target="_blank" rel="noreferrer noopener">
|
|
{typeof badge.data.path !== "string"
|
|
? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
|
|
: <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
|
|
}
|
|
</a> : <>
|
|
{typeof badge.data.path !== "string"
|
|
? <img class="badge" src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
|
|
: <img class="badge" src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
|
|
}
|
|
</>}
|
|
</>;
|
|
})}
|
|
</div>
|
|
<style>
|
|
.badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: .2em;
|
|
image-rendering: pixelated;
|
|
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
|
|
& a {
|
|
width: 88px;
|
|
height: 31px;
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
transition:
|
|
transform 0.15s,
|
|
box-shadow 0.15s,
|
|
background 0.15s;
|
|
}
|
|
.badge:hover {
|
|
transform: scale(1.5);
|
|
box-shadow: 0 0 0.2em var(--foreground);
|
|
background: var(--foreground);
|
|
}
|
|
</style>
|