asdf

src/components/home/PartnerLogo.astro

@@ -0,0 +1,35 @@
+---
+/* 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>