Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7f4dfa2748 | ||
|
|
bdaa05cd54 | ||
|
|
043506cb6b | ||
|
|
0466986195 |
@@ -161,10 +161,22 @@
|
|||||||
* page and out-shouts the H1 and the search box. Dimming it in CSS is the
|
* page and out-shouts the H1 and the search box. Dimming it in CSS is the
|
||||||
* whole treatment, and the scrim then fades it into the dark panel instead of
|
* whole treatment, and the scrim then fades it into the dark panel instead of
|
||||||
* into cream.
|
* into cream.
|
||||||
|
*
|
||||||
|
* Raising the brightness raises the background under light dark-theme text, so
|
||||||
|
* this value has a contrast floor, not just a taste range. Measured off
|
||||||
|
* rendered pixels, sampling background up to 120px past each line:
|
||||||
|
*
|
||||||
|
* brightness title body
|
||||||
|
* 0.52 11.01:1 6.44:1
|
||||||
|
* 0.75 9.48:1 5.21:1 ← current
|
||||||
|
*
|
||||||
|
* Body text is the binding one. Going much above 0.75 walks it toward the
|
||||||
|
* 4.5:1 floor, and at that point the scrim needs to carry further right rather
|
||||||
|
* than the artwork being dimmed less.
|
||||||
*/
|
*/
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.heroArt img {
|
.heroArt img {
|
||||||
filter: brightness(0.52) saturate(0.72) contrast(1.02);
|
filter: brightness(0.75) saturate(0.72) contrast(1.02);
|
||||||
}
|
}
|
||||||
.heroPanel::before {
|
.heroPanel::before {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
|
|||||||
Reference in new issue
Block a user