Initial commit 🚀

src/components/verifier/Cards.astro

@@ -0,0 +1,55 @@
+---
+import GridObject from '../home/GridObject.astro';
+import { t, type Lang } from '../../i18n/ui';
+interface Props { lang: Lang }
+const { lang } = Astro.props;
+const ui = t(lang);
+const objects = ['steps', 'nested', 'stack'] as const;
+---
+<section class="section vcards" aria-label={lang === 'de' ? 'Eigenschaften' : 'Properties'}>
+  <div class="container">
+    <ul class="vcards__list" role="list">
+      {ui.verifier.cards.map((card, i) => (
+        <li class="vcards__item">
+          <h2 class="vcards__title">{card.title}</h2>
+          <GridObject kind={objects[i]} class="vcards__object" />
+          <p class="muted vcards__body">{card.body}</p>
+        </li>
+      ))}
+    </ul>
+  </div>
+</section>
+
+<style>
+  .vcards__list { display: grid; gap: var(--gap); }
+  .vcards__item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    /* Title, then the drawing in the row that takes the slack, then the body at the bottom. */
+    grid-template-rows: auto 1fr auto;
+    gap: var(--space-6);
+    padding: var(--space-6) var(--space-6) var(--space-7);
+    background: var(--paper-deep);
+  }
+  .vcards__title {
+    font-size: var(--step-title);
+    line-height: var(--leading-title);
+    letter-spacing: var(--track-h2);
+    font-weight: var(--weight-regular);
+    min-height: calc(2 * var(--leading-title) * 1em);
+    text-wrap: balance;
+    hyphens: auto;
+  }
+  .vcards__item :global(.vcards__object) { width: 100%; max-width: 14rem; justify-self: center; align-self: center; }
+  /* Hovering a card lets its grid recede, so the shape that carries the idea stands alone. */
+  @media (hover: hover) {
+    .vcards__item:hover {
+      --object-scale: 1.03;
+      --object-grid: 0.26;
+    }
+  }
+  .vcards__body { max-width: 26em; }
+  @media (min-width: 48rem) {
+    .vcards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  }
+</style>