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/variables.css
View File

@@ -13,8 +13,8 @@
--header-gradient-1: rgba(237, 237, 237, 0.9);
--header-gradient-2: rgba(228, 228, 228, 0.9);
--border-color: rgba(58, 123, 224, 0.1);
--bg-hover-rgb: 228, 228, 228;
--bg-hover-nav: 241, 241, 241;
--bg-hover-rgb: 237, 237, 237;
--bg-hover-nav: 207, 207, 207;
}
[data-theme="dark"] {
@@ -36,7 +36,7 @@
--spacing-xl: 2rem;
--border-radius: 8px;
--transition-speed: 0.3s;
--header-height: 140px;
--header-height: 100px;
/* Theme transition with GPU acceleration */
--theme-transition: color var(--transition-speed) ease,