---
import BaseLayout from "./BaseLayout.astro";
import { site } from "../data/landing-content";
import "@fontsource/syne/700.css";
import "@fontsource/ibm-plex-sans/400.css";
import "@fontsource/ibm-plex-sans/600.css";
import "@fontsource/ibm-plex-mono/400.css";
import "@fontsource/ibm-plex-mono/500.css";
import "../styles/site.css";

interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;
---

<BaseLayout title={title} description={description}>
  <div class="v2">
    <div class="v2__shell v2__shell--legal">
      <header class="v2__header v2__header--legal">
        <p class="v2__site-mark">
          <a href="/" class="v2__home-link">
            <span class="v2__prompt" aria-hidden="true">~</span>
            matthias-meister
          </a>
        </p>
        <nav class="v2__legal-nav" aria-label="Rechtliches">
          <a href="/impressum">Impressum</a>
          <a href="/datenschutz">Datenschutz</a>
        </nav>
      </header>

      <main class="v2__legal">
        <slot />
      </main>

      <footer class="v2__footer v2__footer--legal">
        <p>
          <span class="v2__comment" aria-hidden="true">// </span>
          © {new Date().getFullYear()} {site.name} ·
          <a href="/impressum">Impressum</a> ·
          <a href="/datenschutz">Datenschutz</a>
        </p>
      </footer>
    </div>
  </div>
</BaseLayout>