From 3075ea4b900b33eae1de9216488dc24b868d701a Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Thu, 13 Mar 2025 22:20:15 +0100
Subject: [PATCH] add class toggle on scroll to navbar for class small

---
 static/main.js   |  8 +++++++-
 static/style.css | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/static/main.js b/static/main.js
index f89d7b1..8ea7e36 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,10 +1,12 @@
 // Add event listeners
 document.addEventListener('DOMContentLoaded', function(){
     scrollTopVisibilityUpdate();
+    updateNavStyle();
 });
 
 window.addEventListener('scroll', function(){
     scrollTopVisibilityUpdate();
+    updateNavStyle();
 });
 
 document.querySelector(".nav-toggle").addEventListener('click', function(){
@@ -41,13 +43,17 @@ function toggleNav(){
     switchClasses(".nav-toggle i", "ai-text-align-right", "ai-cross");
 }
 
-// scroll top visibility
+// class toggle on scroll
 function scrollTopVisibilityUpdate(){
     const scrollTop = document.querySelector(".scroll-top");
     scrollTop.style.display = ((window.scrollY > 20) ? 'flex' : 'none');
     scrollTop.style.right = ((window.scrollY > 20) ? '0' : '-55px');
 }
 
+function updateNavStyle(){
+    document.querySelector("nav").classList.toggle("small", window.scrollY > 20);
+}
+
 // intersection observer for animations
 // credits: https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/
 const observer = new IntersectionObserver(entries => {
diff --git a/static/style.css b/static/style.css
index 00e4798..c5b0f0a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -47,6 +47,7 @@ nav{
 
 nav.small{
     height: 66px;
+    background: var(--primary);
 }
 
 nav .inner-width{
@@ -64,7 +65,7 @@ nav img{
 }
 
 nav.small img{
-    height: 46px;
+    height: 41px;
 }
 
 .nav-links a{
@@ -108,10 +109,20 @@ nav.small img{
     transition: var(--baseTransition);
 }
 
+nav.small .nav-links a:last-child{
+    background: var(--color);
+    color: var(--primary);
+}
+
 .nav-links a:last-child:hover{
     background: var(--secondary);
 }
 
+nav.small .nav-links a:last-child:hover{
+    background: var(--secondary);
+    color: var(--color);
+}
+
 .nav-toggle{
     display: none;
 }
@@ -328,6 +339,7 @@ nav.small img{
     border-radius: var(--baseRadius);
     transition: var(--baseTransition);
     box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.705);
+    overflow: hidden;
 }
 
 @media (pointer: fine){
@@ -339,6 +351,7 @@ nav.small img{
         background-position: center;
         box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.705);
         cursor: pointer;
+        overflow: hidden;
     }
 
     .card-first{