Settle the theme and header before the first paint

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;