From 3cfe46050ba8e72e282fbb04ef43a9f67213aa38 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Wed, 1 Apr 2026 17:45:14 -0400 Subject: [PATCH] =?UTF-8?q?Fix=20header=20overlap=20with=20ID=20selector?= =?UTF-8?q?=20=E2=80=94=20unambiguous=20highest=20specificity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use #main-content (specificity 1,0,0,0) to set padding-top at each breakpoint. This cannot be overridden by any class-based rule regardless of cascade order, permanently fixing the fixed header overlapping page content. Co-Authored-By: Claude Sonnet 4.6 --- assets/css/base.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/assets/css/base.css b/assets/css/base.css index fba3496..db7a7ee 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -352,6 +352,21 @@ hr { padding-top: calc(var(--header-height) + var(--space-lg)); } +/* ID selector (specificity 1,0,0,0) beats any class combination — guarantees + the fixed header never overlaps content regardless of cascade order. */ +#main-content { + padding-top: calc(var(--header-height) + var(--space-lg)); +} +@media (max-width: 1023px) { + #main-content { padding-top: calc(var(--header-height) + var(--space-md)); } +} +@media (max-width: 767px) { + #main-content { padding-top: calc(50px + var(--space-md)); } +} +@media (max-width: 479px) { + #main-content { padding-top: calc(46px + var(--space-sm)); } +} + .lt-layout { display: flex; gap: var(--space-lg);