ac328d8b3e
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.
46 lines
1.2 KiB
CSS
46 lines
1.2 KiB
CSS
:root {
|
|
/* Light theme (default) */
|
|
--primary: #3a7be0;
|
|
--primary-gradient-1: #112fcf;
|
|
--primary-gradient-2: #3b3bc8;
|
|
--primary-gradient-3: #5743ed;
|
|
--primary-gradient-4: #784dd9;
|
|
|
|
--bg-main: #f8f8f8;
|
|
--bg-card: #f1f1f1;
|
|
--text: #333333;
|
|
--text-muted: #666666;
|
|
--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: 237, 237, 237;
|
|
--bg-hover-nav: 207, 207, 207;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-main: #0a0a0a;
|
|
--bg-card: #141414;
|
|
--text: #e0e0e0;
|
|
--text-muted: #888888;
|
|
--header-gradient-1: rgba(14, 14, 14, 0.9);
|
|
--header-gradient-2: rgba(41, 41, 41, 0.9);
|
|
--bg-hover-rgb: 17, 17, 17;
|
|
--bg-hover-nav: 20, 20, 20;
|
|
}
|
|
|
|
/* Common tokens */
|
|
:root {
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--border-radius: 8px;
|
|
--transition-speed: 0.3s;
|
|
--header-height: 100px;
|
|
|
|
/* Theme transition with GPU acceleration */
|
|
--theme-transition: color var(--transition-speed) ease,
|
|
background-color var(--transition-speed) ease;
|
|
--gpu-accelerated: translate3d(0, 0, 0);
|
|
}
|