Sync menu to scroll

src/_includes/js/main.js

@@ -1 +1,24 @@
 document.documentElement.classList.replace('no-js', 'js');
+
+const options = {
+    rootMargin: '0px 0px -50% 0px'
+};
+const observer = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    const id = entry.target.getAttribute("id");
+    if (entry.isIntersecting) {
+      document.querySelectorAll('[aria-current="page"]').forEach((z) => {
+        z.removeAttribute('aria-current', 'page')
+      });
+      const target = document.querySelector(`a[href="#${id}"]`);
+      if (target) {
+        document.querySelector(`a[href="#${id}"]`).setAttribute('aria-current', 'page');
+      }
+    }
+  });
+},options);
+
+/* document.querySelectorAll('[id^="section"]').forEach(function(section, i) { */
+document.querySelectorAll('section').forEach(function(section, i) {
+  observer.observe(section);
+});

src/scss/critical.scss

@@ -6,6 +6,13 @@
 @use './components/button';
 @use './components/skip-link';
 
+:target:before {
+  content: "";
+  display: block;
+  height: 80px;
+  margin: -80px 0 0;
+}
+
 body {
   --start: var(--primary-light);
   --end: var(--secondary);