ptr.pet
forked from
tangled.org/core
fork
Configure Feed
Select the types of activity you want to include in your feed.
Monorepo for Tangled
fork
Configure Feed
Select the types of activity you want to include in your feed.
anirudh.fi
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 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,
169 .prose ol {
170 @apply my-1 py-0;
171 }
172
173 .prose img {
174 display: inline;
175 margin: 0;
176 vertical-align: middle;
177 }
178
179 .prose input {
180 @apply inline-block my-0 mb-1 mx-1;
181 }
182
183 .prose input[type="checkbox"] {
184 @apply disabled:accent-blue-500 checked:accent-blue-500 disabled:checked:accent-blue-500;
185 }
186
187 /* Base callout */
188 details[data-callout] {
189 @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
190 }
191
192 details[data-callout] > summary {
193 @apply font-bold cursor-pointer mb-1;
194 }
195
196 details[data-callout] > .callout-content {
197 @apply text-sm leading-snug;
198 }
199
200 /* Note (blue) */
201 details[data-callout="note" i] {
202 @apply border-blue-400 dark:border-blue-500;
203 }
204 details[data-callout="note" i] > summary {
205 @apply text-blue-700 dark:text-blue-400;
206 }
207
208 /* Important (purple) */
209 details[data-callout="important" i] {
210 @apply border-purple-400 dark:border-purple-500;
211 }
212 details[data-callout="important" i] > summary {
213 @apply text-purple-700 dark:text-purple-400;
214 }
215
216 /* Warning (yellow) */
217 details[data-callout="warning" i] {
218 @apply border-yellow-400 dark:border-yellow-500;
219 }
220 details[data-callout="warning" i] > summary {
221 @apply text-yellow-700 dark:text-yellow-400;
222 }
223
224 /* Caution (red) */
225 details[data-callout="caution" i] {
226 @apply border-red-400 dark:border-red-500;
227 }
228 details[data-callout="caution" i] > summary {
229 @apply text-red-700 dark:text-red-400;
230 }
231
232 /* Tip (green) */
233 details[data-callout="tip" i] {
234 @apply border-green-400 dark:border-green-500;
235 }
236 details[data-callout="tip" i] > summary {
237 @apply text-green-700 dark:text-green-400;
238 }
239
240 /* Optional: hide the disclosure arrow like GitHub */
241 details[data-callout] > summary::-webkit-details-marker {
242 display: none;
243 }
244 }
245 @layer utilities {
246 .error {
247 @apply py-1 text-red-400 dark:text-red-300;
248 }
249 .success {
250 @apply py-1 text-gray-900 dark:text-gray-100;
251 }
252 }
253}
254
255/* Background */
256.bg {
257 color: #4c4f69;
258 background-color: #eff1f5;
259}
260/* PreWrapper */
261.chroma {
262 color: #4c4f69;
263}
264/* Error */
265.chroma .err {
266 color: #d20f39;
267}
268/* LineLink */
269.chroma .lnlinks {
270 outline: none;
271 text-decoration: none;
272 color: inherit;
273}
274/* LineTableTD */
275.chroma .lntd {
276 vertical-align: top;
277 padding: 0;
278 margin: 0;
279 border: 0;
280}
281/* LineTable */
282.chroma .lntable {
283 border-spacing: 0;
284 padding: 0;
285 margin: 0;
286 border: 0;
287}
288/* LineHighlight */
289.chroma .hl {
290 @apply bg-amber-400/30 dark:bg-amber-500/20;
291}
292
293/* LineNumbersTable */
294.chroma .lnt {
295 white-space: pre;
296 -webkit-user-select: none;
297 user-select: none;
298 margin-right: 0.4em;
299 padding: 0 0.4em 0 0.4em;
300 color: #8c8fa1;
301}
302/* LineNumbers */
303.chroma .ln {
304 white-space: pre;
305 -webkit-user-select: none;
306 user-select: none;
307 margin-right: 0.4em;
308 padding: 0 0.4em 0 0.4em;
309 color: #8c8fa1;
310}
311/* Line */
312.chroma .line {
313 display: flex;
314}
315/* Keyword */
316.chroma .k {
317 color: #8839ef;
318}
319/* KeywordConstant */
320.chroma .kc {
321 color: #fe640b;
322}
323/* KeywordDeclaration */
324.chroma .kd {
325 color: #d20f39;
326}
327/* KeywordNamespace */
328.chroma .kn {
329 color: #179299;
330}
331/* KeywordPseudo */
332.chroma .kp {
333 color: #8839ef;
334}
335/* KeywordReserved */
336.chroma .kr {
337 color: #8839ef;
338}
339/* KeywordType */
340.chroma .kt {
341 color: #d20f39;
342}
343/* NameAttribute */
344.chroma .na {
345 color: #1e66f5;
346}
347/* NameBuiltin */
348.chroma .nb {
349 color: #04a5e5;
350}
351/* NameBuiltinPseudo */
352.chroma .bp {
353 color: #04a5e5;
354}
355/* NameClass */
356.chroma .nc {
357 color: #df8e1d;
358}
359/* NameConstant */
360.chroma .no {
361 color: #df8e1d;
362}
363/* NameDecorator */
364.chroma .nd {
365 color: #1e66f5;
366 font-weight: bold;
367}
368/* NameEntity */
369.chroma .ni {
370 color: #179299;
371}
372/* NameException */
373.chroma .ne {
374 color: #fe640b;
375}
376/* NameFunction */
377.chroma .nf {
378 color: #1e66f5;
379}
380/* NameFunctionMagic */
381.chroma .fm {
382 color: #1e66f5;
383}
384/* NameLabel */
385.chroma .nl {
386 color: #04a5e5;
387}
388/* NameNamespace */
389.chroma .nn {
390 color: #fe640b;
391}
392/* NameProperty */
393.chroma .py {
394 color: #fe640b;
395}
396/* NameTag */
397.chroma .nt {
398 color: #8839ef;
399}
400/* NameVariable */
401.chroma .nv {
402 color: #dc8a78;
403}
404/* NameVariableClass */
405.chroma .vc {
406 color: #dc8a78;
407}
408/* NameVariableGlobal */
409.chroma .vg {
410 color: #dc8a78;
411}
412/* NameVariableInstance */
413.chroma .vi {
414 color: #dc8a78;
415}
416/* NameVariableMagic */
417.chroma .vm {
418 color: #dc8a78;
419}
420/* LiteralString */
421.chroma .s {
422 color: #40a02b;
423}
424/* LiteralStringAffix */
425.chroma .sa {
426 color: #d20f39;
427}
428/* LiteralStringBacktick */
429.chroma .sb {
430 color: #40a02b;
431}
432/* LiteralStringChar */
433.chroma .sc {
434 color: #40a02b;
435}
436/* LiteralStringDelimiter */
437.chroma .dl {
438 color: #1e66f5;
439}
440/* LiteralStringDoc */
441.chroma .sd {
442 color: #9ca0b0;
443}
444/* LiteralStringDouble */
445.chroma .s2 {
446 color: #40a02b;
447}
448/* LiteralStringEscape */
449.chroma .se {
450 color: #1e66f5;
451}
452/* LiteralStringHeredoc */
453.chroma .sh {
454 color: #9ca0b0;
455}
456/* LiteralStringInterpol */
457.chroma .si {
458 color: #40a02b;
459}
460/* LiteralStringOther */
461.chroma .sx {
462 color: #40a02b;
463}
464/* LiteralStringRegex */
465.chroma .sr {
466 color: #179299;
467}
468/* LiteralStringSingle */
469.chroma .s1 {
470 color: #40a02b;
471}
472/* LiteralStringSymbol */
473.chroma .ss {
474 color: #40a02b;
475}
476/* LiteralNumber */
477.chroma .m {
478 color: #fe640b;
479}
480/* LiteralNumberBin */
481.chroma .mb {
482 color: #fe640b;
483}
484/* LiteralNumberFloat */
485.chroma .mf {
486 color: #fe640b;
487}
488/* LiteralNumberHex */
489.chroma .mh {
490 color: #fe640b;
491}
492/* LiteralNumberInteger */
493.chroma .mi {
494 color: #fe640b;
495}
496/* LiteralNumberIntegerLong */
497.chroma .il {
498 color: #fe640b;
499}
500/* LiteralNumberOct */
501.chroma .mo {
502 color: #fe640b;
503}
504/* Operator */
505.chroma .o {
506 color: #04a5e5;
507 font-weight: bold;
508}
509/* OperatorWord */
510.chroma .ow {
511 color: #04a5e5;
512 font-weight: bold;
513}
514/* Comment */
515.chroma .c {
516 color: #9ca0b0;
517 font-style: italic;
518}
519/* CommentHashbang */
520.chroma .ch {
521 color: #9ca0b0;
522 font-style: italic;
523}
524/* CommentMultiline */
525.chroma .cm {
526 color: #9ca0b0;
527 font-style: italic;
528}
529/* CommentSingle */
530.chroma .c1 {
531 color: #9ca0b0;
532 font-style: italic;
533}
534/* CommentSpecial */
535.chroma .cs {
536 color: #9ca0b0;
537 font-style: italic;
538}
539/* CommentPreproc */
540.chroma .cp {
541 color: #9ca0b0;
542 font-style: italic;
543}
544/* CommentPreprocFile */
545.chroma .cpf {
546 color: #9ca0b0;
547 font-weight: bold;
548 font-style: italic;
549}
550/* GenericDeleted */
551.chroma .gd {
552 color: #d20f39;
553 background-color: oklch(93.6% 0.032 17.717);
554}
555/* GenericEmph */
556.chroma .ge {
557 font-style: italic;
558}
559/* GenericError */
560.chroma .gr {
561 color: #d20f39;
562}
563/* GenericHeading */
564.chroma .gh {
565 color: #fe640b;
566 font-weight: bold;
567}
568/* GenericInserted */
569.chroma .gi {
570 color: #40a02b;
571 background-color: oklch(96.2% 0.044 156.743);
572}
573/* GenericStrong */
574.chroma .gs {
575 font-weight: bold;
576}
577/* GenericSubheading */
578.chroma .gu {
579 color: #fe640b;
580 font-weight: bold;
581}
582/* GenericTraceback */
583.chroma .gt {
584 color: #d20f39;
585}
586/* GenericUnderline */
587.chroma .gl {
588 text-decoration: underline;
589}
590
591@media (prefers-color-scheme: dark) {
592 /* Background */
593 .bg {
594 color: #cad3f5;
595 background-color: #24273a;
596 }
597 /* PreWrapper */
598 .chroma {
599 color: #cad3f5;
600 }
601 /* Error */
602 .chroma .err {
603 color: #ed8796;
604 }
605 /* LineLink */
606 .chroma .lnlinks {
607 outline: none;
608 text-decoration: none;
609 color: inherit;
610 }
611 /* LineTableTD */
612 .chroma .lntd {
613 vertical-align: top;
614 padding: 0;
615 margin: 0;
616 border: 0;
617 }
618 /* LineTable */
619 .chroma .lntable {
620 border-spacing: 0;
621 padding: 0;
622 margin: 0;
623 border: 0;
624 }
625 /* LineHighlight */
626 .chroma .hl {
627 background-color: #494d64;
628 }
629 /* LineNumbersTable */
630 .chroma .lnt {
631 white-space: pre;
632 -webkit-user-select: none;
633 user-select: none;
634 margin-right: 0.4em;
635 padding: 0 0.4em 0 0.4em;
636 color: #8087a2;
637 }
638 /* LineNumbers */
639 .chroma .ln {
640 white-space: pre;
641 -webkit-user-select: none;
642 user-select: none;
643 margin-right: 0.4em;
644 padding: 0 0.4em 0 0.4em;
645 color: #8087a2;
646 }
647 /* Line */
648 .chroma .line {
649 display: flex;
650 }
651 /* Keyword */
652 .chroma .k {
653 color: #c6a0f6;
654 }
655 /* KeywordConstant */
656 .chroma .kc {
657 color: #f5a97f;
658 }
659 /* KeywordDeclaration */
660 .chroma .kd {
661 color: #ed8796;
662 }
663 /* KeywordNamespace */
664 .chroma .kn {
665 color: #8bd5ca;
666 }
667 /* KeywordPseudo */
668 .chroma .kp {
669 color: #c6a0f6;
670 }
671 /* KeywordReserved */
672 .chroma .kr {
673 color: #c6a0f6;
674 }
675 /* KeywordType */
676 .chroma .kt {
677 color: #ed8796;
678 }
679 /* NameAttribute */
680 .chroma .na {
681 color: #8aadf4;
682 }
683 /* NameBuiltin */
684 .chroma .nb {
685 color: #91d7e3;
686 }
687 /* NameBuiltinPseudo */
688 .chroma .bp {
689 color: #91d7e3;
690 }
691 /* NameClass */
692 .chroma .nc {
693 color: #eed49f;
694 }
695 /* NameConstant */
696 .chroma .no {
697 color: #eed49f;
698 }
699 /* NameDecorator */
700 .chroma .nd {
701 color: #8aadf4;
702 font-weight: bold;
703 }
704 /* NameEntity */
705 .chroma .ni {
706 color: #8bd5ca;
707 }
708 /* NameException */
709 .chroma .ne {
710 color: #f5a97f;
711 }
712 /* NameFunction */
713 .chroma .nf {
714 color: #8aadf4;
715 }
716 /* NameFunctionMagic */
717 .chroma .fm {
718 color: #8aadf4;
719 }
720 /* NameLabel */
721 .chroma .nl {
722 color: #91d7e3;
723 }
724 /* NameNamespace */
725 .chroma .nn {
726 color: #f5a97f;
727 }
728 /* NameProperty */
729 .chroma .py {
730 color: #f5a97f;
731 }
732 /* NameTag */
733 .chroma .nt {
734 color: #c6a0f6;
735 }
736 /* NameVariable */
737 .chroma .nv {
738 color: #f4dbd6;
739 }
740 /* NameVariableClass */
741 .chroma .vc {
742 color: #f4dbd6;
743 }
744 /* NameVariableGlobal */
745 .chroma .vg {
746 color: #f4dbd6;
747 }
748 /* NameVariableInstance */
749 .chroma .vi {
750 color: #f4dbd6;
751 }
752 /* NameVariableMagic */
753 .chroma .vm {
754 color: #f4dbd6;
755 }
756 /* LiteralString */
757 .chroma .s {
758 color: #a6da95;
759 }
760 /* LiteralStringAffix */
761 .chroma .sa {
762 color: #ed8796;
763 }
764 /* LiteralStringBacktick */
765 .chroma .sb {
766 color: #a6da95;
767 }
768 /* LiteralStringChar */
769 .chroma .sc {
770 color: #a6da95;
771 }
772 /* LiteralStringDelimiter */
773 .chroma .dl {
774 color: #8aadf4;
775 }
776 /* LiteralStringDoc */
777 .chroma .sd {
778 color: #6e738d;
779 }
780 /* LiteralStringDouble */
781 .chroma .s2 {
782 color: #a6da95;
783 }
784 /* LiteralStringEscape */
785 .chroma .se {
786 color: #8aadf4;
787 }
788 /* LiteralStringHeredoc */
789 .chroma .sh {
790 color: #6e738d;
791 }
792 /* LiteralStringInterpol */
793 .chroma .si {
794 color: #a6da95;
795 }
796 /* LiteralStringOther */
797 .chroma .sx {
798 color: #a6da95;
799 }
800 /* LiteralStringRegex */
801 .chroma .sr {
802 color: #8bd5ca;
803 }
804 /* LiteralStringSingle */
805 .chroma .s1 {
806 color: #a6da95;
807 }
808 /* LiteralStringSymbol */
809 .chroma .ss {
810 color: #a6da95;
811 }
812 /* LiteralNumber */
813 .chroma .m {
814 color: #f5a97f;
815 }
816 /* LiteralNumberBin */
817 .chroma .mb {
818 color: #f5a97f;
819 }
820 /* LiteralNumberFloat */
821 .chroma .mf {
822 color: #f5a97f;
823 }
824 /* LiteralNumberHex */
825 .chroma .mh {
826 color: #f5a97f;
827 }
828 /* LiteralNumberInteger */
829 .chroma .mi {
830 color: #f5a97f;
831 }
832 /* LiteralNumberIntegerLong */
833 .chroma .il {
834 color: #f5a97f;
835 }
836 /* LiteralNumberOct */
837 .chroma .mo {
838 color: #f5a97f;
839 }
840 /* Operator */
841 .chroma .o {
842 color: #91d7e3;
843 font-weight: bold;
844 }
845 /* OperatorWord */
846 .chroma .ow {
847 color: #91d7e3;
848 font-weight: bold;
849 }
850 /* Comment */
851 .chroma .c {
852 color: #6e738d;
853 font-style: italic;
854 }
855 /* CommentHashbang */
856 .chroma .ch {
857 color: #6e738d;
858 font-style: italic;
859 }
860 /* CommentMultiline */
861 .chroma .cm {
862 color: #6e738d;
863 font-style: italic;
864 }
865 /* CommentSingle */
866 .chroma .c1 {
867 color: #6e738d;
868 font-style: italic;
869 }
870 /* CommentSpecial */
871 .chroma .cs {
872 color: #6e738d;
873 font-style: italic;
874 }
875 /* CommentPreproc */
876 .chroma .cp {
877 color: #6e738d;
878 font-style: italic;
879 }
880 /* CommentPreprocFile */
881 .chroma .cpf {
882 color: #6e738d;
883 font-weight: bold;
884 font-style: italic;
885 }
886 /* GenericDeleted */
887 .chroma .gd {
888 color: #ed8796;
889 background-color: oklch(44.4% 0.177 26.899 / 0.5);
890 }
891 /* GenericEmph */
892 .chroma .ge {
893 font-style: italic;
894 }
895 /* GenericError */
896 .chroma .gr {
897 color: #ed8796;
898 }
899 /* GenericHeading */
900 .chroma .gh {
901 color: #f5a97f;
902 font-weight: bold;
903 }
904 /* GenericInserted */
905 .chroma .gi {
906 color: #a6da95;
907 background-color: oklch(44.8% 0.119 151.328 / 0.5);
908 }
909 /* GenericStrong */
910 .chroma .gs {
911 font-weight: bold;
912 }
913 /* GenericSubheading */
914 .chroma .gu {
915 color: #f5a97f;
916 font-weight: bold;
917 }
918 /* GenericTraceback */
919 .chroma .gt {
920 color: #ed8796;
921 }
922 /* GenericUnderline */
923 .chroma .gl {
924 text-decoration: underline;
925 }
926}