Fix dark-mode white bar (html bg + body min-height) and centred container
- html now gets --color-bg (not just body) + body min-height:100vh, so a short page never reveals a light html canvas as a bar at the bottom. - Bulma adapter: force dark html/body + transparent sections, and centre .container.fullwidth with !important (beats Bulma's .is-marginless margin:0).
This commit is contained in:
Vendored
+12
-2
@@ -102,10 +102,20 @@ hr { background-color: var(--color-border); }
|
||||
details summary { color: var(--color-accent); }
|
||||
.section { padding-top: 2rem; }
|
||||
|
||||
/* Kill any light Bulma canvas (html/body/section) so dark mode is fully dark. */
|
||||
html, body { background-color: var(--color-bg) !important; }
|
||||
body { min-height: 100vh; }
|
||||
.content.has-navbar-fixed-top, #pageContent, .section, .hero, .hero-body, .footer { background-color: transparent !important; }
|
||||
|
||||
/* Responsive content width: full-bleed on phones, a centred readable column on
|
||||
large screens (so a wishlist doesn't stretch edge-to-edge on a desktop). The
|
||||
app marks a wrapper with .container.fullwidth; constrain it past tablet. */
|
||||
app marks a wrapper with .container.fullwidth; centre + constrain past tablet.
|
||||
!important is needed to beat Bulma's .is-marginless (margin:0 !important). */
|
||||
@media (min-width: 769px) {
|
||||
.container.fullwidth { max-width: 52rem; margin-left: auto; margin-right: auto; }
|
||||
.container.fullwidth {
|
||||
max-width: 52rem;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.container.fullwidth.is-wide { max-width: 72rem; }
|
||||
}
|
||||
|
||||
+4
-1
@@ -70,8 +70,11 @@
|
||||
}
|
||||
|
||||
/* ---------- base ---------- */
|
||||
html { scroll-behavior: smooth; }
|
||||
/* html AND body get the bg (and body fills the viewport) so a short page never
|
||||
reveals a light html canvas as a bar at the bottom. */
|
||||
html { scroll-behavior: smooth; background-color: var(--color-bg); }
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--wt-font-sans);
|
||||
|
||||
Reference in New Issue
Block a user