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