the home site for me: also iteration 3 or 4 of my site
feat: lighten light mode
+12
-11
+6
-6
sass/css/mods.css
+6
-6
sass/css/mods.css
···
160
160
}
161
161
162
162
:root {
163
-
--gradient-average-light: oklch(81.57% 0.0686 76.21);
163
+
--gradient-average-light: oklch(86.49% 0.018 73.05);
164
164
--gradient-average-dark: oklch(33.5% 0.0067 248.03);
165
-
--reseda-green: oklch(54.99% 0.0475 126.94);
166
-
--earth-yellow: oklch(81.53% 0.0874 75.19);
167
-
--sunset: oklch(87.45% 0.0807 74.93);
165
+
--reseda-green: oklch(62.33% 0.0475 126.94);
166
+
--earth-yellow: oklch(87.45% 0.0203 74.93);
167
+
--sunset: oklch(87.45% 0.0334 74.93);
168
168
--ultra-violet: oklch(43.58% 0.087 297.45);
169
169
--rose-quartz: oklch(72.99% 0.0393 311.96);
170
170
--alice-blue: oklch(95.38% 0.0118 239.91);
···
177
177
left: 0;
178
178
width: 100%;
179
179
height: 100%;
180
-
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)' opacity='0.5'/%3E%3C/svg%3E");
181
-
background-size: 12%; /* Scale image 2x */
180
+
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");
181
+
background-size: 12%;
182
182
opacity: var(--noise-strength);
183
183
pointer-events: none;
184
184
}
+6
-5
sass/css/suCSS.css
+6
-5
sass/css/suCSS.css
···
12
12
13
13
/* default colors */
14
14
--bg: var(--earth-yellow);
15
+
--noise-strength: 0.3;
15
16
--bg-light: #cbcdcd;
16
17
--text: #41474e;
17
18
--text-light: #686764;
18
19
--text-dark: #20252b;
19
-
--accent: #58310ac5;
20
+
--accent: oklch(35.55% 0.0754 60.09);
20
21
--accent-light: #56412bc5;
21
22
--accent-text: #dfd1bc;
22
23
--border: #646868;
···
29
30
::backdrop {
30
31
color-scheme: dark;
31
32
--bg: #222529;
32
-
--noise-strength: 0.3;
33
+
--noise-strength: 0.15;
33
34
--bg-light: var(--ultra-violet);
34
35
--text: #d6d6d6;
35
36
--text-light: #c5c0b7;
···
51
52
::backdrop {
52
53
color-scheme: light;
53
54
--bg: var(--earth-yellow);
54
-
--noise-strength: 0.5;
55
+
--noise-strength: 0.15;
55
56
--bg-light: #cbcdcd;
56
57
--text: #41474e;
57
58
--text-light: #686764;
···
68
69
color-scheme: light;
69
70
--bg: linear-gradient(0deg, var(--earth-yellow), var(--earth-yellow)),
70
71
var(--gradient-average-light);
71
-
--noise-strength: 0.5;
72
+
--noise-strength: 0.22;
72
73
--bg-light: var(--reseda-green);
73
74
--text: #41474e;
74
75
--text-light: #686764;
···
83
84
[data-theme="dark"] {
84
85
color-scheme: dark;
85
86
--bg: linear-gradient(0deg, #222529, #222529), var(--gradient-average-dark);
86
-
--noise-strength: 0.3;
87
+
--noise-strength: 0.15;
87
88
--bg-light: var(--ultra-violet);
88
89
--text: #d6d6d6;
89
90
--text-light: #c5c0b7;