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