Fix layout theme grid overrides breaking mobile — wrap in min-width:861px

This commit is contained in:
Jonathan Sykes
2026-08-17 00:21:50 +00:00
parent eb6ed215fe
commit 9c2146aef8

View File

@@ -2877,7 +2877,6 @@ html[data-layout="liturgical"] body::before {
background: radial-gradient(900px 600px at 0% 0%, rgba(139, 38, 29, 0.04), transparent 60%);
}
html[data-layout="liturgical"] body::after { opacity: 0.008; }
html[data-layout="liturgical"] .app { grid-template-columns: 300px 1fr; }
/* Keep video player dark */
html[data-layout="liturgical"] #video,
html[data-layout="liturgical"] .video-wrap,
@@ -2929,7 +2928,6 @@ html[data-layout="living-hymnal"] body::before {
radial-gradient(900px 600px at 18% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
radial-gradient(700px 500px at 100% 110%, rgba(99, 102, 241, 0.04), transparent 55%);
}
html[data-layout="living-hymnal"] .app { grid-template-columns: 220px 1fr; }
/* --- Sunday Broadcaster ----------------------------------------------------
* Near-black with crimson/rose accent for a live-broadcast feel.
@@ -3026,3 +3024,11 @@ html[data-layout="bento-hub"] .topbar {
border-bottom-color: var(--line);
}
/* Grid-column overrides only apply on screens wide enough for an inline sidebar
(≥861px). Below that the sidebar is position:fixed (out of grid flow) so
a two-column grid would leave .main stranded in the narrow first column. */
@media (min-width: 861px) {
html[data-layout="liturgical"] .app { grid-template-columns: 300px 1fr; }
html[data-layout="living-hymnal"] .app { grid-template-columns: 220px 1fr; }
}