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