md2html.css
1@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
2@import url(https://fonts.bunny.net/css?family=inter:400);
3@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400);
4:root {
5 --text-color: var(--ctp-frappe-base);
6 --heading-color: var(--ctp-frappe-surface0);
7 --accent-color: var(--ctp-latte-lavender);
8 --accent-color-dark: color-mix(in srgb, var(--accent-color), black);
9 --base-color: var(--ctp-latte-base);
10 --font-sans-serif: "Inter";
11 --font-monospace: "JetBrains Mono";
12
13 --step--2: clamp(0.7813rem, 0.7769rem + 0.0192vw, 0.8rem);
14 --step--1: clamp(0.9375rem, 0.9231rem + 0.0641vw, 1rem);
15 --step-0: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem);
16 --step-1: clamp(1.35rem, 1.301rem + 0.2179vw, 1.5625rem);
17 --step-2: clamp(1.62rem, 1.5431rem + 0.3417vw, 1.9531rem);
18 --step-3: clamp(1.944rem, 1.8292rem + 0.5102vw, 2.4414rem);
19 --step-4: clamp(2.3328rem, 2.1669rem + 0.7374vw, 3.0518rem);
20 --step-5: clamp(2.7994rem, 2.5651rem + 1.0414vw, 3.8147rem);
21}
22
23@media (max-width: 600px) {
24 body {
25 font-size: 0.9em;
26 padding: 12px;
27 max-width: 100%;
28 }
29 h1 {
30 font-size: 1.8em;
31 }
32}
33
34@media print {
35 html {
36 background-color: var(--base-color);
37 }
38 body {
39 background-color: transparent;
40 color: var(--text-color);
41 font-size: 12pt;
42 }
43 p, h2, h3 {
44 orphans: 3;
45 widows: 3;
46 }
47 h2, h3, h4 {
48 page-break-after: avoid;
49 }
50}
51
52html {
53 color: var(--text-color);
54 background-color: var(--base-color);
55}
56
57body {
58 margin-block: 0;
59 margin-inline: 0;
60 min-height: 100vh;
61 line-height: 1.7;
62 font-family: var(--font-sans-serif), sans-serif;
63 hyphens: auto;
64 overflow-wrap: break-word;
65 text-rendering: optimizeLegibility;
66 font-kerning: normal;
67}
68
69p {
70 margin-block-start: 1.4em;
71 margin-block-end: 0;
72}
73
74a, a:link, a:visited, a:link:visited {
75 color: var(--accent-color);
76 text-underline-offset: .3rem;
77}
78
79a:hover {
80 text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
81 color: var(--accent-color-dark);
82}
83
84img {
85 max-width: 100%;
86 height: auto;
87 display: block;
88 vertical-align: middle;
89
90 /* for alt text */
91 font-style: italic;
92}
93
94svg {
95 height: auto;
96 max-width: 100%;
97}
98
99h1, h2, h3, h4, h5, h6 {
100 margin-block: 1.4em;
101 margin-inline: 0;
102 color: var(--heading-color);
103 line-height: 1.1;
104 text-wrap: balance;
105 max-width: 50ch;
106}
107
108h1 {
109 margin-block-start: 1.4em;
110 margin-block-end: auto;
111 text-align: center;
112 font-size: var(--step-3);
113}
114
115h2 {
116 font-size: var(--step-2);
117}
118
119h3 {
120 font-size: var(--step-1);
121}
122
123h4 {
124 font-size: var(--step-0);
125}
126
127h5 {
128 font-size: var(--step--1);
129}
130
131h6 {
132 font-size: var(--step--2);
133}
134
135ol, ul {
136 padding-inline-start: 1.7em;
137 margin-block-start: 1em;
138}
139
140li > ol, li > ul {
141 margin-block-start: 0;
142}
143
144blockquote {
145 margin-block: 1em;
146 padding-inline-start: 1em;
147 border-inline-start: 2px solid #e6e6e6;
148 color: #606060;
149}
150
151code {
152 font-family: var(--font-monospace), monospace;
153 font-size: 85%;
154 margin-block: 0;
155 margin-inline: 0;
156 hyphens: manual;
157}
158
159pre {
160 margin-block-start: 1em;
161 margin-block-end: 0;
162 padding-block: 1em;
163 padding-inline: 1em;
164 overflow: auto;
165 background: #303446;
166}
167
168pre code {
169 padding-block: 0;
170 padding-inline: 0;
171 overflow: visible;
172 overflow-wrap: normal;
173}
174
175.sourceCode {
176 background-color: transparent;
177 overflow: visible;
178}
179
180hr {
181 background-color: var(--accent-color);
182 border: none;
183 height: 1px;
184 margin-block: 1.4em;
185 max-width: 1200px;
186 width: 45ch;
187}
188
189table {
190 margin-block-start: 1.4em;
191 margin-block-end: 0;
192 border-collapse: collapse;
193 width: 100%;
194 overflow-x: auto;
195 display: block;
196 font-variant-numeric: lining-nums tabular-nums;
197}
198
199table caption {
200 margin-block-end: 0.75em;
201}
202
203tbody {
204 margin-block-start: 0.5em;
205 border-block-start: 1px solid #1a1a1a;
206 border-block-end: 1px solid #1a1a1a;
207}
208
209th {
210 border-block-start: 1px solid #1a1a1a;
211 padding-block-start: 0.25em;
212 padding-block-end: 0.25em;
213 padding-inline-end: 0.5em;
214 padding-inline-start: 0.5em;
215}
216
217td {
218 padding-block-start: 0.125em;
219 padding-block-end: 0.25em;
220 padding-inline-start: 0.5em;
221 padding-inline-end: 0.5em;
222}
223
224header {
225 margin-block-end: 4em;
226 margin-inline: auto;
227 max-width: 90ch;
228}
229
230.metadata > p time {
231 color: var(--accent-color);
232}
233
234#TOC li {
235 list-style: none;
236}
237
238#TOC ul {
239 padding-inline-start: 1.3em;
240}
241
242#TOC > ul {
243 padding-inline-start: 0;
244}
245
246#TOC a:not(:hover) {
247 text-decoration: none;
248}
249
250code {
251 white-space: pre-wrap;
252}
253
254span.smallcaps {
255 font-variant: small-caps;
256}
257
258div.columns {
259 display: flex;
260 gap: min(4vw, 1.5em);
261}
262
263div.column {
264 flex: auto;
265 overflow-x: auto;
266}
267
268div.hanging-indent {
269 margin-inline-start: 1.5em;
270 text-indent: -1.5em;
271}
272
273ul.task-list[class] {
274 list-style: none;
275}
276
277ul.task-list li input[type="checkbox"] {
278 font-size: inherit;
279 width: 0.8em;
280 margin-block-start: 0;
281 margin-block-end: 0.2em;
282 margin-inline-start: -1.6em;
283 margin-inline-end: 0.8em;
284 vertical-align: middle;
285}
286
287.display.math {
288 display: block;
289 text-align: center;
290 margin-block-start: 0.5rem;
291 margin-block-end: auto;
292}
293
294::selection {
295 color: var(--base-color);
296 background: var(--text-color);
297}
298
299.hljs::selection, .hljs > span::selection, .hljs > span span::selection {
300 background-color: var(--accent-color-dark);
301}
302
303.flow > * + * {
304 margin-block-start: var(--flow-space, 1em);
305}
306
307:is(h1, h2, h3, blockquote) {
308 --flow-space: 1.5em;
309}
310
311:is(h1, h2, h3) + * {
312 --flow-space: 0.5em;
313}
314
315article {
316 max-width: 90ch;
317 margin-inline: auto;
318}
319
320main {
321 margin-block-end: 3em;
322}
323
324blockquote {
325 max-width: 50ch;
326}
327
328.e-content {
329 --flow-space: 2.5rem;
330}
331
332.e-content :is(h2 + *, h3 + *, h4 + *) {
333 --flow-space: 1rem
334}
335
336details {
337 margin-block: 1rem 0;
338}
339
340summary {
341 cursor: pointer;
342}
343
344summary::marker {
345 content: "\2765 " / "heart";
346 color: var(--accent-color);
347}