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

<!DOCTYPE html>
<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">
    <title>{{ title }}</title>
    <script async defer data-website-id="73dbc372-c23e-442e-8538-2e3353c992a5" src="https://analytics.altweb.me/umami.js"></script>
    <link rel="stylesheet" href="/assets/styles/main.{{env.version}}.css">
</head>
<body>
  
  <div id="wrapper">
    <div id="content">
      <main>
        {{ content | safe }}
      </main>
    </div>
  </div>

  {# <script>

    window.addEventListener('scroll', function() {
      let boxes = document.querySelectorAll('img.project__image');
      let scrollTop = window.scrollY;
      let windowHeight = window.innerHeight;
      boxes.forEach(box => {
        let boxTop = box.offsetTop;
        let boxBottom = boxTop + box.offsetHeight;
        let midpoint = boxTop + (box.offsetHeight/2);
        let diffFromMidpoint = Math.abs(scrollTop - midpoint);
        let maxDiff = (windowHeight/2) + (box.offsetHeight/2);
        let shadowAmount = (diffFromMidpoint/maxDiff * 20) - 10;
        box.style.boxShadow = `10px ${shadowAmount}px 0 0 var(--c-offset)`;
      });
    });

  </script> #}

</body>
</html>