asdf

2026-10-04 19:40:32 +02:00
1 parent 933de1c5a8
commit 018f27156c
@@ -1,6 +1,7 @@
 ---
 import { getFeed } from '../../data/insights';
 import { Picture } from 'astro:assets';
+import Field from '../Field.astro';
 import { localePath, t, type Lang } from '../../i18n/ui';
 interface Props { lang: Lang }
 const { lang } = Astro.props;
@@ -20,9 +21,9 @@ const m = ui.insights.mention;
        <li class="insights__item">
          {item.kind === 'post' ? (
            <a class="insights__card" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
-              <Picture
+              {item.entry.data.cover ? <Picture
                src={item.entry.data.cover}
-                alt={item.entry.data.coverAlt}
+                alt={item.entry.data.coverAlt!}
                formats={['avif']}
                fallbackFormat="webp"
                widths={[400, 640, 960]}
@@ -30,13 +31,13 @@ const m = ui.insights.mention;
                loading="lazy"
                decoding="async"
                class="insights__img img-doc"
-              />
+              /> : <Field seed={item.entry.id} class="insights__panel"><span aria-hidden="true">{item.entry.data.category}</span></Field>}
              <p class="small muted">{item.entry.data.category}</p>
              <h3 class="h3">{item.entry.data.title}</h3>
            </a>
          ) : (
            <a class="insights__card" href={localePath(lang, `/insights/${item.entry.id}`)} lang={item.entry.data.lang !== lang ? item.entry.data.lang : undefined}>
-              <p class="insights__panel" aria-hidden="true">{item.entry.data.source}</p>
+              <Field seed={item.entry.id} class="insights__panel"><span aria-hidden="true">{item.entry.data.source}</span></Field>
              <p class="small muted">{m.category(item.entry.data.platform)}</p>
              <h3 class="h3">{item.entry.data.title}</h3>
            </a>
@@ -45,7 +46,7 @@ const m = ui.insights.mention;
      ))}
      <li class="insights__item">
        <a class="insights__card insights__card--event" href={ui.insights.event.href} rel="noopener">
-          <p class="insights__event-when">{ui.insights.event.when}</p>
+          <Field seed={ui.insights.event.href} class="insights__panel"><span>{ui.insights.event.when}</span></Field>
          <p class="small muted">{ui.insights.event.category}</p>
          <h3 class="h3">{ui.insights.event.text}</h3>
        </a>
@@ -77,14 +78,10 @@ const m = ui.insights.mention;
  .insights__card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.12em; }
  .insights__img, :global(.insights__img) { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--space-2); }
  .insights__card h3 { max-width: 18em; }
-  .insights__event-when, .insights__panel {
-    display: flex;
-    align-items: flex-end;
+  /* No picture: a colour field carries the source (or the event date) in large type. */
+  :global(.insights__panel) {
    aspect-ratio: 3 / 2;
-    padding: var(--space-5);
    margin-bottom: var(--space-2);
-    background: var(--paper-deep);
-    color: var(--ink-muted);
    font-size: var(--step-title);
    line-height: var(--leading-title);
    letter-spacing: var(--track-h2);
@@ -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>
@@ -1,8 +1,22 @@
 ---
+import { getImage } from 'astro:assets';
 import { t, type Lang } from '../../i18n/ui';
+import PartnerLogo from './PartnerLogo.astro';
+import incubator from '../../assets/partners/xg-incubator.webp';
+import aloe from '../../assets/partners/xg-aloe.webp';
+import passau from '../../assets/partners/university-of-passau.webp';
 interface Props { lang: Lang }
 const { lang } = Astro.props;
 const ui = t(lang);
+
+/* The partner logos as on ciphercell.de (see PartnerLogo.astro for the two states). `h` balances
+   optical size: the incubator wordmark is long and thin, the other two carry a mark. */
+const roles = ui.proof.partnerRoles;
+const logos = await Promise.all([
+  { name: 'xG-Incubator', role: roles.incubator, src: incubator, h: 'var(--space-5)' },
+  { name: 'xG-ALOE', role: roles.aloe, src: aloe, h: 'var(--space-7)' },
+  { name: lang === 'de' ? 'Universität Passau' : 'University of Passau', role: roles.passau, src: passau, h: 'var(--space-7)' },
+].map(async (l) => ({ ...l, url: (await getImage({ src: l.src, format: 'webp' })).src })));
 ---
 <section class="section proof" aria-labelledby="proof-title">
  <div class="container grid">
@@ -15,6 +29,34 @@ const ui = t(lang);
        </li>
      ))}
    </ul>
