Initial commit: Astro scaffold, review template, voorstelformulier, screenshot/AI-automatisering

src/components/Cover.astro

@@ -0,0 +1,64 @@
+---
+interface Props {
+  hue: "teal" | "amber" | "rust" | "slate" | "olive";
+  logo?: string;
+  company: string;
+  size?: "thumb" | "hero";
+}
+const { hue, logo, company, size = "thumb" } = Astro.props;
+---
+
+<div class={`cover ${size} hue-${hue}`}>
+  {
+    logo ? (
+      <img src={logo} alt={`${company} logo`} class="logo" />
+    ) : (
+      <svg class="mark" viewBox="0 0 24 24" aria-hidden="true">
+        <use href="#robot-icon" />
+      </svg>
+    )
+  }
+</div>
+
+<style>
+  .cover {
+    --ink-c: var(--hue-teal-ink);
+    --wash-c: var(--hue-teal-wash);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    background:
+      radial-gradient(var(--ink-c) 1px, transparent 1.6px) 0 0 / 12px 12px,
+      var(--wash-c);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .cover.hue-amber { --ink-c: var(--hue-amber-ink); --wash-c: var(--hue-amber-wash); }
+  .cover.hue-rust { --ink-c: var(--hue-rust-ink); --wash-c: var(--hue-rust-wash); }
+  .cover.hue-slate { --ink-c: var(--hue-slate-ink); --wash-c: var(--hue-slate-wash); }
+  .cover.hue-olive { --ink-c: var(--hue-olive-ink); --wash-c: var(--hue-olive-wash); }
+
+  .cover .mark {
+    position: absolute;
+    fill: var(--ink-c);
+    opacity: 0.5;
+  }
+  .cover .logo {
+    position: relative;
+    max-width: 60%;
+    max-height: 60%;
+    object-fit: contain;
+  }
+
+  .cover.thumb { width: 88px; height: 88px; }
+  .cover.thumb .mark { width: 52px; height: 52px; right: -8px; bottom: -8px; }
+  .cover.hero { width: 100%; height: 168px; margin-bottom: 26px; }
+  .cover.hero .mark { width: 110px; height: 110px; right: 18px; bottom: -20px; }
+
+  @media (max-width: 620px) {
+    .cover.thumb { width: 64px; height: 64px; }
+    .cover.thumb .mark { width: 38px; height: 38px; }
+  }
+</style>