ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

I've updated the header implementation to properly handle heights and scroll margins:

Browse Source 
Changed header height to be explicitly set using CSS variable --header-height instead of being determined by padding
Set responsive header heights:
Default: 100px
Mobile (480px): 80px
Small Mobile (320px): 60px
Ensured scroll-margin-top on headings uses the same --header-height variable
Main content padding-top uses the same --header-height variable
These changes ensure consistent header heights across all screen sizes and proper scroll positioning for anchor links.
This commit is contained in:
ben7sys
2024-11-17 10:24:23 +01:00
parent 956238800d
commit ac328d8b3e
4 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/header.css
View File

@@ -4,14 +4,13 @@ header {
width: 100%;
background: linear-gradient(90deg, var(--header-gradient-1), var(--header-gradient-2));
backdrop-filter: blur(10px);
padding: 0.5rem var(--spacing-md);
height: var(--header-height);
z-index: 1000;
border-bottom: 1px solid var(--border-color);
left: 0;
right: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: var(--theme-transition), transform 0.7s ease, box-shadow 0.7s ease;
max-height: var(--header-height);
transform: var(--gpu-accelerated);
}
@@ -22,6 +21,7 @@ header {
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--spacing-md);
height: 100%;
}
.logo-container {
@@ -58,7 +58,7 @@ header {
padding: 0.5rem 0.8rem;
border-radius: var(--border-radius);
position: relative;
background-color: rgba(var(--bg-hover-nav), 0.4);
background-color: rgba(var(--bg-hover-nav));
letter-spacing: 0.3px;
}