---
import config from "../../config.yaml";
import Lightbox from "../components/Lightbox.astro";
import Sidebar from "../components/Sidebar.astro";

const { title, background } = config;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <Lightbox />
    <div
      class="md:fixed md:left-0 md:top-0 w-full md:w-96 bg-[#ffffff59] h-full pt-4 z-[1] box-border text-center"
    >
      <Sidebar />
    </div>
    <div
      class="container float-none md:float-right md:container md:box-border transition-all"
    >
      <slot />
    </div>
  </body>
</html>

<style define:vars={{ background: `url(${background})` }}>
  @media screen(md) {
    .container {
      width: calc(100% - 25rem);
    }
  }

  body {
    font-family: system-ui, sans-serif;
    background: var(--background);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    color: whitesmoke;
  }
  /*
   :root {
		--accent: 136, 58, 234;
		--accent-light: 224, 204, 250;
		--accent-dark: 49, 10, 101;
		--accent-gradient: linear-gradient(
			45deg,
			rgb(var(--accent)),
			rgb(var(--accent-light)) 30%,
			white 60%
		);
	}

	code {
		font-family:
			Menlo,
			Monaco,
			Lucida Console,
			Liberation Mono,
			DejaVu Sans Mono,
			Bitstream Vera Sans Mono,
			Courier New,
			monospace;
	} */
</style>
