veryroundbird.house
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4@layer base {
5 @font-face {
6 font-family: "InterVariable";
7 src: url("/static/fonts/InterVariable.woff2") format("woff2");
8 font-weight: normal;
9 font-style: normal;
10 font-display: swap;
11 }
12
13 @font-face {
14 font-family: "InterVariable";
15 src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
16 font-weight: 400;
17 font-style: italic;
18 font-display: swap;
19 }
20
21 @font-face {
22 font-family: "InterVariable";
23 src: url("/static/fonts/InterVariable.woff2") format("woff2");
24 font-weight: 600;
25 font-style: normal;
26 font-display: swap;
27 }
28
29 @font-face {
30 font-family: "IBMPlexMono";
31 src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
32 font-weight: normal;
33 font-style: italic;
34 font-display: swap;
35 }
36
37 ::selection {
38 @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
39 }
40
41 @layer base {
42 html {
43 font-size: 14px;
44 }
45 @supports (font-variation-settings: normal) {
46 html {
47 font-feature-settings:
48 "ss01" 1,
49 "kern" 1,
50 "liga" 1,
51 "cv05" 1,
52 "tnum" 1;
53 }
54 }
55
56 a {
57 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
58 }
59
60 label {
61 @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
62 }
63 input {
64 @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
65 }
66 textarea {
67 @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
68 }
69 details summary::-webkit-details-marker {
70 display: none;
71 }
72 }
73
74 @layer components {
75 .btn {
76 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
77 justify-center bg-transparent px-2 pb-[0.2rem] text-base
78 text-gray-900 before:absolute before:inset-0 before:-z-10
79 before:block before:rounded before:border before:border-gray-200
80 before:bg-white before:drop-shadow-sm
81 before:content-[''] hover:before:border-gray-300
82 hover:before:bg-gray-50
83 hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
84 focus:outline-none focus-visible:before:outline
85 focus-visible:before:outline-4 focus-visible:before:outline-gray-500
86 active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]
87 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200
88 disabled:hover:before:bg-white disabled:hover:before:shadow-none
89 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700
90 dark:hover:before:border-gray-600 dark:hover:before:bg-gray-700
91 dark:hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.2),inset_0_-2px_0_0_#2d3748]
92 dark:focus-visible:before:outline-gray-400
93 dark:active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.3)]
94 dark:disabled:hover:before:bg-gray-800 dark:disabled:hover:before:border-gray-700;
95 }
96 }
97 @layer utilities {
98 .error {
99 @apply py-1 text-red-400 dark:text-red-300;
100 }
101 .success {
102 @apply py-1 text-gray-900 dark:text-gray-100;
103 }
104 }
105}
106
107/* Background */
108.bg {
109 color: #4c4f69;
110 background-color: #eff1f5;
111}
112/* PreWrapper */
113.chroma {
114 color: #4c4f69;
115 background-color: #eff1f5;
116}
117/* Error */
118.chroma .err {
119 color: #d20f39;
120}
121/* LineLink */
122.chroma .lnlinks {
123 outline: none;
124 text-decoration: none;
125 color: inherit;
126}
127/* LineTableTD */
128.chroma .lntd {
129 vertical-align: top;
130 padding: 0;
131 margin: 0;
132 border: 0;
133}
134/* LineTable */
135.chroma .lntable {
136 border-spacing: 0;
137 padding: 0;
138 margin: 0;
139 border: 0;
140}
141/* LineHighlight */
142.chroma .hl {
143 background-color: #bcc0cc;
144}
145/* LineNumbersTable */
146.chroma .lnt {
147 white-space: pre;
148 -webkit-user-select: none;
149 user-select: none;
150 margin-right: 0.4em;
151 padding: 0 0.4em 0 0.4em;
152 color: #8c8fa1;
153}
154/* LineNumbers */
155.chroma .ln {
156 white-space: pre;
157 -webkit-user-select: none;
158 user-select: none;
159 margin-right: 0.4em;
160 padding: 0 0.4em 0 0.4em;
161 color: #8c8fa1;
162}
163/* Line */
164.chroma .line {
165 display: flex;
166}
167/* Keyword */
168.chroma .k {
169 color: #8839ef;
170}
171/* KeywordConstant */
172.chroma .kc {
173 color: #fe640b;
174}
175/* KeywordDeclaration */
176.chroma .kd {
177 color: #d20f39;
178}
179/* KeywordNamespace */
180.chroma .kn {
181 color: #179299;
182}
183/* KeywordPseudo */
184.chroma .kp {
185 color: #8839ef;
186}
187/* KeywordReserved */
188.chroma .kr {
189 color: #8839ef;
190}
191/* KeywordType */
192.chroma .kt {
193 color: #d20f39;
194}
195/* NameAttribute */
196.chroma .na {
197 color: #1e66f5;
198}
199/* NameBuiltin */
200.chroma .nb {
201 color: #04a5e5;
202}
203/* NameBuiltinPseudo */
204.chroma .bp {
205 color: #04a5e5;
206}
207/* NameClass */
208.chroma .nc {
209 color: #df8e1d;
210}
211/* NameConstant */
212.chroma .no {
213 color: #df8e1d;
214}
215/* NameDecorator */
216.chroma .nd {
217 color: #1e66f5;
218 font-weight: bold;
219}
220/* NameEntity */
221.chroma .ni {
222 color: #179299;
223}
224/* NameException */
225.chroma .ne {
226 color: #fe640b;
227}
228/* NameFunction */
229.chroma .nf {
230 color: #1e66f5;
231}
232/* NameFunctionMagic */
233.chroma .fm {
234 color: #1e66f5;
235}
236/* NameLabel */
237.chroma .nl {
238 color: #04a5e5;
239}
240/* NameNamespace */
241.chroma .nn {
242 color: #fe640b;
243}
244/* NameProperty */
245.chroma .py {
246 color: #fe640b;
247}
248/* NameTag */
249.chroma .nt {
250 color: #8839ef;
251}
252/* NameVariable */
253.chroma .nv {
254 color: #dc8a78;
255}
256/* NameVariableClass */
257.chroma .vc {
258 color: #dc8a78;
259}
260/* NameVariableGlobal */
261.chroma .vg {
262 color: #dc8a78;
263}
264/* NameVariableInstance */
265.chroma .vi {
266 color: #dc8a78;
267}
268/* NameVariableMagic */
269.chroma .vm {
270 color: #dc8a78;
271}
272/* LiteralString */
273.chroma .s {
274 color: #40a02b;
275}
276/* LiteralStringAffix */
277.chroma .sa {
278 color: #d20f39;
279}
280/* LiteralStringBacktick */
281.chroma .sb {
282 color: #40a02b;
283}
284/* LiteralStringChar */
285.chroma .sc {
286 color: #40a02b;
287}
288/* LiteralStringDelimiter */
289.chroma .dl {
290 color: #1e66f5;
291}
292/* LiteralStringDoc */
293.chroma .sd {
294 color: #9ca0b0;
295}
296/* LiteralStringDouble */
297.chroma .s2 {
298 color: #40a02b;
299}
300/* LiteralStringEscape */
301.chroma .se {
302 color: #1e66f5;
303}
304/* LiteralStringHeredoc */
305.chroma .sh {
306 color: #9ca0b0;
307}
308/* LiteralStringInterpol */
309.chroma .si {
310 color: #40a02b;
311}
312/* LiteralStringOther */
313.chroma .sx {
314 color: #40a02b;
315}
316/* LiteralStringRegex */
317.chroma .sr {
318 color: #179299;
319}
320/* LiteralStringSingle */
321.chroma .s1 {
322 color: #40a02b;
323}
324/* LiteralStringSymbol */
325.chroma .ss {
326 color: #40a02b;
327}
328/* LiteralNumber */
329.chroma .m {
330 color: #fe640b;
331}
332/* LiteralNumberBin */
333.chroma .mb {
334 color: #fe640b;
335}
336/* LiteralNumberFloat */
337.chroma .mf {
338 color: #fe640b;
339}
340/* LiteralNumberHex */
341.chroma .mh {
342 color: #fe640b;
343}
344/* LiteralNumberInteger */
345.chroma .mi {
346 color: #fe640b;
347}
348/* LiteralNumberIntegerLong */
349.chroma .il {
350 color: #fe640b;
351}
352/* LiteralNumberOct */
353.chroma .mo {
354 color: #fe640b;
355}
356/* Operator */
357.chroma .o {
358 color: #04a5e5;
359 font-weight: bold;
360}
361/* OperatorWord */
362.chroma .ow {
363 color: #04a5e5;
364 font-weight: bold;
365}
366/* Comment */
367.chroma .c {
368 color: #9ca0b0;
369 font-style: italic;
370}
371/* CommentHashbang */
372.chroma .ch {
373 color: #9ca0b0;
374 font-style: italic;
375}
376/* CommentMultiline */
377.chroma .cm {
378 color: #9ca0b0;
379 font-style: italic;
380}
381/* CommentSingle */
382.chroma .c1 {
383 color: #9ca0b0;
384 font-style: italic;
385}
386/* CommentSpecial */
387.chroma .cs {
388 color: #9ca0b0;
389 font-style: italic;
390}
391/* CommentPreproc */
392.chroma .cp {
393 color: #9ca0b0;
394 font-style: italic;
395}
396/* CommentPreprocFile */
397.chroma .cpf {
398 color: #9ca0b0;
399 font-weight: bold;
400 font-style: italic;
401}
402/* GenericDeleted */
403.chroma .gd {
404 color: #d20f39;
405 background-color: oklch(93.6% 0.032 17.717);
406}
407/* GenericEmph */
408.chroma .ge {
409 font-style: italic;
410}
411/* GenericError */
412.chroma .gr {
413 color: #d20f39;
414}
415/* GenericHeading */
416.chroma .gh {
417 color: #fe640b;
418 font-weight: bold;
419}
420/* GenericInserted */
421.chroma .gi {
422 color: #40a02b;
423 background-color: oklch(96.2% 0.044 156.743);
424}
425/* GenericStrong */
426.chroma .gs {
427 font-weight: bold;
428}
429/* GenericSubheading */
430.chroma .gu {
431 color: #fe640b;
432 font-weight: bold;
433}
434/* GenericTraceback */
435.chroma .gt {
436 color: #d20f39;
437}
438/* GenericUnderline */
439.chroma .gl {
440 text-decoration: underline;
441}
442
443@media (prefers-color-scheme: dark) {
444 /* Background */
445 .bg {
446 color: #cad3f5;
447 background-color: #24273a;
448 }
449 /* PreWrapper */
450 .chroma {
451 color: #cad3f5;
452 background-color: #24273a;
453 }
454 /* Error */
455 .chroma .err {
456 color: #ed8796;
457 }
458 /* LineLink */
459 .chroma .lnlinks {
460 outline: none;
461 text-decoration: none;
462 color: inherit;
463 }
464 /* LineTableTD */
465 .chroma .lntd {
466 vertical-align: top;
467 padding: 0;
468 margin: 0;
469 border: 0;
470 }
471 /* LineTable */
472 .chroma .lntable {
473 border-spacing: 0;
474 padding: 0;
475 margin: 0;
476 border: 0;
477 }
478 /* LineHighlight */
479 .chroma .hl {
480 background-color: #494d64;
481 }
482 /* LineNumbersTable */
483 .chroma .lnt {
484 white-space: pre;
485 -webkit-user-select: none;
486 user-select: none;
487 margin-right: 0.4em;
488 padding: 0 0.4em 0 0.4em;
489 color: #8087a2;
490 }
491 /* LineNumbers */
492 .chroma .ln {
493 white-space: pre;
494 -webkit-user-select: none;
495 user-select: none;
496 margin-right: 0.4em;
497 padding: 0 0.4em 0 0.4em;
498 color: #8087a2;
499 }
500 /* Line */
501 .chroma .line {
502 display: flex;
503 }
504 /* Keyword */
505 .chroma .k {
506 color: #c6a0f6;
507 }
508 /* KeywordConstant */
509 .chroma .kc {
510 color: #f5a97f;
511 }
512 /* KeywordDeclaration */
513 .chroma .kd {
514 color: #ed8796;
515 }
516 /* KeywordNamespace */
517 .chroma .kn {
518 color: #8bd5ca;
519 }
520 /* KeywordPseudo */
521 .chroma .kp {
522 color: #c6a0f6;
523 }
524 /* KeywordReserved */
525 .chroma .kr {
526 color: #c6a0f6;
527 }
528 /* KeywordType */
529 .chroma .kt {
530 color: #ed8796;
531 }
532 /* NameAttribute */
533 .chroma .na {
534 color: #8aadf4;
535 }
536 /* NameBuiltin */
537 .chroma .nb {
538 color: #91d7e3;
539 }
540 /* NameBuiltinPseudo */
541 .chroma .bp {
542 color: #91d7e3;
543 }
544 /* NameClass */
545 .chroma .nc {
546 color: #eed49f;
547 }
548 /* NameConstant */
549 .chroma .no {
550 color: #eed49f;
551 }
552 /* NameDecorator */
553 .chroma .nd {
554 color: #8aadf4;
555 font-weight: bold;
556 }
557 /* NameEntity */
558 .chroma .ni {
559 color: #8bd5ca;
560 }
561 /* NameException */
562 .chroma .ne {
563 color: #f5a97f;
564 }
565 /* NameFunction */
566 .chroma .nf {
567 color: #8aadf4;
568 }
569 /* NameFunctionMagic */
570 .chroma .fm {
571 color: #8aadf4;
572 }
573 /* NameLabel */
574 .chroma .nl {
575 color: #91d7e3;
576 }
577 /* NameNamespace */
578 .chroma .nn {
579 color: #f5a97f;
580 }
581 /* NameProperty */
582 .chroma .py {
583 color: #f5a97f;
584 }
585 /* NameTag */
586 .chroma .nt {
587 color: #c6a0f6;
588 }
589 /* NameVariable */
590 .chroma .nv {
591 color: #f4dbd6;
592 }
593 /* NameVariableClass */
594 .chroma .vc {
595 color: #f4dbd6;
596 }
597 /* NameVariableGlobal */
598 .chroma .vg {
599 color: #f4dbd6;
600 }
601 /* NameVariableInstance */
602 .chroma .vi {
603 color: #f4dbd6;
604 }
605 /* NameVariableMagic */
606 .chroma .vm {
607 color: #f4dbd6;
608 }
609 /* LiteralString */
610 .chroma .s {
611 color: #a6da95;
612 }
613 /* LiteralStringAffix */
614 .chroma .sa {
615 color: #ed8796;
616 }
617 /* LiteralStringBacktick */
618 .chroma .sb {
619 color: #a6da95;
620 }
621 /* LiteralStringChar */
622 .chroma .sc {
623 color: #a6da95;
624 }
625 /* LiteralStringDelimiter */
626 .chroma .dl {
627 color: #8aadf4;
628 }
629 /* LiteralStringDoc */
630 .chroma .sd {
631 color: #6e738d;
632 }
633 /* LiteralStringDouble */
634 .chroma .s2 {
635 color: #a6da95;
636 }
637 /* LiteralStringEscape */
638 .chroma .se {
639 color: #8aadf4;
640 }
641 /* LiteralStringHeredoc */
642 .chroma .sh {
643 color: #6e738d;
644 }
645 /* LiteralStringInterpol */
646 .chroma .si {
647 color: #a6da95;
648 }
649 /* LiteralStringOther */
650 .chroma .sx {
651 color: #a6da95;
652 }
653 /* LiteralStringRegex */
654 .chroma .sr {
655 color: #8bd5ca;
656 }
657 /* LiteralStringSingle */
658 .chroma .s1 {
659 color: #a6da95;
660 }
661 /* LiteralStringSymbol */
662 .chroma .ss {
663 color: #a6da95;
664 }
665 /* LiteralNumber */
666 .chroma .m {
667 color: #f5a97f;
668 }
669 /* LiteralNumberBin */
670 .chroma .mb {
671 color: #f5a97f;
672 }
673 /* LiteralNumberFloat */
674 .chroma .mf {
675 color: #f5a97f;
676 }
677 /* LiteralNumberHex */
678 .chroma .mh {
679 color: #f5a97f;
680 }
681 /* LiteralNumberInteger */
682 .chroma .mi {
683 color: #f5a97f;
684 }
685 /* LiteralNumberIntegerLong */
686 .chroma .il {
687 color: #f5a97f;
688 }
689 /* LiteralNumberOct */
690 .chroma .mo {
691 color: #f5a97f;
692 }
693 /* Operator */
694 .chroma .o {
695 color: #91d7e3;
696 font-weight: bold;
697 }
698 /* OperatorWord */
699 .chroma .ow {
700 color: #91d7e3;
701 font-weight: bold;
702 }
703 /* Comment */
704 .chroma .c {
705 color: #6e738d;
706 font-style: italic;
707 }
708 /* CommentHashbang */
709 .chroma .ch {
710 color: #6e738d;
711 font-style: italic;
712 }
713 /* CommentMultiline */
714 .chroma .cm {
715 color: #6e738d;
716 font-style: italic;
717 }
718 /* CommentSingle */
719 .chroma .c1 {
720 color: #6e738d;
721 font-style: italic;
722 }
723 /* CommentSpecial */
724 .chroma .cs {
725 color: #6e738d;
726 font-style: italic;
727 }
728 /* CommentPreproc */
729 .chroma .cp {
730 color: #6e738d;
731 font-style: italic;
732 }
733 /* CommentPreprocFile */
734 .chroma .cpf {
735 color: #6e738d;
736 font-weight: bold;
737 font-style: italic;
738 }
739 /* GenericDeleted */
740 .chroma .gd {
741 color: #ed8796;
742 background-color: oklch(44.4% 0.177 26.899 / 0.5);
743 }
744 /* GenericEmph */
745 .chroma .ge {
746 font-style: italic;
747 }
748 /* GenericError */
749 .chroma .gr {
750 color: #ed8796;
751 }
752 /* GenericHeading */
753 .chroma .gh {
754 color: #f5a97f;
755 font-weight: bold;
756 }
757 /* GenericInserted */
758 .chroma .gi {
759 color: #a6da95;
760 background-color: oklch(44.8% 0.119 151.328 / 0.5);
761 }
762 /* GenericStrong */
763 .chroma .gs {
764 font-weight: bold;
765 }
766 /* GenericSubheading */
767 .chroma .gu {
768 color: #f5a97f;
769 font-weight: bold;
770 }
771 /* GenericTraceback */
772 .chroma .gt {
773 color: #ed8796;
774 }
775 /* GenericUnderline */
776 .chroma .gl {
777 text-decoration: underline;
778 }
779}
780
781.chroma .line:has(.ln:target) {
782 @apply bg-amber-400/30 dark:bg-amber-500/20;
783}