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