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

4
public/css/base.css
View File

@@ -20,6 +20,10 @@ body {
will-change: background-color, color;
}
h1, h2, h3 {
scroll-margin-top: var(--header-height);
}
h1 {
font-size: 2rem;
margin-bottom: var(--spacing-lg);