1
1
: root ,
2
2
::backdrop {
3
+ color-scheme : normal light dark;
3
4
/* From Figma */
4
5
--brand-blue : # 008DE4 ;
5
6
--brand-blue-highlight : # 49b0f0 ;
31
32
--d : var (--dark-800 );
32
33
--l : var (--light-300 );
33
34
34
- /* --l: #eee; */
35
35
--lt : # eeea ;
36
36
--lf : # dfdfdf ;
37
37
--f : # fff ;
66
66
--tblbrd : var (--co );
67
67
--tblcap : var (--n );
68
68
69
+ --linkbg : var (--oc );
70
+ --linkfg : var (--info );
71
+ --linkbgh : var (--c );
72
+ --linkfgh : var (--info );
73
+
74
+ --btnbg : var (--oc );
75
+ --btnfg : var (--fc );
76
+ --btnbgd : var (--d );
77
+ --btnfgd : var (--note );
78
+ --btnbgh : var (--c );
79
+ --btnfgh : var (--info );
80
+
81
+ --inpbg : var (--c );
82
+ --inpbd : var (--hc );
83
+ --inpfg : var (--fc );
84
+ --inpbdi : var (--dang );
85
+
86
+ --gridbg : var (--oc );
87
+ --gridshd : var (--mc );
88
+
69
89
--fb : -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next" ,
70
90
"Segoe UI" , "Roboto" , "Oxygen" , "Ubuntu" , "Cantarell" , "Fira Sans" ,
71
91
"Droid Sans" , "Helvetica Neue" , sans-serif;
88
108
89
109
* { box-sizing : border-box; }
90
110
91
- /* @media (prefers-color-scheme: light) {
92
- :root:not(.it),
93
- ::backdrop {
94
- color-scheme: light;
95
- --c: var(--brand-blue);
96
- --ct: var(--dark-700);
97
- --cn: var(--dark-500);
98
-
99
- --bgc: var(--l);
100
- --fc: var(--d);
101
-
102
- --emphasize: var(--dark-600);
103
- --de-emphasize: var(--dark-200);
104
-
105
- --linkbg: var(--lf);
106
- --linkfg: var(--lite);
107
- --linkbgh: var(--f);
108
- --linkfgh: var(--lite);
109
-
110
- --nav-bg: var(--light-600);
111
- --nav-abg: var(--dark-100);
112
- --nav-a: var(--dark-100);
113
-
114
- --btnbg: var(--l);
115
- --btnfg: var(--di);
116
- --btnbgd: var(--lf);
117
- --btnfgd: var(--note);
118
- --btnbgh: var(--f);
119
- --btnfgh: var(--lite);
120
-
121
- --inpbg: var(--f);
122
- --inpbd: var(--note);
123
- --inpfg: var(--fc);
124
- --inpbdi: var(--dang);
125
-
126
- --mdlbg: var(--f4);
127
- --mdlfg: var(--di);
128
- --mdlbd: var(--lt);
129
-
130
- --gridbg: var(--lf);
131
- --gridshd: var(--lf);
132
- }
133
-
134
- .it {
135
- color-scheme: dark;
136
- --bgc: var(--d);
137
- --fc: var(--l);
138
-
139
- --linkbg: var(--oc);
140
- --linkfg: var(--info);
141
- --linkbgh: var(--c);
142
- --linkfgh: var(--info);
143
-
144
- --btnbg: var(--oc);
145
- --btnfg: var(--fc);
146
- --btnbgd: var(--d);
147
- --btnfgd: var(--note);
148
- --btnbgh: var(--c);
149
- --btnfgh: var(--info);
150
-
151
- --inpbg: var(--c);
152
- --inpbd: var(--hc);
153
- --inpfg: var(--fc);
154
- --inpbdi: var(--dang);
155
-
156
- --mdlbg: var(--d);
157
- --mdlfg: var(--f);
158
- --mdlbd: var(--dark-900);
159
-
160
- --gridbg: var(--oc);
161
- --gridshd: var(--mc);
162
- }
163
- progress:indeterminate {
164
- background: linear-gradient(
165
- 90deg,
166
- #0000 0%,
167
- #0000 50%,
168
- var(--lite) 100%
169
- );
170
- }
171
- nav a.theme::before {
172
- content: '☀';
173
- transform: rotateZ(0deg);
174
- }
175
- html:not(.it) nav a.theme::before {
176
- content: '☽';
177
- transform: rotateZ(45deg);
178
- }
179
- } */
180
- @media (prefers-color-scheme : dark) {
181
- : root : not (.it ),
182
- ::backdrop {
183
- color-scheme : dark;
184
- --bgc : var (--d );
185
- --fc : var (--l );
186
-
187
- --linkbg : var (--oc );
188
- --linkfg : var (--info );
189
- --linkbgh : var (--c );
190
- --linkfgh : var (--info );
191
-
192
- --btnbg : var (--oc );
193
- --btnfg : var (--fc );
194
- --btnbgd : var (--d );
195
- --btnfgd : var (--note );
196
- --btnbgh : var (--c );
197
- --btnfgh : var (--info );
198
-
199
- --inpbg : var (--c );
200
- --inpbd : var (--hc );
201
- --inpfg : var (--fc );
202
- --inpbdi : var (--dang );
203
-
204
- --mdlbg : var (--d );
205
- --mdlfg : var (--f );
206
- --mdlbd : var (--dark-900 );
207
-
208
- --gridbg : var (--oc );
209
- --gridshd : var (--mc );
210
- }
211
-
212
- .it {
213
- color-scheme : light;
214
- --bgc : var (--l );
215
- --fc : var (--d );
216
-
217
- --linkbg : var (--lf );
218
- --linkfg : var (--lite );
219
- --linkbgh : var (--f );
220
- --linkfgh : var (--lite );
221
-
222
- --btnbg : var (--l );
223
- --btnfg : var (--di );
224
- --btnbgd : var (--lf );
225
- --btnfgd : var (--note );
226
- --btnbgh : var (--f );
227
- --btnfgh : var (--lite );
228
-
229
- --inpbg : var (--f );
230
- --inpbd : var (--note );
231
- --inpfg : var (--fc );
232
- --inpbdi : var (--dang );
233
-
234
- --mdlbg : var (--f );
235
- --mdlfg : var (--di );
236
- --mdlbd : var (--lt );
237
-
238
- --gridbg : var (--lf );
239
- --gridshd : var (--lf );
240
- }
241
- progress : indeterminate {
242
- background : linear-gradient (
243
- 90deg ,
244
- # 0000 0% ,
245
- # 0000 50% ,
246
- var (--info ) 100%
247
- );
248
- }
249
- nav a .theme ::before {
250
- content : '☽' ;
251
- transform : rotateZ (45deg );
252
- }
253
- html : not (.it ) nav a .theme ::before {
254
- content : '☀' ;
255
- transform : rotateZ (0deg );
256
- }
257
- }
258
-
259
111
: focus-visible {
260
112
outline : -webkit-focus-ring-color auto 0 ;
261
113
}
@@ -265,6 +117,15 @@ body {
265
117
color : var (--fc );
266
118
}
267
119
120
+ progress : indeterminate {
121
+ background : linear-gradient (
122
+ 90deg ,
123
+ # 0000 0% ,
124
+ # 0000 50% ,
125
+ var (--info ) 100%
126
+ );
127
+ }
128
+
268
129
a {
269
130
/* color: var(--fc); */
270
131
color : var (--info );
@@ -466,6 +327,10 @@ th {
466
327
border-bottom : 3px solid var (--bgc );
467
328
transition : background-color var (--ease );
468
329
}
330
+ .cols > section > div > a : nth-of-type (n+4): last-of-type ,
331
+ .cols > section > div > article : nth-of-type (n+4): last-of-type {
332
+ border-bottom : 3px solid transparent;
333
+ }
469
334
.cols > section > div > a : focus ,
470
335
.cols > section > div > a : hover ,
471
336
.cols > section > div > article : focus ,
0 commit comments