---
import sakura from "../assets/sakura.png";

interface Props {
  title: string;
}

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <title>{title}</title>
    <meta name="description" content="a self-taught code archmage" />
    <meta name="author" content="artie" />
    <meta name="theme-color" content="#f38ba8" />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="artie.moe" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content="a self-taught code archmage" />
    <meta property="og:url" content="https://artie.moe/" />
    <meta property="og:image" content={sakura.src} />

    <link rel="icon" href={sakura.src} />
    <link rel="apple-touch-icon" href={sakura.src} />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet" />
  </head>
  <body>
    <slot />
  </body>
</html>
<style is:global>
  body {
    @apply bg-ctp-base h-screen text-ctp-text flex flex-col justify-center items-center;
  }
</style>
