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