this repo has no description
808.foxx.ink
1ul.delimiter,
2ul.breadcrumb,
3nav > ul,
4ul[role=presentation] {
5 margin: 0;
6 list-style: none;
7 font-size: inherit;
8}
9
10ul.delimiter,
11ul.delimiter li,
12ul.inline,
13ul.inline li,
14nav > ul,
15nav > ul > li {
16 display: inline;
17 padding: 0;
18}
19
20/* form dependency for search & share button */
21
22.form {
23 flex-direction: row !important;
24 align-items: center;
25}
26
27.form__input {
28 flex: 1;
29 border: none;
30 border-radius: 2rem 0 0 2rem;
31 background: none;
32 padding: 0;
33 padding-left: 1em;
34 color: var(--fg);
35 font-family: var(--sf), sans-serif;
36}
37
38.pagefind-ui__button,
39.form__button {
40 display: inline-flex;
41 position: relative;
42 border: none;
43 border-radius: 0 50% 50% 0;
44 background: none;
45 padding: 0;
46}
47
48/* container */
49
50body > header,
51body > header > nav {
52 display: flex;
53 z-index: 2;
54}
55
56#top-nav {
57 margin-left: auto;
58 font-weight: bold;
59}
60
61#top-nav[open],
62#has-main-menu {
63 flex: 1;
64}
65
66#top-nav > nav {
67 display: flex;
68 justify-content: flex-end;
69 gap: 1ex;
70}
71
72#main-menu,
73#main-menu .l1 {
74 /* flush item to right-end when logotype on the left */
75 justify-content: flex-end;
76}
77
78#main-menu .l1 {
79 display: flex;
80 gap: 1ex;
81}
82
83/* menu icon */
84
85#top-nav .icon {
86 position: relative;
87 top: -0.05em;
88 margin-right: 0.3em;
89}
90
91.menu-icon::before {
92 padding: 1pt;
93 font-family: 'base-ui';
94 content: '\e90b';
95}
96
97/* #has-more-menu > summary {
98 width: 43pt;
99} */
100
101#has-a11y[open] > summary .icon::before,
102#has-search[open] .icon::before,
103details[open] > summary > .menu-icon::before {
104 --anm: blinking 2s step-end infinite;
105 color: var(--ac);
106}
107
108/* on 'hull' viewport */
109
110/* #i18n-menu, */
111#more-menu,
112.on-hull,
113.screening {
114 /* 'hull' --vbody container */
115 position: fixed;
116 top: var(--vhead);
117 left: 0;
118 width: 100vw;
119 height: var(--vbody);
120}
121
122.screening {
123 /* obscure main body */
124 --blur: blur(0.2vmin);
125 --dim: brightness(0.96);
126 z-index: -1;
127 background-color: #80808008;
128 -webkit-backdrop-filter: var(--blur) var(--dim);
129 backdrop-filter: var(--blur) var(--dim);
130}
131
132/* item on 'deck' */
133
134.on-deck,
135a#has-i18n {
136 display: flex;
137 align-items: center;
138 justify-content: center;
139 margin: auto 0;
140 padding: unset;
141 min-width: var(--vhead);
142 height: calc(var(--vhead) - 12pt);
143 max-height: 4.2rem;
144}
145
146/* #has-i18n .on-deck {
147 padding: 0 1ex;
148 width: unset;
149 gap: 3pt;
150} */
151
152.on-deck .t {
153 --tsf: unset;
154 display: block;
155 top: var(--vhead);
156}
157
158/* item on 'plank' */
159
160.on-plank {
161 /* add on-plank */
162 display: flex;
163 flex-direction: column;
164 border: var(--border);
165 border-radius: 1ex;
166 background: var(--bg);
167 padding: 1.414ex;
168 width: fit-content;
169 max-height: calc(var(--vbody) - 2rem);
170 overflow-y: auto;
171 gap: 1ex;
172}
173
174.on-plank ul {
175 display: flex;
176 flex-direction: column;
177 margin: 0 1ex;
178 border-right: var(--bound);
179 padding: 1ex;
180 gap: 1ex;
181}
182
183details[open] .on-plank,
184.l1 details[open] > ul,
185.marginpar-ctrl:checked + label + .marginpar {
186 --anm: expand 99ms forwards;
187 --tso: top;
188}
189
190#main-menu .on-plank {
191 position: fixed;
192 top: calc(var(--vhead) + 1rem);
193 max-width: 21rem;
194 /* translate: -1.414ex; */
195 translate: -75pt;
196 white-space: nowrap;
197}
198
199/* .on-hull > .on-plank */
200/* #i18n-menu > .on-plank,
201#more-menu > .on-plank {
202 margin: 1rem var(--void) 1rem auto;
203 max-width: var(--max-width);
204} */
205
206/* visible menu item */
207
208#has-l10n a,
209#top-nav a,
210.anchor {
211 display: flex;
212 padding: 1ex;
213 width: 100%;
214 color: var(--fg);
215}
216
217#top-nav a.has-desc {
218 flex-direction: column;
219}
220
221summary.anchor .has-aria-label::after {
222 color: var(--mid);
223 font-size: 0.9em;
224 font-weight: normal;
225}
226
227.marginpar-ctrl + label::before,
228.anchor:after {
229 /* add indicator [v] */
230 --tst: 200ms ease-out;
231 position: relative;
232 top: 0.23em;
233 left: 0.43em;
234 align-self: center;
235 margin-left: auto;
236 background: linear-gradient(to top, transparent 49%, var(--g18) 51%);
237 -webkit-background-clip: text;
238 background-clip: text;
239 color: transparent;
240 font: 8pt 'base-ui';
241 content: '\e913';
242}
243
244.anchor:hover::after {
245 background: linear-gradient(to top, transparent 49%, var(--ac) 51%);
246 -webkit-background-clip: text;
247 background-clip: text;
248 color: transparent;
249}
250
251/* #has-i18n .anchor::after {
252 left: unset;
253} */
254
255.marginpar-ctrl:checked + label::before,
256details[open] > .anchor:after {
257 /* change indicator state [x] */
258 --anm: blinking 3s step-end infinite;
259 background: unset;
260 top: 0;
261 color: var(--g18);
262}
263
264details[open] > .anchor.on-deck:after {
265 /* make opened <details> element more prominent */
266 color: red;
267}
268
269/* bilingual */
270
271a#has-i18n {
272 align-items: end;
273 width: auto;
274 font-size: .9em;
275 font-weight: 550;
276 gap: 3pt;
277}
278
279a#has-i18n > .alt,
280a#has-i18n:hover > .act,
281a#has-i18n:focus > .act,
282a#has-i18n:active > .act {
283 /* active/current language */
284 color: var(--g18);
285}
286
287a#has-i18n:hover > .alt,
288a#has-i18n:focus > .alt,
289a#has-i18n:active > .alt {
290 /* alternate language */
291 color: var(--fg);
292}
293
294/* multilingual */
295
296#has-l10n {
297 display: inline-block;
298}
299
300#has-l10n summary {
301 display: block !important;
302 padding: 0 1.4ex 0 4pt;
303 font-size: 0.9em;
304}
305
306#has-l10n > summary::before {
307 font-family: 'base-ui';
308 content: '\e90a\a0';
309}
310
311/* #i18n-menu a, */
312#has-l10n a {
313 align-items: center;
314 gap: 1ex;
315}
316
317#has-l10n .on-plank {
318 position: absolute;
319 z-index: 1;
320 margin-top: 1ex;
321 border: var(--border);
322 background: var(--bg);
323 width: auto;
324}
325
326#main-footer a::after,
327.parent-anchor a::after,
328/* #i18n-menu a::after, */
329#content a::after {
330 --tsf: rotate(45deg);
331 display: inline-block;
332 margin-top: 0.3em;
333 margin-left: auto;
334 font: 0.7em 'base-ui';
335 content: '\e902';
336}
337
338/* #i18n-menu a::after, */
339.parent-anchor a::after {
340 color: var(--g18);
341}
342
343.hero nav a {
344 display: inline-block;
345 position: relative;
346 color: var(--fg);
347}
348
349.hero nav .t {
350 top: 150%;
351}
352
353.hero nav a .icon {
354 display: inline-flex;
355 margin: 2pt;
356 padding: 6pt;
357 font-size: var(--large);
358}
359
360@media (max-width: 640px) {
361
362 /* container behaviour */
363
364 #top-nav * {
365 outline: none !important;
366 }
367
368 #top-nav[open] > nav {
369 --anm: expand 99ms forwards;
370 --tso: top;
371 }
372
373 .has-childfree li,
374 .has-childfree li.lfill {
375 margin: auto;
376 }
377
378 #main-menu {
379 display: unset;
380 }
381
382 #main-menu .l1 {
383 flex-direction: column;
384 }
385
386 /* swap menu-icon */
387
388 #top-nav > summary,
389 #top-nav[open] > summary {
390 display: flex !important;
391 margin-left: auto;
392 width: 43pt;
393 }
394
395 /* #has-more-menu > summary {
396 width: 100%;
397 } */
398
399 /* #has-search .t, */
400 /* #has-more-menu .t {
401 display: initial;
402 position: unset;
403 visibility: unset;
404 background: unset;
405 width: 100%;
406 color: inherit;
407 font: inherit;
408 } */
409
410 /* swap screen element */
411
412 #top-nav-screen.screening {
413 display: block;
414 background-color: var(--bg);
415 height: calc(100vh - var(--vhead));
416 }
417
418 /* swap hull element */
419
420 #top-nav > nav {
421 position: fixed;
422 top: var(--vhead);
423 left: 0;
424 flex-direction: column;
425 justify-content: unset;
426 z-index: 3;
427 padding: 1.414ex;
428 width: 101vw;
429 height: var(--vbody);
430 overflow-y: auto;
431 }
432
433 /* #i18n-menu, */
434 #more-menu,
435 /* #has-search-fallback, */
436 #main-menu .on-plank {
437 /* also unset main menu plank */
438 position: unset;
439 width: unset;
440 max-width: unset;
441 height: unset;
442 }
443
444 /* reorder hull item */
445
446 /* #has-search {
447 order: 1;
448 } */
449
450 #has-main-menu {
451 flex: unset;
452 order: 2;
453 }
454
455 /* #has-more-menu {
456 order: 3;
457 } */
458
459 #has-i18n,
460 #bi18n {
461 order: 4;
462 margin: auto 1ex 2rem;
463 }
464
465 /* redefine deck element */
466
467 #top-nav > nav .on-deck {
468 justify-content: unset;
469 height: unset;
470 }
471
472 /* #top-nav > nav #has-i18n .on-deck {
473 padding: 1ex;
474 gap: 1ex;
475 } */
476
477 /* swap plank element */
478
479 .on-plank {
480 border: unset;
481 background: unset;
482 min-width: unset;
483 max-height: unset;
484 }
485
486 #main-menu .on-plank {
487 margin: 0 1ex;
488 border-right: var(--bound);
489 border-radius: 0;
490 padding: 1ex;
491 translate: unset;
492 }
493
494 /* #i18n-menu > .on-plank, */
495 #more-menu > .on-plank {
496 /* .on-hull > .on-plank */
497 margin: unset;
498 padding: 0;
499 width: 100%;
500 }
501
502 /* #has-search,
503 #has-more-menu, */
504 #has-main-menu{
505 /* make as plank */
506 margin: 1ex;
507 padding: 1ex;
508 }
509
510 /* #has-more-menu {
511 border: var(--border);
512 border-radius: 1ex;
513 } */
514
515 /* #has-more-menu[open], */
516 #author-name-menu {
517 border: none;
518 }
519
520 details[open] > .anchor.on-deck:after {
521 color: var(--g18);
522 }
523
524 /* bilingual */
525
526 a#has-i18n {
527 font-size: unset;
528 align-items: center;
529 }
530
531 #bi18n .t {
532 position: unset;
533 visibility: unset;
534 background: unset;
535 width: unset;
536 color: unset;
537 font: unset;
538 }
539
540 /* multilingual */
541
542 /* #i18n-menu {
543 margin-top: 1ex;
544 } */
545
546 a#has-i18n .emoji,
547 .languangeName {
548 display: block !important;
549 }
550
551 /* hide desktop element */
552
553 a#has-i18n > .t,
554 #top-nav > nav .screening,
555 #top-nav > summary > .t,
556 /* #has-search[open] > summary,
557 #has-more-menu[open] > summary,
558 #has-more-menu .menu-icon,
559 #has-search .icon, */
560 .iso639 {
561 display: none;
562 }
563
564}