Proper cube transition background colors via base CSS mixing in theme bg.

This commit is contained in:
2026-08-26 13:01:42 +00:00
parent c59ab2f058
commit 7ba6094360
5 changed files with 5 additions and 17 deletions
+2 -2
View File
@@ -1026,11 +1026,11 @@ footer {
padding: 0;
}
/* Rotating-cube page transition, adapted from termotohtori.fi.
FRAGILE: do not tweak; the view-transition pseudo-tree is picky. */
/* Rotating-cube page transition. */
::view-transition {
perspective: 1000px;
inset: 0;
background: color-mix(var(--bg) 50%, black 50%);
}
::view-transition-group(root),
-4
View File
@@ -140,7 +140,3 @@ pre {
img {
border-radius: 4px;
}
::view-transition {
background: var(--bg);
}
-4
View File
@@ -206,7 +206,3 @@ pre {
img {
border-radius: 3px;
}
::view-transition {
background: var(--bg);
}
-4
View File
@@ -91,7 +91,3 @@ blockquote {
pre {
--code-bg: var(--surface);
}
::view-transition {
background: #000;
}
+3 -3
View File
@@ -8,6 +8,7 @@
/* Every color is sampled (or text-darkened) from banner.svg. */
--bg: #e6f4cf;
--sky: #d9f1ff;
/* pale meadow — the banner fades into this */
--surface: #f8fbf0;
--text: #2c4a2f;
@@ -260,8 +261,7 @@ figcaption,
background: linear-gradient(160deg, #eef7dd, #d9eec5);
}
/* The page transition exposes summer color around the rotating
snapshots. */
::view-transition {
background: var(--bg);
/* Override to mid sky shade instead of the darker --bg we otherwise get */
background: var(--sky);
}