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