pyrox.dev
1@import "tailwindcss";
2
3/*
4 Remove latte classes
5 They're not being used right now, so no reason to ship them
6*/
7/* .latte {
8 --ctp-rosewater: rgb(220 138 120);
9 --ctp-flamingo: rgb(221 120 120);
10 --ctp-pink: rgb(234 118 203);
11 --ctp-mauve: rgb(136 57 239);
12 --ctp-red: rgb(210 15 57);
13 --ctp-maroon: rgb(230 69 83);
14 --ctp-peach: rgb(254 100 11);
15 --ctp-yellow: rgb(223 142 29);
16 --ctp-green: rgb(64 160 43);
17 --ctp-teal: rgb(23 146 153);
18 --ctp-sky: rgb(4 165 229);
19 --ctp-sapphire: rgb(32 159 181);
20 --ctp-blue: rgb(30 102 245);
21 --ctp-lavender: rgb(114 135 253);
22 --ctp-text: rgb(76 79 105);
23 --ctp-subtext1: rgb(92 95 119);
24 --ctp-subtext0: rgb(108 111 133);
25 --ctp-overlay2: rgb(124 127 147);
26 --ctp-overlay1: rgb(140 143 161);
27 --ctp-overlay0: rgb(156 160 176);
28 --ctp-surface2: rgb(172 176 190);
29 --ctp-surface1: rgb(188 192 204);
30 --ctp-surface0: rgb(204 208 218);
31 --ctp-base: rgb(239 241 245);
32 --ctp-mantle: rgb(230 233 239);
33 --ctp-crust: rgb(220 224 232);
34 --callout-blend-mode: darken;
35} */
36.mocha {
37 --ctp-rosewater: rgb(245 224 220);
38 --ctp-flamingo: rgb(242 205 205);
39 --ctp-pink: rgb(245 194 231);
40 --ctp-mauve: rgb(203 166 247);
41 --ctp-red: rgb(243 139 168);
42 --ctp-maroon: rgb(235 160 172);
43 --ctp-peach: rgb(250 179 135);
44 --ctp-yellow: rgb(249 226 175);
45 --ctp-green: rgb(166 227 161);
46 --ctp-teal: rgb(148 226 213);
47 --ctp-sky: rgb(137 220 235);
48 --ctp-sapphire: rgb(116 199 236);
49 --ctp-blue: rgb(137 180 250);
50 --ctp-lavender: rgb(180 190 254);
51 --ctp-text: rgb(205 214 244);
52 --ctp-subtext1: rgb(186 194 222);
53 --ctp-subtext0: rgb(166 173 200);
54 --ctp-overlay2: rgb(147 153 178);
55 --ctp-overlay1: rgb(127 132 156);
56 --ctp-overlay0: rgb(108 112 134);
57 --ctp-surface2: rgb(88 91 112);
58 --ctp-surface1: rgb(69 71 90);
59 --ctp-surface0: rgb(49 50 68);
60 --ctp-base: rgb(30 30 46);
61 --ctp-mantle: rgb(24 24 37);
62 --ctp-crust: rgb(17 17 27);
63 --callout-blend-mode: lighten;
64}
65
66@theme {
67 /* Remove initial variables we don't need */
68 --color-*: initial;
69 --blur-*: initial;
70 --perspective-*: initial;
71 --drop-shadow-*: initial;
72 --shadow-*: initial;
73 --inset-shadow-*: initial;
74 --ease-*: initial;
75 --animate-*: initial;
76 --font-sans: "Inter", "ui-sans-serif", "system-ui", "sans-serif";
77 --font-serif: "IBM Plex Serif", "ui-serif", "serif";
78 /* CTP overrides --text-base, so we need this custom class for the base text size */
79 --text-default: 1rem;
80 --text-default--line-height: calc(1.5 / 1);
81
82 /* Flag Colors */
83 --color-trans-blue: #5bcffa;
84 --color-trans-pink: #f5abb9;
85 --color-lesbian-orange1: #d62900;
86 --color-lesbian-orange2: #ff790d;
87 --color-lesbian-orange3: #ff9b55;
88 --color-lesbian-pink1: #d462a6;
89 --color-lesbian-pink2: #ef5496;
90 --color-lesbian-pink3: #a50062;
91}
92
93@theme inline {
94 --color-rosewater: var(--ctp-rosewater);
95 --color-flamingo: var(--ctp-flamingo);
96 --color-pink: var(--ctp-pink);
97 --color-mauve: var(--ctp-mauve);
98 --color-red: var(--ctp-red);
99 --color-maroon: var(--ctp-maroon);
100 --color-peach: var(--ctp-peach);
101 --color-yellow: var(--ctp-yellow);
102 --color-green: var(--ctp-green);
103 --color-teal: var(--ctp-teal);
104 --color-sky: var(--ctp-sky);
105 --color-sapphire: var(--ctp-sapphire);
106 --color-blue: var(--ctp-blue);
107 --color-lavender: var(--ctp-lavender);
108 --color-text: var(--ctp-text);
109 --color-subtext1: var(--ctp-subtext1);
110 --color-subtext0: var(--ctp-subtext0);
111 --color-overlay2: var(--ctp-overlay2);
112 --color-overlay1: var(--ctp-overlay1);
113 --color-overlay0: var(--ctp-overlay0);
114 --color-surface2: var(--ctp-surface2);
115 --color-surface1: var(--ctp-surface1);
116 --color-surface0: var(--ctp-surface0);
117 --color-base: var(--ctp-base);
118 --color-mantle: var(--ctp-mantle);
119 --color-crust: var(--ctp-crust);
120}
121
122@layer components {
123 [data-editor-file] {
124 @apply transition-all rounded-md;
125 pointer-events: auto;
126 }
127 [data-editor-file]:hover {
128 @apply transition-all outline-blue outline-2 outline-offset-4
129 bg-blue/10 pl-1;
130 }
131}
132
133@utility h-entry {
134 a {
135 @apply text-blue underline;
136 }
137
138 h2 {
139 @apply text-2xl font-sans;
140 }
141
142 p {
143 @apply mb-6;
144 }
145
146 blockquote {
147 @apply border-l-2 pl-6 relative border-overlay0 italic;
148 left: -0.5rem;
149 }
150
151 div.callout-content > p {
152 @apply mb-0;
153 }
154
155 h2:has(a.header-anchor) {
156 @apply text-3xl text-mauve relative mb-8;
157 left: -1.75rem;
158 }
159
160 h3:has(a.header-anchor) {
161 @apply text-2xl text-mauve relative mb-6;
162 left: -1.75rem;
163 }
164
165 a.header-anchor::before {
166 @apply relative mr-1 inline-block;
167 font-family: "bootstrap-icons";
168 content: "\F40A";
169 top: 0.225rem;
170 }
171}
172
173@utility header-anchor {
174 @apply text-mauve!;
175}
176
177/* Disable <detail> folding on non-folding admonitions */
178@utility no-fold {
179 pointer-events: none;
180}
181
182/* Callouts/Admonitions */
183@utility callout {
184 @apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden;
185 outline-color: --alpha(var(--callout-color) / 50%);
186 margin: 1em 0;
187 mix-blend-mode: var(--callout-blend-mode);
188 background-color: --alpha(var(--callout-color) / 15%);
189
190 .callout-title {
191 @apply text-lg mb-2 flex gap-2 items-start font-semibold w-full;
192 color: rgb(var(--callout-color));
193
194 &::before {
195 @apply flex items-center text-xl leading-7 mr-1;
196 flex: 0 0 auto;
197 font-family: "bootstrap-icons";
198 content: var(--callout-icon);
199 }
200
201 .no-fold &::after {
202 content: "" !important;
203 }
204
205 &::after {
206 margin-left: auto;
207 font-family: "bootstrap-icons";
208 background-color: rgb(var(--callout-color));
209 content: "\F285";
210 }
211
212 [open] &::after {
213 margin-left: auto;
214 font-family: "bootstrap-icons";
215 background-color: rgb(var(--callout-color));
216 content: "\F282";
217 }
218 }
219
220 .callout-content {
221 @apply overflow-x-auto pl-2;
222
223 [data-editor-file]:hover {
224 @apply relative top-2 mr-2;
225 }
226 }
227 &[data-callout="note"] {
228 --callout-color: var(--ctp-blue);
229 --callout-icon: "\F4CB";
230 }
231
232 &[data-callout="todo"] {
233 --callout-color: var(--ctp-blue);
234 --callout-icon: "\F26B";
235 }
236
237 &[data-callout="info"] {
238 --callout-color: var(--ctp-blue);
239 --callout-icon: "\F431";
240 }
241
242 &[data-callout="success"],
243 &[data-callout="check"],
244 &[data-callout="done"] {
245 --callout-color: var(--ctp-green);
246 --callout-icon: "\F272";
247 }
248
249 &[data-callout="warning"],
250 &[data-callout="caution"],
251 &[data-callout="attention"] {
252 --callout-color: var(--ctp-yellow);
253 --callout-icon: "\F33B";
254 }
255
256 &[data-callout="question"] {
257 --callout-color: var(--ctp-yellow);
258 --callout-icon: "\F505";
259 }
260
261 &[data-callout="danger"],
262 &[data-callout="error"] {
263 --callout-color: var(--ctp-maroon);
264 --callout-icon: "\F46F";
265 }
266
267 &[data-callout="failure"] {
268 --callout-color: var(--ctp-maroon);
269 --callout-icon: "\F659";
270 }
271
272 &[data-callout="bug"] {
273 --callout-color: var(--ctp-maroon);
274 --callout-icon: "\F1DC";
275 }
276
277 &[data-callout="tip"],
278 &[data-callout="hint"] {
279 --callout-color: var(--ctp-teal);
280 --callout-icon: "\F7F6";
281 }
282
283 &[data-callout="example"] {
284 --callout-color: var(--ctp-mauve);
285 --callout-icon: "\F478";
286 }
287
288 &[data-callout="abstract"],
289 &[data-callout="summary"],
290 &[data-callout="tldr"] {
291 --callout-color: var(--ctp-sky);
292 --callout-icon: "\F727";
293 }
294
295 &[data-callout="quote"],
296 &[data-callout="cite"] {
297 --callout-color: var(--ctp-overlay0);
298 --callout-icon: "\F6B0";
299 }
300}
301
302/* Start Footnotes */
303
304@utility fn {
305 @apply mb-2;
306 p {
307 @apply inline;
308 }
309 [data-editor-file] {
310 @apply inline;
311 }
312}
313
314@utility fn-backref {
315 &::before {
316 @apply inline-block text-blue align-bottom;
317 content: "\F131";
318 font-family: "bootstrap-icons";
319 }
320}
321
322/* End Footnotes */
323
324/* Start ToC */
325
326@utility toc {
327 @apply mt-3 mb-8;
328}
329
330@utility toc-l1 {
331 @apply border-l-2 border-overlay0 pl-2 ml-1 text-xl;
332}
333
334@utility toc-l2 {
335 @apply text-default border-l-2 pl-2 border-surface2 first-of-type:mt-1 last-of-type:mb-1;
336}
337
338/* End ToC */
339
340/* Extra arbitrary styles */
341details.callout .callout-title {
342 margin: 0;
343 cursor: pointer;
344}
345
346details.callout > .callout-title > .callout-fold::after {
347 content: "\F285";
348}
349
350details[open].callout > .callout-title > .callout-fold::after {
351 content: "\F282";
352}