Files
start9.com/src/_includes/layouts/base.njk
Spencer Flagg c669ef8409 first commit?
2022-07-19 16:25:29 +02:00

55 lines
1.7 KiB
Plaintext

{# https://11ty.rocks/posts/create-your-first-basic-11ty-website/ #}
<!DOCTYPE html>
<html lang="en" style="--scrollbarWidth: 0px; --viewportWidth: calc(100vw - var(--scrollbarWidth));">
<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>
<link rel="stylesheet" href="assets/styles/main.css">
</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
<script src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
<script src="{{ '/assets/js/main.js' | url }}"></script>
</body>
</html>