+
+    <div class="partners">
+      <p class="small muted partners__label" id="partners-label">{ui.proof.partners}</p>
+      <ul class="partners__list" role="list" aria-labelledby="partners-label">
+        {logos.map((l) => (
+          <li class="partners__item" data-partner>
+            <PartnerLogo name={l.name} src={l.src} url={l.url} h={l.h} />
+          </li>
+        ))}
+      </ul>
+    </div>
+
+    {/* Variant B, for comparison: one column per partner across the full width, with its role.
+        Keep one of the two and delete the other. */}
+    <div class="partners-b">
+      <p class="small muted" id="partners-b-label">{ui.proof.partners}</p>
+      <ul class="partners-b__list" role="list" aria-labelledby="partners-b-label">
+        {logos.map((l) => (
+          <li class="partners-b__item" data-partner>
+            <PartnerLogo name={l.name} src={l.src} url={l.url} h={l.h} />
+            <p class="partners-b__text">
+              <span class="partners-b__name">{l.name}</span>
+              <span class="small partners-b__role">{l.role}</span>
+            </p>
+          </li>
+        ))}
+      </ul>
+    </div>
  </div>
 </section>

@@ -31,9 +73,63 @@ const ui = t(lang);
  .proof__item:last-child { border-bottom: var(--hairline) solid var(--line); }
  .proof__name { font-weight: var(--weight-medium); }
  .proof__body { max-width: 30em; }
+
+  .partners {
+    grid-column: 1 / -1;
+    margin-top: var(--space-9);
+    display: grid;
+    gap: var(--space-5);
+  }
+  .partners__list {
+    display: grid;
+    border-top: var(--hairline) solid var(--line);
+  }
+  .partners__item {
+    display: flex;
+    align-items: center;
+    min-height: var(--space-9);
+    padding: var(--space-5) var(--space-4);
+    border-bottom: var(--hairline) solid var(--line);
+  }
+  /* Hover answers the pointer with the logo's own ground: night, original colours. */
+  [data-partner] { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
+  @media (hover: hover) {
+    [data-partner]:hover { background-color: var(--night); color: var(--ink-on-night); }
+  }
+  @media (prefers-reduced-motion: reduce) { [data-partner] { transition: none; } }
+
+  /* Variant B */
+  .partners-b {
+    grid-column: 1 / -1;
+    margin-top: var(--space-9);
+    display: grid;
+    gap: var(--space-5);
+  }
+  .partners-b__list { display: grid; border-top: var(--hairline) solid var(--line); }
+  .partners-b__item {
+    display: grid;
+    align-content: space-between;
+    gap: var(--space-7);
+    min-height: calc(var(--space-9) * 2.5);
+    padding: var(--space-6) var(--space-5);
+    border-bottom: var(--hairline) solid var(--line);
+  }
+  .partners-b__text { display: grid; gap: var(--space-1); }
+  .partners-b__name { font-weight: var(--weight-medium); }
+  .partners-b__role { color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); }
+  @media (hover: hover) {
+    .partners-b__item:hover .partners-b__role { color: var(--ink-muted-on-night); }
+  }
+
  @media (min-width: 48rem) {
    .proof__title { grid-column: 1 / span 6; }
    .proof__list { grid-column: 7 / span 6; }
    .proof__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--gap); }
+    .partners { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
+    .partners__label { grid-column: 1 / span 6; padding-top: var(--space-5); }
+    .partners__list { grid-column: 7 / span 6; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
+    .partners-b__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--hairline) solid var(--line); }
+    .partners-b__item { border-bottom: 0; }
+    .partners-b__item + .partners-b__item { border-left: var(--hairline) solid var(--line); }
  }
 </style>