<script lang="ts">
  interface Props {
    data: {};
    children: any;
  }
  let { data, children }: Props = $props();
  // $inspect("l",data);
  let theme = $state("green");
  const THEMES = ["blue", "yellow", "orange", "brown", "green"];

  function change_theme() {
    let index = THEMES.findIndex((color) => theme == color);
    theme = THEMES[(index + 1) % THEMES.length];
  }
</script>

<svelte:head>
  <title>Sludge and Link</title>
  <meta name="description" content="Sludge's internet facing spot" />
</svelte:head>

<div id="buddy" class={theme}>
  <nav>
    <a href="/">Sludge</a>
    <button onclick={change_theme}>Cycle Color</button>
    <a href="/fest">Fest</a>
    <a href="/pork">Pork</a>
    <!-- <a href="/blag">Blag</a> -->
  </nav>

  <main>
    {@render children()}
  </main>
</div>

<style lang="scss">
  :root {
    --blue: 324;
    --yellow: 77;
    --orange: 188;
    --brown: 42;
    --green: 142;
    --green-42: oklch(0.42 0.042 142);
    --br: 0.375rem;
    --primary: var(--green);

    .blue {
      --primary: var(--blue);
      --primary-1: oklch(0.91 0.046 var(--primary));
      --primary-2: oklch(0.843 0.083 var(--primary));
      --primary-3: oklch(0.777 0.122 var(--primary));
      --primary-4: oklch(0.71 0.163 var(--primary));
      --primary-5: oklch(0.643 0.179 var(--primary));
      --primary-6: oklch(0.577 0.161 var(--primary));
      --primary-7: oklch(0.51 0.142 var(--primary));
      --primary-8: oklch(0.443 0.124 var(--primary));
      --primary-9: oklch(0.377 0.105 var(--primary));
      --primary-10: oklch(0.31 0.086 var(--primary));
      --primary-11: oklch(0.243 0.068 var(--primary));
      --primary-12: oklch(0.177 0.049 var(--primary));
      --primary-13: oklch(0.11 0.031 var(--primary));
    }
    .yellow {
      --primary: var(--yellow);
      --primary-1: oklch(0.91 0.046 var(--primary));
      --primary-2: oklch(0.843 0.083 var(--primary));
      --primary-3: oklch(0.777 0.122 var(--primary));
      --primary-4: oklch(0.71 0.163 var(--primary));
      --primary-5: oklch(0.643 0.179 var(--primary));
      --primary-6: oklch(0.577 0.161 var(--primary));
      --primary-7: oklch(0.51 0.142 var(--primary));
      --primary-8: oklch(0.443 0.124 var(--primary));
      --primary-9: oklch(0.377 0.105 var(--primary));
      --primary-10: oklch(0.31 0.086 var(--primary));
      --primary-11: oklch(0.243 0.068 var(--primary));
      --primary-12: oklch(0.177 0.049 var(--primary));
      --primary-13: oklch(0.11 0.031 var(--primary));
    }
    .orange {
      --primary: var(--brown);
      --primary-1: oklch(0.91 0.046 var(--primary));
      --primary-2: oklch(0.843 0.083 var(--primary));
      --primary-3: oklch(0.777 0.122 var(--primary));
      --primary-4: oklch(0.71 0.163 var(--primary));
      --primary-5: oklch(0.643 0.179 var(--primary));
      --primary-6: oklch(0.577 0.161 var(--primary));
      --primary-7: oklch(0.51 0.142 var(--primary));
      --primary-8: oklch(0.443 0.124 var(--primary));
      --primary-9: oklch(0.377 0.105 var(--primary));
      --primary-10: oklch(0.31 0.086 var(--primary));
      --primary-11: oklch(0.243 0.068 var(--primary));
      --primary-12: oklch(0.177 0.049 var(--primary));
      --primary-13: oklch(0.11 0.031 var(--primary));
    }
    .brown {
      --primary: var(--brown);
      --primary-1: oklch(0.91 0.046 var(--primary));
      --primary-2: oklch(0.843 0.083 var(--primary));
      --primary-3: oklch(0.777 0.122 var(--primary));
      --primary-4: oklch(0.71 0.163 var(--primary));
      --primary-5: oklch(0.643 0.179 var(--primary));
      --primary-6: oklch(0.577 0.161 var(--primary));
      --primary-7: oklch(0.51 0.142 var(--primary));
      --primary-8: oklch(0.443 0.124 var(--primary));
      --primary-9: oklch(0.377 0.105 var(--primary));
      --primary-10: oklch(0.31 0.086 var(--primary));
      --primary-11: oklch(0.243 0.068 var(--primary));
      --primary-12: oklch(0.177 0.049 var(--primary));
      --primary-13: oklch(0.11 0.031 var(--primary));
    }
    .green {
      --primary: var(--green);
      --primary-1: oklch(0.91 0.046 var(--primary));
      --primary-2: oklch(0.843 0.083 var(--primary));
      --primary-3: oklch(0.777 0.122 var(--primary));
      --primary-4: oklch(0.71 0.163 var(--primary));
      --primary-5: oklch(0.643 0.179 var(--primary));
      --primary-6: oklch(0.577 0.161 var(--primary));
      --primary-7: oklch(0.51 0.142 var(--primary));
      --primary-8: oklch(0.443 0.124 var(--primary));
      --primary-9: oklch(0.377 0.105 var(--primary));
      --primary-10: oklch(0.31 0.086 var(--primary));
      --primary-11: oklch(0.243 0.068 var(--primary));
      --primary-12: oklch(0.177 0.049 var(--primary));
      --primary-13: oklch(0.11 0.031 var(--primary));
    }
  }
  #buddy {
    min-height: 100vh;
    background-color: var(--primary-11);
    // '3px-tile.png',
    // 'arabesque.png',
    // 'beige-paper.png',
    // 'binding-dark.png',
    // '45-degree-fabric-light.png'
    background-image: url("/patterns/arabesque.png");
    background-attachment: fixed;
  }

  :global {
    html,
    body,
    div,
    span,
    object,
    iframe,
    figure,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    code,
    em,
    img,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    b,
    u,
    i,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    main,
    canvas,
    embed,
    footer,
    header,
    nav,
    section,
    video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      // font: inherit;
      color: var(--primary-1);
      font-family: "Garamond", serif;
      font-size-adjust: 0.75;
      vertical-align: baseline;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
  }

  nav {
    padding: 1rem 20%;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    text-shadow: 3px 3px 3px var(--primary-9);
    a {
      font-weight: 700;
      line-height: 2rem;
      font-size: 1.5rem;
      text-decoration: none;
      &:first-child {
        margin-right: auto;
      }
      &:hover {
        color: var(--primary-8);
      }
    }
    button {
      background: var(--primary-8);
      border-radius: var(--br);
      border: none;
      height: fit-content;
      padding: 0.375rem 0.5rem;
      margin: auto 0;
      font-family: "Baskerville";
      font-weight: 900;
      color: var(--primary-1);
      &:hover {
        background: var(--primary-10);
      }
    }
  }

  main {
    display: flex;
    flex-direction: row;
  }

  @font-face {
    font-family: "Baskerville";
    font-display: swap;
    font-style: italic;
    font-weight: 500;
    src: url(/font/LibreBaskerville-Italic.otf) format("opentype");
  }
  @font-face {
    font-family: "Baskerville";
    font-display: swap;
    font-style: normal;
    font-weight: 900;
    src: url(/font/LibreBaskerville-Bold.otf) format("opentype");
  }
  @font-face {
    font-family: "Baskerville";
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url(/font/LibreBaskerville-Regular.otf) format("opentype");
  }

  @font-face {
    font-family: "Initials";
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url(/font/EBGaramond-Initials.otf) format("opentype");
  }
  @font-face {
    font-family: "Initials";
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: url(/font/EBGaramond-InitialsF1.otf) format("opentype");
  }
  @font-face {
    font-family: "Initials";
    font-display: swap;
    font-style: normal;
    font-weight: 200;
    src: url(/font/EBGaramond-InitialsF2.otf) format("opentype");
  }

  @font-face {
    font-family: "Garamond";
    font-display: swap;
    font-style: italic;
    src: url(/font/EBGaramond-Italic.ttf) format("truetype");
  }
  @font-face {
    font-family: "Garamond";
    font-display: swap;
    font-style: normal;
    src: url(/font/EBGaramond.ttf) format("truetype");
  }
</style>
