feat: build leuschke.site with pixel design system, vue 3, tailwind

src/views/ImpressumView.vue

@@ -0,0 +1,36 @@
+<template>
+  <section class="max-w-[960px] mx-auto px-6 pt-24 pb-16">
+    <h1 class="text-2xl text-olive leading-[2] mb-4 font-pixel">{{ t('impressum.title') }}</h1>
+    <div class="section max-w-2xl">
+      <h2 class="text-[10px] text-olive font-pixel mb-4">{{ t('impressum.info.title') }}</h2>
+      <div class="space-y-3 text-sm text-beige-dark leading-[2]">
+        <p><strong class="text-olive">{{ t('impressum.name') }}</strong></p>
+        <p>{{ t('impressum.company') }}</p>
+        <p>{{ t('impressum.email') }}</p>
+      </div>
+
+      <h3 class="text-[8px] text-olive font-pixel mt-8 mb-3">Online-Streitbeilegung</h3>
+      <p class="text-sm text-beige-dark leading-[2]">
+        Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung bereit:
+        <a href="https://ec.europa.eu/consumers/odr" class="text-orange underline" target="_blank" rel="noopener">https://ec.europa.eu/consumers/odr</a>
+      </p>
+      <p class="text-sm text-beige-dark leading-[2]">
+        Wir sind nicht verpflichtet und nicht bereit, an einem Streitbeteiligungsverfahren vor einer
+        Verbraucherschlichtungsstelle teilzunehmen.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { t } from '../i18n'
+</script>
+
+<style scoped>
+.section {
+  border: 4px solid var(--color-olive);
+  padding: 2rem;
+  background: var(--color-beige);
+}
+[data-theme="dark"] .section { background: var(--color-beige-dark); }
+</style>