Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Settle the theme and header before the first paint
Diffstat (limited to 'assets/cgit.css')
| -rw-r--r-- | assets/cgit.css | 21 |
1 file changed, 17 insertions, 4 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 878e96c..0f0c898 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -3,7 +3,7 @@ * * Colours are driven by CSS custom properties via light-dark(), so the * whole theme follows the reader's system preference and can be flipped - * with the header toggle (which sets data-theme on div#cgit). All rules + * with the header toggle (which sets data-theme on <html>). All rules * stay scoped under div#cgit so cgit can be embedded in another page. */ @@ -103,9 +103,11 @@ div#cgit { background: var(--bg); } -/* Explicit theme choices made through the header toggle. */ -div#cgit[data-theme="light"] { color-scheme: light; } -div#cgit[data-theme="dark"] { color-scheme: dark; } +/* Explicit theme choices made through the header toggle. The marker is on + * <html> rather than div#cgit so the script can set it before the body is + * parsed, which is what keeps the first paint from showing the other theme. */ +html[data-theme="light"] div#cgit { color-scheme: light; } +html[data-theme="dark"] div#cgit { color-scheme: dark; } /* On a standalone cgit page, paint the page background to match the app * and drop the default body margin so the interface is part of the page @@ -257,10 +259,20 @@ div#cgit #header .theme-toggle svg { /* Reserve the logo column. The image carries no width attribute, since the * logo is configurable and its size is not known here, so without this the * column collapses to nothing and the masthead jumps sideways on load. */ +/* The toggle starts hidden and is revealed once the script has run, so its + * column is reserved up front to keep the header from jumping. Only when + * scripting is on, otherwise the space would sit empty forever. */ +html.cgit-js div#cgit #header { + grid-template-columns: auto 1fr auto var(--control-h); +} + +/* Reserve the logo's box so the header does not grow when the image + * arrives. The height matches the shipped 192x128 logo capped to 96px. */ div#cgit #header .logo { grid-area: logo; align-self: start; min-width: 96px; + min-height: 64px; } div#cgit #header .logo img { @@ -1406,6 +1418,7 @@ div#cgit table.ssdiff td.space div { } div#cgit #header .logo { min-width: 56px; + min-height: 37px; } div#cgit #header .logo img { max-width: 56px; |