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