diff --git a/adventskalender/2025/index.php b/adventskalender/2025/index.php index 40b27e0..2deb183 100644 --- a/adventskalender/2025/index.php +++ b/adventskalender/2025/index.php @@ -104,6 +104,7 @@ + \ No newline at end of file diff --git a/adventskalender/index.php b/adventskalender/index.php index 02be71d..aeb1059 100644 --- a/adventskalender/index.php +++ b/adventskalender/index.php @@ -5,6 +5,7 @@ Bratonien Adventskalender + @@ -21,5 +22,6 @@ + \ No newline at end of file diff --git a/adventskalender/shared/css/style.css b/adventskalender/shared/css/style.css index 02dbe11..e3076a6 100644 --- a/adventskalender/shared/css/style.css +++ b/adventskalender/shared/css/style.css @@ -129,4 +129,172 @@ main > h1 { .footer-links .divider { display: none; } -} \ No newline at end of file +} + +/* === Grundstruktur Header === */ +.main-header { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + z-index: 1000; + + padding: 0.75rem 2rem; + background: rgba(16, 79, 58, 0.85); /* CI-Grün mit Transparenz */ + backdrop-filter: blur(6px); + color: #f7f3e8; + border-bottom: 2px solid #c8aa49; +} + +/* === Logo === */ +.main-header .logo { + flex-shrink: 0; + display: flex; + align-items: center; +} + +.main-header .logo img { + display: block; + height: 42px; + width: auto; + max-width: 100%; + vertical-align: middle; +} + +@media (max-width: 600px) { + .main-header .logo img { + height: 36px; + } +} + +/* === Titel === */ +.main-header .header-title { + flex: 1; + text-align: center; +} + +.main-header .header-title h1 { + margin: 0; + font-size: 1.6rem; + font-weight: 600; + letter-spacing: 0.05em; + color: #f7f3e8; +} + +@media (max-width: 600px) { + .main-header .header-title h1 { + font-size: 1.2rem; + } +} + +/* === Navigation === */ +.main-header .main-nav { + display: flex; + gap: 1.5rem; +} + +.main-header .main-nav ul { + list-style: none; + display: flex; + gap: 1.5rem; + margin: 0; + padding: 0; +} + +.main-header .main-nav a { + color: #f7f3e8; + text-decoration: none; + font-weight: 500; + transition: color 0.2s ease; +} + +.main-header .main-nav a:hover { + color: #c8aa49; +} + +/* === Burger-Menü === */ +.burger { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4px; + + width: 32px; + height: 32px; + background: none; + border: none; + cursor: pointer; + z-index: 1200; +} + +.burger span { + display: block; + width: 24px; + height: 2px; + background: #f7f3e8; + border-radius: 2px; + transition: all 0.3s ease; +} + +/* === Burger aktiv === */ +.burger.active span:nth-child(1) { + transform: translateY(6px) rotate(45deg); +} + +.burger.active span:nth-child(2) { + opacity: 0; +} + +.burger.active span:nth-child(3) { + transform: translateY(-6px) rotate(-45deg); +} + +/* === Mobile Navigation === */ +@media (max-width: 900px) { + .main-header { + flex-wrap: wrap; + } + + .burger { + display: flex; + } + + .main-nav { + position: absolute; + top: 100%; + left: 0; + right: 0; + + flex-direction: column; + align-items: center; + background: rgba(16, 79, 58, 0.95); + backdrop-filter: blur(8px); + + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + } + + .main-nav.active { + max-height: 300px; /* oder auto, wenn du willst */ + } + + .main-nav ul { + flex-direction: column; + gap: 1rem; + padding: 1.5rem 0; + } + + .main-nav a { + font-size: 1.1rem; + } +} + +/* === Scrollverhalten === */ +.main-header.scrolled { + background: rgba(16, 79, 58, 0.95); + border-bottom-color: #a08a36; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); +} + diff --git a/adventskalender/shared/js/header.js b/adventskalender/shared/js/header.js new file mode 100644 index 0000000..7a0375d --- /dev/null +++ b/adventskalender/shared/js/header.js @@ -0,0 +1,24 @@ +document.addEventListener("DOMContentLoaded", () => { + const header = document.querySelector(".main-header"); + const burger = document.getElementById("burgerBtn"); + const nav = document.getElementById("mainNav"); + + // --- Burger-Menü --- + if (burger && nav) { + burger.addEventListener("click", () => { + burger.classList.toggle("active"); + nav.classList.toggle("active"); + }); + } + + // --- Scrollverhalten --- + if (header) { + window.addEventListener("scroll", () => { + if (window.scrollY > 40) { + header.classList.add("scrolled"); + } else { + header.classList.remove("scrolled"); + } + }); + } +}); \ No newline at end of file