36 lines
1.5 KiB
Plaintext
36 lines
1.5 KiB
Plaintext
---
|
|
/* One partner logo, two states. At rest: an ink silhouette (the image's alpha is the mask), so a
|
|
logo drawn for a dark ground reads as print on paper. On hover of the surrounding
|
|
`[data-partner]`: the original colours on night, the ground they were drawn for. */
|
|
interface Props { name: string; src: ImageMetadata; url: string; h: string }
|
|
const { name, src, url, h } = Astro.props;
|
|
---
|
|
<span class="logo" style={`--logo: url(${url}); --logo-h: ${h}; --ratio: ${src.width / src.height};`}>
|
|
<span class="logo__ink" aria-hidden="true"></span>
|
|
<img class="logo__original" src={url} alt={name} width={src.width} height={src.height} loading="lazy" decoding="async" />
|
|
</span>
|
|
|
|
<style>
|
|
.logo { display: grid; justify-items: start; width: 100%; }
|
|
/* The set height, or smaller where the column is too narrow for it. */
|
|
.logo > * { grid-area: 1 / 1; width: min(100%, var(--logo-h) * var(--ratio)); height: auto; aspect-ratio: var(--ratio); }
|
|
.logo__ink {
|
|
display: block;
|
|
background: var(--ink);
|
|
mask: var(--logo) left center / contain no-repeat;
|
|
transition: opacity var(--dur-fast) var(--ease);
|
|
}
|
|
/* Kept in the layout for its alt text; shown only on hover. */
|
|
.logo__original {
|
|
opacity: 0;
|
|
transition: opacity var(--dur-fast) var(--ease);
|
|
}
|
|
@media (hover: hover) {
|
|
:global([data-partner]:hover) .logo__ink { opacity: 0; }
|
|
:global([data-partner]:hover) .logo__original { opacity: 1; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.logo__ink, .logo__original { transition: none; }
|
|
}
|
|
</style>
|