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>

101
src/styles/components/Header.css
View File

@ -7,11 +7,6 @@
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
height: 70px;
width: 100%;
border-bottom: 1px solid #444;
}
@ -21,6 +16,15 @@
/* Should match the header height */
}
/* Desktop Layout */
.desktop-layout {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
height: 70px;
}
.logo-container {
display: flex;
align-items: center;
@ -54,10 +58,31 @@
color: #ffa500;
}
/* Mobile Layout */
.mobile-layout {
display: none;
flex-direction: column;
align-items: center;
padding: 1rem;
}
.mobile-logo-container {
display: flex;
justify-content: center;
margin-bottom: 0.5rem;
}
.mobile-logo-container .logo {
margin: 0;
height: 3.5em;
}
/* Burger Menu Styles */
.burger-menu {
display: none;
display: flex;
justify-content: center;
cursor: pointer;
margin: 0.5rem 0;
}
.burger-icon {
@ -93,26 +118,25 @@
/* Mobile Menu Styles */
.mobile-menu {
display: none;
position: fixed;
top: 70px;
left: 0;
right: 0;
width: 100%;
background-color: #0e0c0c;
flex-direction: column;
align-items: center;
padding: 1rem;
padding: 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-100%);
transition: transform 0.3s ease;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
z-index: 999;
}
.mobile-menu.active {
transform: translateY(0);
max-height: 300px; /* Adjust based on content */
padding: 0.5rem 0;
}
.mobile-menu a {
margin: 1rem 0;
margin: 0.5rem 0;
color: white;
text-decoration: none;
font-size: 1.2rem;
@ -131,49 +155,36 @@
}
@media (max-width: 768px) {
.header {
height: 65px;
}
.logo {
margin-left: 1em;
height: 3em;
}
.header-spacer {
height: 65px;
height: 120px; /* Adjusted for the taller mobile header */
}
.burger-menu {
display: block;
}
.nav-main {
/* Hide desktop layout, show mobile layout */
.desktop-layout {
display: none;
}
.mobile-menu {
.mobile-layout {
display: flex;
}
/* Show mobile menu when active */
.mobile-menu.active {
display: flex;
top: 65px;
}
}
@media (max-width: 480px) {
.header {
padding: 0.5rem 1rem;
height: 60px;
}
.logo {
margin-left: 0.5em;
height: 2.5em;
}
.header-spacer {
height: 60px;
height: 110px; /* Slightly smaller for very small screens */
}
.mobile-menu {
top: 60px;
.mobile-logo-container .logo {
height: 3em;
}
.burger-icon {
width: 25px;
height: 20px;
}
}

4
src/styles/components/HoverCard.css
View File

@ -1,7 +1,7 @@
.hover-card {
position: relative;
width: 400px;
height: 400px;
width: 25rem;
height: 25rem;
border-radius: var(--border-radius);
background-color: var(--color-accent-green);
box-shadow: var(--box-shadow);