- commit
- 663b83c
- parent
- b52f34c
- author
- xxwhirlpool
- date
- 2025-12-24 10:11:51 -0500 EST
fix up md2page
3 files changed,
+412,
-258
+321,
-188
1@@ -1,196 +1,329 @@
2 @import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
3- html {
4- color: var(--ctp-frappe-base);
5- background-color: var(--ctp-latte-base);
6- }
7- body {
8- margin: 0;
9- min-height: 100vh;
10- line-height: 1.7;
11- font-family: Arial, sans-serif;
12- hyphens: auto;
13- overflow-wrap: break-word;
14- text-rendering: optimizeLegibility;
15- font-kerning: normal;
16- }
17- @media (max-width: 600px) {
18- body {
19- font-size: 0.9em;
20- padding: 12px;
21- max-width: 100%;
22- }
23- h1 {
24- font-size: 1.8em;
25- }
26- }
27- @media print {
28- html {
29- background-color: white;
30- }
31- body {
32- background-color: transparent;
33- color: black;
34- font-size: 12pt;
35- }
36- p, h2, h3 {
37- orphans: 3;
38- widows: 3;
39- }
40- h2, h3, h4 {
41- page-break-after: avoid;
42- }
43- }
44- p {
45- margin: 1em 0;
46- }
47- a, a:link, a:visited, a:link:visited {
48- color: var(--ctp-latte-lavender);
49- }
50- a:hover {
51- text-decoration: none;
52- color: var(--ctp-latte-text);
53- }
54- img {
55- max-width: 100%;
56- display: block;
57- }
58- svg {
59- height: auto;
60- max-width: 100%;
61- }
62- h1, h2, h3, h4, h5, h6 {
63- margin-top: 1.4em;
64- color: var(--ctp-frappe-surface0);
65- line-height: 1.1;
66- }
67- h5, h6 {
68- font-size: 1em;
69- font-style: italic;
70- }
71- h6 {
72- font-weight: normal;
73- }
74- ol, ul {
75- padding-left: 1.7em;
76- margin-top: 1em;
77- }
78- li > ol, li > ul {
79- margin-top: 0;
80- }
81- blockquote {
82- margin: 1em 0 1em 1.7em;
83- padding-left: 1em;
84- border-left: 2px solid #e6e6e6;
85- color: #606060;
86- }
87- code {
88- font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
89- font-size: 85%;
90- margin: 0;
91- hyphens: manual;
92- }
93- pre {
94- margin: 1em 0;
95- overflow: auto;
96- padding: 1em;
97- background: #303446;
98- }
99- pre code {
100- padding: 0;
101- overflow: visible;
102- overflow-wrap: normal;
103- }
104- .sourceCode {
105- background-color: transparent;
106- overflow: visible;
107- }
108- hr {
109- background-color: #1a1a1a;
110- border: none;
111- height: 1px;
112- margin: 1em 0;
113- }
114- table {
115- margin: 1em 0;
116- border-collapse: collapse;
117- width: 100%;
118- overflow-x: auto;
119- display: block;
120- font-variant-numeric: lining-nums tabular-nums;
121- }
122- table caption {
123- margin-bottom: 0.75em;
124- }
125- tbody {
126- margin-top: 0.5em;
127- border-top: 1px solid #1a1a1a;
128- border-bottom: 1px solid #1a1a1a;
129- }
130- th {
131- border-top: 1px solid #1a1a1a;
132- padding: 0.25em 0.5em 0.25em 0.5em;
133- }
134- td {
135- padding: 0.125em 0.5em 0.25em 0.5em;
136- }
137- header {
138- margin-bottom: 4em;
139- text-align: center;
140- }
141- #TOC li {
142- list-style: none;
143- }
144- #TOC ul {
145- padding-left: 1.3em;
146- }
147- #TOC > ul {
148- padding-left: 0;
149- }
150- #TOC a:not(:hover) {
151- text-decoration: none;
152- }
153- code{white-space: pre-wrap;}
154- span.smallcaps{font-variant: small-caps;}
155- div.columns{display: flex; gap: min(4vw, 1.5em);}
156- div.column{flex: auto; overflow-x: auto;}
157- div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
158- /* The extra [class] is a hack that increases specificity enough to
159- override a similar rule in reveal.js */
160- ul.task-list[class]{list-style: none;}
161- ul.task-list li input[type="checkbox"] {
162- font-size: inherit;
163- width: 0.8em;
164- margin: 0 0.8em 0.2em -1.6em;
165- vertical-align: middle;
166- }
167- .display.math{display: block; text-align: center; margin: 0.5rem auto;}
168-
169- ::selection {
170- color: var(--ctp-latte-surface1);
171- background: var(--ctp-frappe-crust);
172- }
173-
174- .flow > * + * {
175- margin-block-start: var(--flow-space, 1em);
176- }
177+@import url(https://fonts.bunny.net/css?family=inter:400);
178+@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400);
179+:root {
180+ --text-color: var(--ctp-frappe-base);
181+ --heading-color: var(--ctp-frappe-surface0);
182+ --accent-color: var(--ctp-latte-lavender);
183+ --accent-color-dark: color-mix(in srgb, var(--accent-color), black);
184+ --base-color: var(--ctp-latte-base);
185+ --font-sans-serif: "Inter";
186+ --font-monospace: "JetBrains Mono";
187+
188+ --step--2: clamp(0.7813rem, 0.7769rem + 0.0192vw, 0.8rem);
189+ --step--1: clamp(0.9375rem, 0.9231rem + 0.0641vw, 1rem);
190+ --step-0: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem);
191+ --step-1: clamp(1.35rem, 1.301rem + 0.2179vw, 1.5625rem);
192+ --step-2: clamp(1.62rem, 1.5431rem + 0.3417vw, 1.9531rem);
193+ --step-3: clamp(1.944rem, 1.8292rem + 0.5102vw, 2.4414rem);
194+ --step-4: clamp(2.3328rem, 2.1669rem + 0.7374vw, 3.0518rem);
195+ --step-5: clamp(2.7994rem, 2.5651rem + 1.0414vw, 3.8147rem);
196+}
197
198- :is(h1, h2, h3, blockquote) {
199- --flow-space: 1.5em;
200+@media (max-width: 600px) {
201+ body {
202+ font-size: 0.9em;
203+ padding: 12px;
204+ max-width: 100%;
205 }
206-
207- :is(h1, h2, h3) + * {
208- --flow-space: 0.5em;
209+ h1 {
210+ font-size: 1.8em;
211 }
212+}
213
214- article > * {
215- max-width: 65ch;
216+@media print {
217+ html {
218+ background-color: var(--base-color);
219 }
220-
221- article {
222- max-width: 65ch;
223- margin-inline: auto;
224+ body {
225+ background-color: transparent;
226+ color: var(--text-color);
227+ font-size: 12pt;
228 }
229-
230- blockquote {
231- max-width: 50ch;
232+ p, h2, h3 {
233+ orphans: 3;
234+ widows: 3;
235 }
236+ h2, h3, h4 {
237+ page-break-after: avoid;
238+ }
239+}
240+
241+html {
242+ color: var(--text-color);
243+ background-color: var(--base-color);
244+}
245+
246+body {
247+ margin-block: 0;
248+ margin-inline: 0;
249+ min-height: 100vh;
250+ line-height: 1.7;
251+ font-family: var(--font-sans-serif), sans-serif;
252+ hyphens: auto;
253+ overflow-wrap: break-word;
254+ text-rendering: optimizeLegibility;
255+ font-kerning: normal;
256+}
257+
258+p {
259+ margin-block-start: 1.4em;
260+ margin-block-end: 0;
261+}
262+
263+a, a:link, a:visited, a:link:visited {
264+ color: var(--accent-color);
265+ text-underline-offset: .3rem;
266+}
267+
268+a:hover {
269+ text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
270+ color: var(--accent-color-dark);
271+}
272+
273+img {
274+ max-width: 100%;
275+ display: block;
276+}
277+
278+svg {
279+ height: auto;
280+ max-width: 100%;
281+}
282+
283+h1, h2, h3, h4, h5, h6 {
284+ margin-block: 1.4em;
285+ margin-inline: 0;
286+ color: var(--heading-color);
287+ line-height: 1.1;
288+ text-wrap: balance;
289+ max-width: 50ch;
290+}
291+
292+h1 {
293+ margin-block-start: 1.4em;
294+ margin-block-end: auto;
295+ text-align: center;
296+ font-size: var(--step-3);
297+}
298+
299+h2 {
300+ font-size: var(--step-2);
301+}
302+
303+h3 {
304+ font-size: var(--step-1);
305+}
306+
307+h4 {
308+ font-size: var(--step-0);
309+}
310+
311+h5 {
312+ font-size: var(--step--1);
313+}
314+
315+h6 {
316+ font-size: var(--step--2);
317+}
318+
319+ol, ul {
320+ padding-inline-start: 1.7em;
321+ margin-block-start: 1em;
322+}
323+
324+li > ol, li > ul {
325+ margin-block-start: 0;
326+}
327+
328+blockquote {
329+ margin-block: 1em;
330+ padding-inline-start: 1em;
331+ border-inline-start: 2px solid #e6e6e6;
332+ color: #606060;
333+}
334+
335+code {
336+ font-family: var(--font-monospace), monospace;
337+ font-size: 85%;
338+ margin-block: 0;
339+ margin-inline: 0;
340+ hyphens: manual;
341+}
342+
343+pre {
344+ margin-block-start: 1em;
345+ margin-block-end: 0;
346+ padding-block: 1em;
347+ padding-inline: 1em;
348+ overflow: auto;
349+ background: #303446;
350+}
351+
352+pre code {
353+ padding-block: 0;
354+ padding-inline: 0;
355+ overflow: visible;
356+ overflow-wrap: normal;
357+}
358+
359+.sourceCode {
360+ background-color: transparent;
361+ overflow: visible;
362+}
363+
364+hr {
365+ background-color: var(--accent-color);
366+ border: none;
367+ height: 1px;
368+ margin-block: 1.4em;
369+ max-width: 1200px;
370+ width: 45ch;
371+}
372+
373+table {
374+ margin-block-start: 1.4em;
375+ margin-block-end: 0;
376+ border-collapse: collapse;
377+ width: 100%;
378+ overflow-x: auto;
379+ display: block;
380+ font-variant-numeric: lining-nums tabular-nums;
381+}
382+
383+table caption {
384+ margin-block-end: 0.75em;
385+}
386+
387+tbody {
388+ margin-block-start: 0.5em;
389+ border-block-start: 1px solid #1a1a1a;
390+ border-block-end: 1px solid #1a1a1a;
391+}
392+
393+th {
394+ border-block-start: 1px solid #1a1a1a;
395+ padding-block-start: 0.25em;
396+ padding-block-end: 0.25em;
397+ padding-inline-end: 0.5em;
398+ padding-inline-start: 0.5em;
399+}
400+
401+td {
402+ padding-block-start: 0.125em;
403+ padding-block-end: 0.25em;
404+ padding-inline-start: 0.5em;
405+ padding-inline-end: 0.5em;
406+}
407+
408+header {
409+ margin-block-end: 4em;
410+ margin-inline: auto;
411+ max-width: 90ch;
412+}
413+
414+.metadata > p time {
415+ color: var(--accent-color);
416+}
417+
418+#TOC li {
419+ list-style: none;
420+}
421+
422+#TOC ul {
423+ padding-inline-start: 1.3em;
424+}
425+
426+#TOC > ul {
427+ padding-inline-start: 0;
428+}
429+
430+#TOC a:not(:hover) {
431+ text-decoration: none;
432+}
433+
434+code {
435+ white-space: pre-wrap;
436+}
437+
438+span.smallcaps {
439+ font-variant: small-caps;
440+}
441+
442+div.columns {
443+ display: flex;
444+ gap: min(4vw, 1.5em);
445+}
446+
447+div.column {
448+ flex: auto;
449+ overflow-x: auto;
450+}
451+
452+div.hanging-indent {
453+ margin-inline-start: 1.5em;
454+ text-indent: -1.5em;
455+}
456+
457+ul.task-list[class] {
458+ list-style: none;
459+}
460+
461+ul.task-list li input[type="checkbox"] {
462+ font-size: inherit;
463+ width: 0.8em;
464+ margin-block-start: 0;
465+ margin-block-end: 0.2em;
466+ margin-inline-start: -1.6em;
467+ margin-inline-end: 0.8em;
468+ vertical-align: middle;
469+}
470+
471+.display.math {
472+ display: block;
473+ text-align: center;
474+ margin-block-start: 0.5rem;
475+ margin-block-end: auto;
476+}
477+
478+::selection {
479+ color: var(--base-color);
480+ background: var(--text-color);
481+}
482+
483+.hljs::selection, .hljs > span::selection, .hljs > span span::selection {
484+ background-color: var(--accent-color-dark);
485+}
486+
487+.flow > * + * {
488+ margin-block-start: var(--flow-space, 1em);
489+}
490+
491+:is(h1, h2, h3, blockquote) {
492+ --flow-space: 1.5em;
493+}
494+
495+:is(h1, h2, h3) + * {
496+ --flow-space: 0.5em;
497+}
498+
499+article {
500+ max-width: 90ch;
501+ margin-inline: auto;
502+}
503+
504+main {
505+ margin-block-end: 3em;
506+}
507+
508+blockquote {
509+ max-width: 50ch;
510+}
511+
512+.e-content {
513+ --flow-space: 2.5rem;
514+}
515+
516+.e-content :is(h2 + *, h3 + *, h4 + *) {
517+ --flow-space: 1rem
518+}
+90,
-69
1@@ -1,88 +1,109 @@
2 <!DOCTYPE html>
3 <html lang="en">
4+
5 <head>
6- <meta charset="utf-8" />
7- <meta name="generator" content="pandoc" />
8- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9-$for(author-meta)$
10- <meta name="author" content="$author-meta$" />
11-$endfor$
12-$if(date-meta)$
13- <meta name="dcterms.date" content="$date-meta$" />
14-$endif$
15-$if(keywords)$
16- <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
17-$endif$
18-$if(description-meta)$
19- <meta name="description" content="$description-meta$" />
20-$endif$
21- <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
22-
23- <link rel="stylesheet" href="https://unpkg.com/@catppuccin/highlightjs@1.0.1/css/catppuccin-frappe.css">
24-
25- <link rel="stylesheet" href="./md2html.css">
26-
27- <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
28+ <meta charset="utf-8" />
29+ <meta name="generator" content="pandoc" />
30+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
31+ $for(author-meta)$
32+ <meta name="author" content="$author-meta$" />
33+ $endfor$
34+ $if(date-meta)$
35+ <meta name="dcterms.date" content="$date-meta$" />
36+ $endif$
37+ $if(keywords)$
38+ <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
39+ $endif$
40+ $if(description-meta)$
41+ <meta name="description" content="$description-meta$" />
42+ $endif$
43+ <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
44+
45+ <link rel="stylesheet" href="https://unpkg.com/@catppuccin/highlightjs@1.0.1/css/catppuccin-frappe.css">
46+
47+ <link rel="stylesheet" href="./md2html.css">
48+
49+ <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
50
51- <script>
52- document.getElementById("sourceCode").classList.add("language ");
53- </script>
54+ <script>
55+ document.getElementById("sourceCode").classList.add("language ");
56+ </script>
57
58-$for(header-includes)$
59- $header-includes$
60-$endfor$
61-$if(math)$
62- $math$
63-$endif$
64+ $for(header-includes)$
65+ $header-includes$
66+ $endfor$
67+ $if(math)$
68+ $math$
69+ $endif$
70 </head>
71+
72 <body>
73+
74 <script>hljs.highlightAll();</script>
75-<article class="flow">
76-$for(include-before)$
77-$include-before$
78-$endfor$
79-$if(title)$
80-<header id="title-block-header">
81-<h1 class="title">$title$</h1>
82-$if(subtitle)$
83-<p class="subtitle">$subtitle$</p>
84-$endif$
85-<p>
86-$if(date)$
87-published <span class="date">$date$</span>
88-$endif$
89-</p>
90-<p>
91-$if(lastmodified)$
92-last edited <span class="date">$lastmodified$</span>
93-$endif$
94-</p>
95-<p>
96-$for(author)$
97-by <a href="https://girlonthemoon.xyz/"><span class="author">$author$</span></a>
98-$endfor$
99-</p>
100-$if(abstract)$
101-<div class="abstract">
102-<div class="abstract-title">$abstract-title$</div>
103-$abstract$
104-</div>
105-$endif$
106+
107+<main class="h-entry">
108+ <article class="flow e-content">
109+ $for(include-before)$
110+ $include-before$
111+ $endfor$
112+
113+ $if(title)$
114+ <header id="title-block-header">
115+ <h1 class="title p-name">$title$</h1>
116+
117+ <div class="metadata">
118+ $if(subtitle)$
119+ <p class="subtitle">$subtitle$</p>
120+ $endif$
121+
122+ <p>
123+ $if(date)$
124+ published <span class="date"><time class="dt-published" datetime="$date$">$date$</time></span>
125+ $endif$
126+ </p>
127+
128+ <p>
129+ $if(lastmodified)$
130+ last edited <span class="date"><time class="dt-updated" datetime="$lastmodified$">$lastmodified$</time></span>
131+ $endif$
132+ </p>
133+
134+ <p>
135+ $for(author)$
136+ by <a href="https://girlonthemoon.xyz/"><span class="author">$author$</span></a>
137+ $endfor$
138+ </p>
139+
140+ $if(abstract)$
141+ <div class="abstract">
142+ <div class="abstract-title">$abstract-title$</div>
143+ $abstract$
144+ </div>
145+ $endif$
146+ </div>
147 </header>
148 $endif$
149+
150 $if(toc)$
151-<nav id="$idprefix$TOC" role="doc-toc">
152-$if(toc-title)$
153-<h2 id="$idprefix$toc-title">$toc-title$</h2>
154-$endif$
155-$table-of-contents$
156-</nav>
157+ <nav id="$idprefix$TOC" role="doc-toc">
158+ $if(toc-title)$
159+
160+ <h2 id="$idprefix$toc-title">$toc-title$</h2>
161+ $endif$
162+
163+ $table-of-contents$
164+ </nav>
165 $endif$
166
167 $body$
168+
169 $for(include-after)$
170-$include-after$
171+ $include-after$
172 $endfor$
173 </article>
174+
175+</main>
176+
177+
178 </body>
179 </html>
+1,
-1
1@@ -6,4 +6,4 @@ HTML="./md2html.html"
2
3 CSS="./md2html.css"
4
5-pandoc --standalone "$FILE.md" --template=$HTML --no-highlight -o "$FILE.html"
6+pandoc --standalone "$FILE.md" --template=$HTML --no-highlight --wrap=none -o "$FILE.html"