josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jonathan Sykes
2026-08-17 00:21:50 +00:00
parent eb6ed215fe
commit 9c2146aef8
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/styles.css
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%); 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"] body::after { opacity: 0.008; }
html[data-layout="liturgical"] .app { grid-template-columns: 300px 1fr; }
/* Keep video player dark */ /* Keep video player dark */
html[data-layout="liturgical"] #video, html[data-layout="liturgical"] #video,
html[data-layout="liturgical"] .video-wrap, 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(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%); 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 ---------------------------------------------------- /* --- Sunday Broadcaster ----------------------------------------------------
* Near-black with crimson/rose accent for a live-broadcast feel. * 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); 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; }
}