Refactor Header and HoverCard styles for consistency and responsiveness:

- **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.

src/components/Header.astro

@@ -5,41 +5,53 @@ import "../styles/components/Header.css";
 ---
 
 <header class="header">
-	<div class="logo-container">
+	<!-- Desktop Layout -->
-		<a href="/">
+	<div class="desktop-layout">
-			<img src="/images/Logo.png" alt="Logo" class="logo" />
+		<div class="logo-container">
-		</a>
+			<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 -->
+	<!-- Mobile Layout -->
-	<nav class="nav-main">
+	<div class="mobile-layout">
-		<div class="desktop-menu">
+		<!-- 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>
 

src/styles/components/Header.css

@@ -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;
+	width: 100%;
-	top: 70px;
-	left: 0;
-	right: 0;
 	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%);
+	max-height: 0;
-	transition: transform 0.3s ease;
+	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 {
+	/* Hide desktop layout, show mobile layout */
-		display: block;
+	.desktop-layout {
-	}
-
-	.nav-main {
 		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 {
+	.mobile-logo-container .logo {
-		top: 60px;
+		height: 3em;
+	}
+
+	.burger-icon {
+		width: 25px;
+		height: 20px;
 	}
 }

src/styles/components/HoverCard.css

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