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

const { title, description } = Astro.props;

import { ViewTransitions } from "astro:transitions";
import ReplacementSwap from "astro-vtbot/components/ReplacementSwap.astro";

import Sidebar from "../components/Sidebar.astro";
import Intro from "../components/Intro.astro";

import "modern-normalize";
import "../styles/main.css";
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="generator" content={Astro.generator} />
        <meta name="theme-color" content="dark">
        <link rel="shortcut icon" href="/favicon.gif" />
        <link rel="sitemap" href="/sitemap-index.xml" />
        <title>reidlab's site - {title}</title>
        <meta name="description" content={description} />

        <meta property="og:title" content={`reidlab's site - ${title}`} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content="/preview.png" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={Astro.url.href} />

        <!-- view transitions. actually fucking magical! -->
        <!-- doesn't work without js, maybe add noscript element? -->
        <ViewTransitions />
        <ReplacementSwap />
    </head>
    <body>
        <Intro />

        <Sidebar />
        <div class="container">
            <main
                data-vtbot-replace="main"
                transition:name="main"
                transition:animate="initial"
            >
                <slot />
            </main>
        </div>
    </body>
</html>
<style is:global>
    body {
        display: grid;
        grid-template-columns: min-content auto;
        grid-template-rows: auto auto;
        grid-auto-flow: row;
    }

    /* mobile */
    @media screen and (max-width: 600px) {
        body {
            grid-template-columns: auto auto;
            grid-template-rows: min-content auto;
            grid-auto-flow: column;
        }
    }

    .container {
        background: linear-gradient(
                275deg,
                #f38ba8,
                #eba0ac 30%,
                transparent 0%
            ),
            linear-gradient(
                260deg,
                #74c7ec,
                #89b4fa 45%,
                transparent 0%
            ),
            linear-gradient(
                270deg,
                #fab387,
                #f9e2af 55%,
                transparent 0%
            ),
            linear-gradient(
                265deg,
                #a6e3a1,
                #94e2d5 70%,
                transparent 0%),
            #181818;
        background-attachment: fixed;
    }

    main {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 1em;
        padding: 1em;
        min-height: 100vh;
        height: 100%;
        width: 100%;
    }
</style>