the home site for me: also iteration 3 or 4 of my site
feat: remove gradient bg
+11
-19
+3
-8
sass/css/mods.css
+3
-8
sass/css/mods.css
···
180
180
}
181
181
182
182
:root {
183
-
--gradient-average-light: oklch(86.49% 0.018 73.05);
184
-
--gradient-average-dark: oklch(27.58% 0.0203 289.13);
185
-
--nightshade-violet: oklch(22.96% 0.0242 287.67);
186
-
--purple-night: oklch(18.96% 0.0242 287.67);
183
+
--nightshade-violet: oklch(0.27 0.0242 287.67);
184
+
--purple-night: oklch(27.58% 0.0203 289.13);
187
185
--dark-crushed-grape: oklch(74.02% 0.0756 311.96);
188
186
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
189
187
--reseda-green: oklch(62.33% 0.0475 126.94);
190
-
--earth-yellow: oklch(87.45% 0.0203 74.93);
188
+
--earth-yellow: oklch(86.49% 0.018 73.05);
191
189
--sunset: oklch(87.45% 0.0334 74.93);
192
190
--ultra-violet: oklch(42.21% 0.0676 297.45);
193
191
--rose-quartz: oklch(65.32% 0.0585 311.96);
···
204
202
left: 0;
205
203
width: 100%;
206
204
height: 100%;
207
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='3' stitchTiles='stitch'/%3E%3CfeBlend mode='screen'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' /%3E%3C/svg%3E");
208
-
background-size: 12%;
209
-
opacity: var(--noise-strength);
210
205
pointer-events: none;
211
206
}
+8
-11
sass/css/suCSS.css
+8
-11
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
+
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
26
26
}
27
27
28
28
/* theme media queries */
···
30
30
:root,
31
31
::backdrop {
32
32
color-scheme: dark;
33
-
--bg: linear-gradient(0deg, var(--purple-night), var(--purple-night)),
34
-
var(--gradient-average-dark);
33
+
--bg: var(--purple-night);
35
34
--noise-strength: 0.15;
36
35
--bg-light: var(--ultra-violet);
37
36
--text: var(--lavendar-breeze);
···
42
41
--accent-text: var(--purple-gray);
43
42
--link: var(--light-crushed-grape);
44
43
--border: var(--pink-puree);
45
-
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-dark) 50%);
44
+
--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
46
45
}
47
46
}
48
47
49
48
[data-theme="dark"] {
50
49
color-scheme: dark;
51
-
--bg: linear-gradient(0deg, var(--purple-night), var(--purple-night)),
52
-
var(--gradient-average-dark);
50
+
--bg: var(--purple-night);
53
51
--noise-strength: 0.15;
54
52
--bg-light: var(--ultra-violet);
55
53
--text: var(--lavendar-breeze);
···
60
58
--accent-text: var(--purple-gray);
61
59
--link: var(--light-crushed-grape);
62
60
--border: var(--pink-puree);
63
-
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-dark) 50%);
61
+
--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
64
62
}
65
63
66
64
@media (prefers-color-scheme: light) {
···
77
75
--accent-text: #dfd1bc;
78
76
--border: #646868;
79
77
--link: var(--accent);
80
-
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-light) 50%);
78
+
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
81
79
}
82
80
}
83
81
84
82
[data-theme="light"] {
85
83
/* default (light) theme */
86
84
color-scheme: light;
87
-
--bg: linear-gradient(0deg, var(--earth-yellow), var(--earth-yellow)),
88
-
var(--gradient-average-light);
85
+
--bg: var(--earth-yellow);
89
86
--noise-strength: 0.22;
90
87
--bg-light: var(--reseda-green);
91
88
--text: #41474e;
···
96
93
--accent-text: #dfd1bc;
97
94
--border: #646868;
98
95
--link: var(--accent);
99
-
--selection: color-mix(in oklab, var(--accent), var(--gradient-average-light) 50%);
96
+
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
100
97
}
101
98
102
99
::selection,