diff --git a/assets/css/base.css b/assets/css/base.css index db7a7ee..f9a6361 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -350,22 +350,17 @@ hr { .lt-main { padding-top: calc(var(--header-height) + var(--space-lg)); + flex: 1; + width: 100%; + min-width: 0; } - -/* ID selector (specificity 1,0,0,0) beats any class combination — guarantees - the fixed header never overlaps content regardless of cascade order. */ -#main-content { +/* When both lt-main and lt-container are on the same element, the lt-container + shorthand `padding` overrides the lt-main `padding-top` in responsive breakpoints + (same cascade specificity, later rule wins). The combined selector has higher + specificity (0,2,0 vs 0,1,0) and always wins regardless of source order. */ +.lt-main.lt-container { 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; @@ -2023,8 +2018,6 @@ select option:checked { @media (max-width: 1279px) { .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } .lt-container { padding: var(--space-lg); } - /* Restore header clearance after lt-container shorthand overrides padding-top */ - .lt-main { padding-top: calc(var(--header-height) + var(--space-lg)); } } @@ -2036,8 +2029,6 @@ select option:checked { .lt-grid-3, .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } .lt-stats-grid { grid-template-columns: repeat(2, 1fr); } .lt-container { padding: var(--space-md) var(--space-lg); } - /* Restore header clearance after lt-container shorthand overrides padding-top */ - .lt-main { padding-top: calc(var(--header-height) + var(--space-md)); } .lt-header { padding: 0 var(--space-lg); } /* Sidebar becomes off-canvas on tablets */ @@ -2062,8 +2053,6 @@ select option:checked { @media (max-width: 767px) { :root { --header-height: 50px; } .lt-container { padding: var(--space-md); } - /* lt-main must come after lt-container so padding-top isn't clobbered by the shorthand */ - .lt-main { padding-top: calc(50px + var(--space-md)); } .lt-header { padding: 0 var(--space-md); } .lt-brand-subtitle { display: none; } @@ -2162,8 +2151,6 @@ select option:checked { @media (max-width: 479px) { :root { --header-height: 46px; } .lt-container { padding: var(--space-sm); } - /* lt-main must come after lt-container so padding-top isn't clobbered by the shorthand */ - .lt-main { padding-top: calc(46px + var(--space-sm)); } .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); } .lt-stat-card { padding: var(--space-xs) var(--space-sm); } .lt-stat-value { font-size: 1.4rem; } @@ -2260,8 +2247,6 @@ select option:checked { .lt-stats-grid { grid-template-columns: repeat(6, 1fr); } .lt-grid-4 { grid-template-columns: repeat(4, 1fr); } .lt-container { padding: var(--space-xl) var(--space-2xl); } - /* Restore header clearance after lt-container shorthand overrides padding-top */ - .lt-main { padding-top: calc(var(--header-height) + var(--space-xl)); } }