pyrox.dev
1@import "tailwindcss";
2
3.latte {
4 --ctp-rosewater: rgb(220 138 120);
5 --ctp-flamingo: rgb(221 120 120);
6 --ctp-pink: rgb(234 118 203);
7 --ctp-mauve: rgb(136 57 239);
8 --ctp-red: rgb(210 15 57);
9 --ctp-maroon: rgb(230 69 83);
10 --ctp-peach: rgb(254 100 11);
11 --ctp-yellow: rgb(223 142 29);
12 --ctp-green: rgb(64 160 43);
13 --ctp-teal: rgb(23 146 153);
14 --ctp-sky: rgb(4 165 229);
15 --ctp-sapphire: rgb(32 159 181);
16 --ctp-blue: rgb(30 102 245);
17 --ctp-lavender: rgb(114 135 253);
18 --ctp-text: rgb(76 79 105);
19 --ctp-subtext1: rgb(92 95 119);
20 --ctp-subtext0: rgb(108 111 133);
21 --ctp-overlay2: rgb(124 127 147);
22 --ctp-overlay1: rgb(140 143 161);
23 --ctp-overlay0: rgb(156 160 176);
24 --ctp-surface2: rgb(172 176 190);
25 --ctp-surface1: rgb(188 192 204);
26 --ctp-surface0: rgb(204 208 218);
27 --ctp-base: rgb(239 241 245);
28 --ctp-mantle: rgb(230 233 239);
29 --ctp-crust: rgb(220 224 232);
30 --callout-blend-mode: darken;
31}
32.mocha {
33 --ctp-rosewater: rgb(245 224 220);
34 --ctp-flamingo: rgb(242 205 205);
35 --ctp-pink: rgb(245 194 231);
36 --ctp-mauve: rgb(203 166 247);
37 --ctp-red: rgb(243 139 168);
38 --ctp-maroon: rgb(235 160 172);
39 --ctp-peach: rgb(250 179 135);
40 --ctp-yellow: rgb(249 226 175);
41 --ctp-green: rgb(166 227 161);
42 --ctp-teal: rgb(148 226 213);
43 --ctp-sky: rgb(137 220 235);
44 --ctp-sapphire: rgb(116 199 236);
45 --ctp-blue: rgb(137 180 250);
46 --ctp-lavender: rgb(180 190 254);
47 --ctp-text: rgb(205 214 244);
48 --ctp-subtext1: rgb(186 194 222);
49 --ctp-subtext0: rgb(166 173 200);
50 --ctp-overlay2: rgb(147 153 178);
51 --ctp-overlay1: rgb(127 132 156);
52 --ctp-overlay0: rgb(108 112 134);
53 --ctp-surface2: rgb(88 91 112);
54 --ctp-surface1: rgb(69 71 90);
55 --ctp-surface0: rgb(49 50 68);
56 --ctp-base: rgb(30 30 46);
57 --ctp-mantle: rgb(24 24 37);
58 --ctp-crust: rgb(17 17 27);
59 --callout-blend-mode: lighten;
60}
61
62@theme {
63 --color-*: initial;
64 --font-sans: "Inter", "ui-sans-serif", "system-ui", "sans-serif";
65 --font-serif: "IBM Plex Serif", "ui-serif", "serif";
66
67 --text-inherit: inherit;
68 --p-callout: 12px 12px 12px 24px;
69
70 /* Flag Colors */
71 --color-trans-blue: #5bcffa;
72 --color-trans-pink: #f5abb9;
73 --color-lesbian-orange1: #d62900;
74 --color-lesbian-orange2: #ff790d;
75 --color-lesbian-orange3: #ff9b55;
76 --color-lesbian-pink1: #d462a6;
77 --color-lesbian-pink2: #ef5496;
78 --color-lesbian-pink3: #a50062;
79}
80
81@theme inline {
82 --color-rosewater: var(--ctp-rosewater);
83 --color-flamingo: var(--ctp-flamingo);
84 --color-pink: var(--ctp-pink);
85 --color-mauve: var(--ctp-mauve);
86 --color-red: var(--ctp-red);
87 --color-maroon: var(--ctp-maroon);
88 --color-peach: var(--ctp-peach);
89 --color-yellow: var(--ctp-yellow);
90 --color-green: var(--ctp-green);
91 --color-teal: var(--ctp-teal);
92 --color-sky: var(--ctp-sky);
93 --color-sapphire: var(--ctp-sapphire);
94 --color-blue: var(--ctp-blue);
95 --color-lavender: var(--ctp-lavender);
96 --color-text: var(--ctp-text);
97 --color-subtext1: var(--ctp-subtext1);
98 --color-subtext0: var(--ctp-subtext0);
99 --color-overlay2: var(--ctp-overlay2);
100 --color-overlay1: var(--ctp-overlay1);
101 --color-overlay0: var(--ctp-overlay0);
102 --color-surface2: var(--ctp-surface2);
103 --color-surface1: var(--ctp-surface1);
104 --color-surface0: var(--ctp-surface0);
105 --color-base: var(--ctp-base);
106 --color-mantle: var(--ctp-mantle);
107 --color-crust: var(--ctp-crust);
108}
109
110@layer components {
111 [data-editor-file] {
112 @apply transition-all rounded-md;
113 }
114 [data-editor-file]:hover {
115 @apply transition-all outline-blue outline-2 outline-offset-4
116 dark:bg-blue/10 bg-blue/10 pl-1;
117 }
118}
119
120@utility h-entry {
121 a {
122 @apply text-blue underline;
123 }
124
125 p {
126 @apply mb-6;
127 }
128 div.callout-content > p {
129 @apply mb-0;
130 }
131
132 h2:has(a.header-anchor) {
133 @apply text-3xl text-mauve relative mb-8 no-underline;
134 left: -1.75rem;
135 }
136 h2:has(a.header-anchor)::before {
137 @apply text-2xl relative mr-1;
138 top: 0.25rem;
139 font-family: "bootstrap-icons";
140 content: "\F4B4";
141 }
142}
143
144@utility header-anchor {
145 @apply text-mauve!;
146}
147
148@utility callout {
149 @apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden;
150 outline-color: --alpha(var(--callout-color) / 50%);
151 margin: 1em 0;
152 mix-blend-mode: var(--callout-blend-mode);
153 background-color: --alpha(var(--callout-color) / 15%);
154
155 .callout-title {
156 @apply text-lg mb-1 flex gap-2 items-start font-semibold text-inherit;
157 color: rgb(var(--callout-color));
158
159 .callout-title-icon {
160 @apply flex items-center text-xl leading-7 mr-1;
161 flex: 0 0 auto;
162 }
163
164 .callout-fold {
165 @apply justify-self-end ml-auto;
166 font-family: "bootstrap-icons";
167 background-color: rgb(var(--callout-color));
168 }
169 }
170
171 .callout-content {
172 @apply overflow-x-auto pl-2;
173
174 [data-editor-file]:hover {
175 @apply relative top-2 mr-2;
176 }
177 }
178 &[data-callout="todo"],
179 &[data-callout="info"],
180 &[data-callout="note"] {
181 --callout-color: var(--ctp-blue);
182 }
183
184 &[data-callout="success"],
185 &[data-callout="check"],
186 &[data-callout="done"] {
187 --callout-color: var(--ctp-green);
188 }
189
190 &[data-callout="warning"],
191 &[data-callout="caution"],
192 &[data-callout="attention"] {
193 --callout-color: var(--ctp-yellow);
194 }
195
196 &[data-callout="danger"],
197 &[data-callout="error"] {
198 --callout-color: var(--ctp-red);
199 }
200
201 &[data-callout="tip"],
202 &[data-callout="hint"] {
203 --callout-color: var(--ctp-teal);
204 }
205
206 &[data-callout="example"] {
207 --callout-color: var(--ctp-mauve);
208 }
209
210 &[data-callout="abstract"],
211 &[data-callout="summary"],
212 &[data-callout="tldr"] {
213 --callout-color: var(--ctp-sky);
214 }
215
216 &[data-callout="quote"],
217 &[data-callout="cite"] {
218 --callout-color: var(--ctp-overlay0);
219 }
220}
221
222details.callout .callout-title {
223 margin: 0;
224 cursor: pointer;
225}
226
227details.callout > .callout-title > .callout-fold::after {
228 content: "\F285";
229}
230
231details[open].callout > .callout-title > .callout-fold::after {
232 content: "\F282";
233}