portfolio-2023/src/_includes/layouts/base.njk

43 lines
No EOL
1.3 KiB
Text

{# 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>