the home site for me: also iteration 3 or 4 of my site
feat: make selection color readable
+7
-2
+7
-2
sass/css/suCSS.css
+7
-2
sass/css/suCSS.css
···
22
22
--accent-text: #dfd1bc;
23
23
--border: #646868;
24
24
--link: var(--accent);
25
+
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-light) 50%);
25
26
}
26
27
27
28
/* theme media queries */
···
40
41
--accent-dark: var(--dark-crushed-grape);
41
42
--accent-text: var(--purple-gray);
42
43
--link: var(--light-crushed-grape);
43
-
--border: var(--pink-puree)
44
+
--border: var(--pink-puree);
45
+
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-dark) 50%);
44
46
}
45
47
}
46
48
···
58
60
--accent-text: var(--purple-gray);
59
61
--link: var(--light-crushed-grape);
60
62
--border: var(--pink-puree);
63
+
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-dark) 50%);
61
64
}
62
65
63
66
@media (prefers-color-scheme: light) {
···
74
77
--accent-text: #dfd1bc;
75
78
--border: #646868;
76
79
--link: var(--accent);
80
+
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-light) 50%);
77
81
}
78
82
}
79
83
···
92
96
--accent-text: #dfd1bc;
93
97
--border: #646868;
94
98
--link: var(--accent);
99
+
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-light) 50%);
95
100
}
96
101
97
102
::selection,
98
103
::-moz-selection {
99
104
color: var(--bg);
100
-
background: var(--accent);
105
+
background: var(--selection);
101
106
}
102
107
103
108
/* chromium scrollbars */