<script lang="ts">
  interface Props {
    data: {};
    children: any;
  }
  let { data, children }: Props = $props();
  // $inspect("l",data);
</script>

<nav>
  <a href="/">Sludge</a>
  <a href="/fest">Fest</a>
  <a href="/pork">Pork</a>
  <a href="/blag">Blag</a>
</nav>

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

<style lang="scss">
  @use '/src/app.scss' as *;
  :global(body) {
    background-color: $green-42;   
  // '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;
  }
  nav{
    padding: 0 20%;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    text-shadow: 3px 3px 3px $green;
    a{
      font-weight: 700;
      text-decoration: none;
      &:first-child{
        margin-right: auto;
      }
      &:hover{
        color: $orange;
      }
    }
  }

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


  :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: $yellow;
    font-family: "Garamond", serif;
    font-size-adjust: 0.75;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  @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>
