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