This commit is contained in:
2025-12-25 02:05:08 +01:00
parent 330df57424
commit fb793e0cb6
2 changed files with 18 additions and 3 deletions

View File

@@ -19,7 +19,8 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
padding: 14px 0; padding: 18px 0;
transition: padding 180ms ease;
} }
.brand { .brand {
@@ -28,11 +29,15 @@ body {
gap: 10px; gap: 10px;
} }
.brand__logo { width: 46px; height: 46px; object-fit: contain; } .brand__logo { width: 120px; height: 120px; object-fit: contain; transition: all 180ms ease; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 700; letter-spacing: -0.3px; } .brand__name { font-weight: 700; letter-spacing: -0.3px; font-size: 20px; transition: font-size 180ms ease; }
.brand__tag { color: var(--color-muted); font-size: 13px; } .brand__tag { color: var(--color-muted); font-size: 13px; }
.site-header.is-scrolled .nav-row { padding: 10px 0; }
.site-header.is-scrolled .brand__logo { width: 46px; height: 46px; }
.site-header.is-scrolled .brand__name { font-size: 17px; }
.nav-links { .nav-links {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
const body = document.body; const body = document.body;
const isLoggedIn = body.dataset.auth === '1'; const isLoggedIn = body.dataset.auth === '1';
const childGender = body.dataset.childGender || ''; const childGender = body.dataset.childGender || '';
const header = document.querySelector('.site-header');
// Logo-Logik // Logo-Logik
const pickLogo = (gender) => { const pickLogo = (gender) => {
@@ -14,6 +15,15 @@ document.addEventListener('DOMContentLoaded', () => {
img.src = `/assets/bilder/${chosenLogo}`; img.src = `/assets/bilder/${chosenLogo}`;
}); });
// Header shrink on scroll
const onScroll = () => {
if (!header) return;
const shouldShrink = window.scrollY > 40;
header.classList.toggle('is-scrolled', shouldShrink);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
// Mobile Menü // Mobile Menü
const mobileMenu = document.getElementById('mobileMenu'); const mobileMenu = document.getElementById('mobileMenu');
document.querySelectorAll('.menu-toggle').forEach(btn => { document.querySelectorAll('.menu-toggle').forEach(btn => {