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