{# https://11ty.rocks/posts/create-your-first-basic-11ty-website/ #}

<!DOCTYPE html>
{# <html lang="en" style="--scrollbarWidth: 0px; --viewportWidth: calc(100vw - var(--scrollbarWidth));"> #}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ description }}">
    <title>{{ title }}</title>
    {% favicon './favicon.svg' %}
    <link rel="stylesheet" href="/assets/styles/main.css">
    <script async defer data-website-id="3e99dfb1-0664-4d49-8fb6-de86e763a716" src="https://s9-analytics.altweb.me/umami.js"></script>
    {% seo "" %}
</head>
<body>
  
  {% include "components/header.njk" %}

  {% include "components/menu.njk" %}
  
  <main>
    {{ content | safe }}
  </main>

  {% include "components/footer.njk" %}

  {# <script>
    window.onload = setScrollbarVariable;
    document.onload = setScrollbarVariable;
    window.onresize = setScrollbarVariable;

    function setScrollbarVariable() {

      const viewportDependantWidth = (typeof window.orientation !== "undefined") ? screen.width : window.innerWidth;

      const scrollbarWidth = viewportDependantWidth - document.body.clientWidth;
      document.documentElement.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);

      console.log(scrollbarWidth);
    }

  </script> #}

  <style>
    :root{
      --viewportWidth: calc(100vw - var(--scrollbarWidth));
    }
  </style>


</body>
</html>