From a7ea82ff1933747bc0db6a2612a495708688a56d Mon Sep 17 00:00:00 2001
From: douwe <douwe.ravers@outlook.be>
Date: Fri, 25 Sep 2026 11:28:37 +0200
Subject: [PATCH] Improve navigation scrolling to show full content

- Adjusted IntersectionObserver threshold to 0.7 for better section detection
- Added scroll-padding-top to scroll_container to account for header
- Added scroll-margin-top to scroll_section for better snap alignment
- Updated navigation click handler to scroll with header height offset
- Ensures sections are fully visible when navigating
---
 public/assets/css/style.css |  2 ++
 public/assets/js/index.js   | 13 +++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index d67d35d..47424a5 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -67,6 +67,7 @@ footer > div > p {
 .scroll_container {
     overflow-y: auto;
     scroll-snap-type: y mandatory;
+    scroll-padding-top: 100px;
 }
 
 .scroll_section {
@@ -75,6 +76,7 @@ footer > div > p {
     display: flex;
     flex-direction: column;
     align-items: center;
+    scroll-margin-top: 100px;
 }
 
 .scroll_section > h1 {
diff --git a/public/assets/js/index.js b/public/assets/js/index.js
index b7c79da..97cb712 100644
--- a/public/assets/js/index.js
+++ b/public/assets/js/index.js
@@ -10,6 +10,9 @@ document.addEventListener('DOMContentLoaded', () => {
 function setupNavigationHighlight() {
     const sections = document.querySelectorAll('.scroll_section');
     const navOptions = document.querySelectorAll('.nav_option');
+    const header = document.querySelector('header');
+    const headerHeight = header ? header.offsetHeight : 0;
+    
     const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
@@ -21,13 +24,17 @@ function setupNavigationHighlight() {
             }
         });
     }, {
-        threshold: 0.5
+        threshold: 0.7,
+        rootMargin: `-${headerHeight}px 0px -40% 0px`
     });
 
     sections.forEach(section => observer.observe(section));
 }
 
 function setupNavigationClicks() {
+    const header = document.querySelector('header');
+    const headerHeight = header ? header.offsetHeight : 0;
+    
     document.querySelectorAll('.nav_option').forEach(link => {
         link.addEventListener('click', (event) => {
             event.preventDefault();
@@ -35,7 +42,9 @@ function setupNavigationClicks() {
             const targetId = link.getAttribute('href');
             const targetSection = document.querySelector(targetId);
             if (targetSection) {
-                targetSection.scrollIntoView({
+                const targetPosition = targetSection.getBoundingClientRect().top + window.pageYOffset - headerHeight;
+                window.scrollTo({
+                    top: targetPosition,
                     behavior: 'smooth'
                 });
             }