reidlab/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make css fruity

Browse source
This commit is contained in:
Reid 2025-03-07 00:44:25 -08:00
parent 638096a8d4
commit ac3cb10634
Signed by: reidlab
GPG key ID: DAF5EAF6665839FD
6 changed files with 98 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/Badges.astro
View file

@ -11,15 +11,15 @@ const badges = await getCollection("badges");
// ugh.
// i wish we could dedupe this, but im not sure how
return <>
{hasHref ? <a href={badge.data.href} target="_blank" rel="noreferrer noopener">
{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 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"/>
? <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"/>
}
</>}
</>;
@ -41,4 +41,16 @@ const badges = await getCollection("badges");
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>