Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Refactor Header and HoverCard styles for consistency and responsiveness:
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source 
- **Standardized dimensions**: Converted `px` values to `rem` in `HoverCard.css`.
- **Improved header layout**: Enhanced mobile-first responsiveness with distinct layouts for desktop and mobile.
- **New navigation styles**: Adjusted alignment, spacing, and transitions for the burger menu and mobile dropdown.
- **Optimized media queries**: Simplified and organized breakpoints for better maintainability.
This commit is contained in:
k
2025-08-02 14:35:34 +02:00
parent b539329420
commit 78f367530a
3 changed files with 97 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Header.astro
View File

@ -5,41 +5,53 @@ import "../styles/components/Header.css";
---
<header class="header">
<div class="logo-container">
<a href="/">
<img src="/images/Logo.png" alt="Logo" class="logo" />
</a>
<!-- Desktop Layout -->
<div class="desktop-layout">
<div class="logo-container">
<a href="/">
<img src="/images/Logo.png" alt="Logo" class="logo" />
</a>
</div>
<nav class="nav-main">
<div class="desktop-menu">
<a href="/#hero">Home</a>
<a href="/#events">Events</a>
<a href="/#gallery">Galerie</a>
<a href="/#drinks">Drinks</a>
<a href="/#footer">Contact</a>
<!--<a href="/#about">About</a>
<a href="/#contact">Contact</a>-->
</div>
</nav>
</div>
<!-- Desktop Navigation -->
<nav class="nav-main">
<div class="desktop-menu">
<!-- Mobile Layout -->
<div class="mobile-layout">
<!-- Centered Logo -->
<div class="mobile-logo-container">
<a href="/">
<img src="/images/Logo.png" alt="Logo" class="logo" />
</a>
</div>
<!-- Burger Menu Below Logo -->
<div class="burger-menu">
<div class="burger-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Mobile Navigation Menu (Dropdown) -->
<div class="mobile-menu">
<a href="/#hero">Home</a>
<a href="/#events">Events</a>
<a href="/#gallery">Galerie</a>
<a href="/#drinks">Drinks</a>
<a href="/#footer">Contact</a>
<!--<a href="/#about">About</a>
<a href="/#contact">Contact</a>-->
</div>
</nav>
<!-- Mobile Burger Menu -->
<div class="burger-menu">
<div class="burger-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Mobile Navigation Menu -->
<div class="mobile-menu">
<a href="/#hero">Home</a>
<a href="/#events">Events</a>
<a href="/#gallery">Galerie</a>
<a href="/#drinks">Drinks</a>
<a href="/#footer">Contact</a>
</div>
</header>