---
import "./reset.css";
import Head from "../components/Head.astro";
import Nav from "../components/Nav.astro";
import type { Link } from "../components/Nav.astro";
export interface Props {
  title?: string;
  description?: string;
}

const { title, description } = Astro.props;
const links: Link[] = [
  {
    url: "/",
    icon: "home",
  },
  {
    url: "https://ayos.blog",
    icon: "blog",
    newTab: true,
  },
  {
    url: "https://ayco.io/@ayo",
    icon: "mastodon",
    newTab: true,
  },
  {
    url: "https://ayco.io/github",
    icon: "github",
    newTab: true,
  },
];
---

<!DOCTYPE html>
<html lang="en">
  <Head title={title} description={description} />

  <body>
    <Nav links={links} />
    <slot />
    <style>
      :root {
        --content-width: 700px;
        --font-size-sm: clamp(0.75rem, 0.20vw + 0.66rem, 0.8rem);
        --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
        --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
        --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);

        --color-text: hsl(12, 5%, 4%);
        --color-bg: hsl(10, 21%, 95%);
        --color-border: hsl(17, 24%, 90%);
        --color-link: var(--color-brand-blue-2);

        --color-brand-blue-1: #3054bf;
        --color-brand-blue-2: #203880;
        --color-brand-blue-3: #416fff;
        --color-brand-blue-4: #101c40;
        --color-brand-blue-5: #3964e6;

        --color-brand-complement: orange;

        --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
      }

      html {
        font-family: system-ui, sans-serif;
        font-size: var(--font-size-base);
        color: var(--color-text);
        background-color: var(--color-bg);
      }

      body {
        margin: 0;
      }

      @keyframes pulse {
        0%,
        100% {
          background-position-y: 0%;
        }
        50% {
          background-position-y: 80%;
        }
      }
    </style>

    <style is:global>
      main {
        margin: auto;
        max-width: var(--content-width);
        padding: 1em;
      }

      h1 {
        font-size: var(--font-size-xl);
      }

      h2 {
        font-size: var(--font-size-lg);
      }

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

      a {
        font-weight: 900;
        color: var(--color-link);
        border-radius: 0.4rem;
      }

      p,
      img,
      table,
      ul {
        margin: 1em 0;
        font-size: var(--font-size-base);
      }

      .text-gradient {
        font-weight: 900;
        background-image: var(--ayo-gradient);
        animation: pulse 4s ease-in-out infinite;
        background-size: 500% 500%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 100% 200%;
        background-position-y: 100%;
        border-radius: 0.4rem;
      }
    </style>
  </body>
</html>
