feat: update design from ref

2026-06-11 12:16:34 +05:00
parent a5be6d7552
commit 2a209247d3
38 changed files with 1792 additions and 57 deletions
@@ -0,0 +1,57 @@
+---
+import type { Dossier } from '../lib/dossiers'
+import Stamp from './Stamp.astro'
+
+interface Props {
+  d: Dossier
+  rotate?: string
+}
+
+const { d, rotate } = Astro.props as Props
+
+const classColor: Record<string, string> = {
+  'СОВ. СЕКРЕТНО': 'text-primary',
+  'СЕКРЕТНО': 'stamp-ink',
+  'ДСП': 'stamp-ink',
+  'РАССЕКРЕЧЕНО': 'stamp-ink opacity-60',
+}
+---
+
+<a
+  href={`/dossier/${d.slug}`}
+  style={{ rotate }}
+  class="paper group relative flex flex-col gap-3 p-5 transition-all duration-200 hover:-translate-y-1 hover:rotate-0 hover:shadow-[0_26px_50px_-22px_rgba(40,25,15,0.7)]"
+>
+  <span class="tape -top-3 left-1/2 -translate-x-1/2 -rotate-2" aria-hidden="true" />
+
+  <div class="flex items-start justify-between gap-2">
+    <div>
+      <p class="font-mono text-[0.65rem] uppercase tracking-widest text-muted-foreground">
+        Дело № {d.code}
+      </p>
+      <p class="mt-0.5 font-heading text-[0.7rem] uppercase tracking-wider text-primary">
+        {d.category}
+      </p>
+    </div>
+    <Stamp class={`px-1.5 py-0.5 text-[0.55rem] ${classColor[d.classification] ?? ''}`}>
+      {d.classification}
+    </Stamp>
+  </div>
+
+  <h3 class="font-heading text-xl font-700 uppercase leading-none tracking-tight transition-colors group-hover:text-primary">
+    {d.name}
+  </h3>
+  <p class="text-xs italic leading-snug text-muted-foreground">
+    {d.fullName}
+  </p>
+  <p class="text-sm leading-relaxed text-foreground/90">{d.summary}</p>
+
+  <div class="mt-auto flex items-center justify-between border-t border-dashed border-border pt-3">
+    <span class="font-mono text-[0.65rem] uppercase tracking-wider text-muted-foreground">
+      Угроза: <span class="text-foreground">{d.threat}</span>
+    </span>
+    <span class="font-heading text-[0.7rem] font-600 uppercase tracking-wider text-primary opacity-0 transition-opacity group-hover:opacity-100">
+      Открыть дело →
+    </span>
+  </div>
+</a>
@@ -0,0 +1,15 @@
+---
+interface Props {
+  label?: string
+  value?: string
+}
+
+const { label, value } = Astro.props as Props
+---
+
+<div class="grid grid-cols-1 gap-1 border-b border-dashed border-border py-3 sm:grid-cols-[200px_1fr] sm:gap-4">
+  <dt class="font-heading text-xs font-600 uppercase tracking-wider text-muted-foreground">
+    {label}
+  </dt>
+  <dd class="text-sm leading-relaxed text-foreground" set:html={value}></dd>
+</div>
@@ -0,0 +1,18 @@
+---
+interface Props {
+  children?: any
+  class?: string
+}
+
+const { children, class: className } = Astro.props as Props
+---
+
+<span
+  aria-hidden="true"
+  class:list={[
+    'stamp-overlay pointer-events-none select-none px-4 py-2 font-heading text-2xl sm:text-4xl',
+    className,
+  ]}
+>
+  {children}
+</span>
@@ -0,0 +1,21 @@
+---
+interface Props {
+  class?: string
+}
+
+const { class: className } = Astro.props as Props
+---
+
+<div
+  aria-hidden="true"
+  class:list={[
+    'flex h-4 w-full items-center justify-between overflow-hidden px-2 opacity-60',
+    className,
+  ]}
+>
+  {
+    Array.from({ length: 60 }).map(() => (
+      <span class="h-1.5 w-1.5 shrink-0 rounded-full bg-background shadow-[inset_0_1px_2px_rgba(0,0,0,0.35)]" />
+    ))
+  }
+</div>
@@ -0,0 +1,9 @@
+---
+interface Props {
+  children?: any
+}
+
+const { children } = Astro.props as Props
+---
+
+<span class="redacted px-1">{children}</span>
@@ -0,0 +1,17 @@
+---
+interface Props {
+  children?: any
+  index: string
+}
+
+const { children, index } = Astro.props as Props
+---
+
+<h2 class="mb-4 flex items-baseline gap-3 font-heading text-lg font-700 uppercase tracking-wide">
+  <span class="flex h-7 min-w-7 items-center justify-center bg-primary px-1.5 text-sm text-primary-foreground">
+    {index}
+  </span>
+  <span class="flex-1 border-b border-foreground/30 pb-1">
+    {children}
+  </span>
+</h2>
@@ -0,0 +1,16 @@
+<footer class="mt-16 border-t border-foreground/25 bg-card/60">
+  <div class="mx-auto max-w-5xl px-4 py-8 sm:px-6">
+    <div class="flex flex-col justify-between gap-4 text-[0.7rem] uppercase tracking-wider text-muted-foreground sm:flex-row">
+      <p>
+        © <span class="text-foreground">Дачно-Наблюдательный Трибунал №7</span>
+        · Кооператив «Заря-9»
+      </p>
+      <p>Форма А-13 · Хранить вечно · Не выносить за периметр</p>
+    </div>
+    <p class="mt-4 max-w-2xl text-[0.7rem] leading-relaxed text-muted-foreground">
+      Все материалы являются художественным вымыслом. Любое совпадение с
+      реальными грядками, соседями и небесными телами случайно. Разглашение
+      преследуется лишением компоста.
+    </p>
+  </div>
+</footer>
@@ -0,0 +1,27 @@
+<header class="sticky top-0 z-30 border-b border-foreground/25 bg-card/85 backdrop-blur-sm shadow-[0_2px_12px_-8px_rgba(40,25,15,0.6)]">
+  <div class="mx-auto flex max-w-5xl flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+    <a href="/" class="flex items-center gap-3">
+      <img
+        src="/emblem.png"
+        alt="Эмблема Трибунала"
+        width="52"
+        height="52"
+        class="h-12 w-12 mix-blend-multiply"
+      />
+      <div class="leading-tight">
+        <p class="font-heading text-base font-700 uppercase tracking-wide sm:text-lg">
+          Архив ДНТ-7
+        </p>
+        <p class="text-[0.65rem] uppercase tracking-widest text-muted-foreground">
+          Дачно-Наблюдательный Трибунал
+        </p>
+      </div>
+    </a>
+    <nav class="flex flex-wrap items-center gap-x-5 gap-y-1 font-heading text-xs font-600 uppercase tracking-wider">
+      <a href="/" class="relative text-foreground/80 transition-colors hover:text-primary">Картотека</a>
+      <a href="/dossier/directive-kompot" class="relative text-foreground/80 transition-colors hover:text-primary">Уставы</a>
+      <a href="/dossier/lopata-bs-3000" class="relative text-foreground/80 transition-colors hover:text-primary">Инвентарь</a>
+      <a href="/protocol" class="relative text-foreground/80 transition-colors hover:text-primary">Протокол</a>
+    </nav>
+  </div>
+</header>
@@ -0,0 +1,21 @@
+---
+interface Props {
+  children?: any
+  class?: string
+  skew?: boolean
+  variant?: 'red' | 'ink'
+}
+
+const { children, class: className, skew = true, variant = 'red' } = Astro.props as Props
+---
+
+<span
+  class:list={[
+    'stamp px-2 py-1 text-[0.65rem] sm:text-xs',
+    variant === 'ink' && 'stamp-ink',
+    skew && 'stamp-skew',
+    className,
+  ]}
+>
+  {children}
+</span>