---
interface Props {
  title: string;
}

const { title } = Astro.props;

import NavItem from "../components/NavItem.astro";
import Navbar from "../components/Navbar.astro";
import "@fontsource-variable/inter";
import interWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2";
import { ClientRouter } from "astro:transitions";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Samvid's place on the web!" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
    <link
      rel="alternate"
      type="application/rss+xml"
      title="Samvid Konchada"
      href={new URL("rss.xml", Astro.site)}
    />
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      href={interWoff2}
      crossorigin="anonymous"
    />
    <meta name="generator" content={Astro.generator} />
    <ClientRouter />
    <title>{title}</title>
  </head>
  <div class="lg-container">
    <Navbar>
      <NavItem text="home" href="/" />
      <NavItem text="posts" href="/posts" />
      <NavItem text="projects" href="/projects" />
      <NavItem text="contact" href="/contact" />
      <NavItem text="now" href="/now" />
      <NavItem text="rss" href="/rss.xml" newtab />
      <!-- <NavItem text="more" href="more" /> -->
    </Navbar>
    <div class="sm-container">
      <slot />
    </div>
  </div>

  <style is:global>
    html {
      font-size: 17px;

      font-family: "Inter Variable", sans-serif;
      background: #1b1e1a;
      color: #c3d6b2;

      background-image: url("/bg.svg");
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      min-width: 100vw;
      overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #e6fbd4;
    }

    body {
      margin: 0;
    }

    .sm-container {
      margin: 1rem;
      /* padding-top: 1rem; */
    }

    a {
      color: unset;
    }

    [data-icon] {
      color: #9dac93;
    }

    ::selection {
      background: #5f6658;
      color: #d6eac8;
    }

    @media only screen and (min-width: 769px) {
      html {
        font-size: 22px;
      }

      .sm-container {
        margin: 0rem;
      }

      .lg-container {
        margin: 3rem;
      }
    }
  </style>
</html>
