Refactor Header and HoverCard styles for consistency and responsiveness:
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- **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:
@ -5,13 +5,14 @@ import "../styles/components/Header.css";
|
||||
---
|
||||
|
||||
<header class="header">
|
||||
<!-- Desktop Layout -->
|
||||
<div class="desktop-layout">
|
||||
<div class="logo-container">
|
||||
<a href="/">
|
||||
<img src="/images/Logo.png" alt="Logo" class="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="nav-main">
|
||||
<div class="desktop-menu">
|
||||
<a href="/#hero">Home</a>
|
||||
@ -23,8 +24,18 @@ import "../styles/components/Header.css";
|
||||
<a href="/#contact">Contact</a>-->
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Burger 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>
|
||||
@ -33,7 +44,7 @@ import "../styles/components/Header.css";
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation Menu -->
|
||||
<!-- Mobile Navigation Menu (Dropdown) -->
|
||||
<div class="mobile-menu">
|
||||
<a href="/#hero">Home</a>
|
||||
<a href="/#events">Events</a>
|
||||
@ -41,6 +52,7 @@ import "../styles/components/Header.css";
|
||||
<a href="/#drinks">Drinks</a>
|
||||
<a href="/#footer">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="header-spacer"></div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
Reference in New Issue
Block a user