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