Commit 663b83c
xxwhirlpool
·
2025-12-24 10:11:51 -0500 EST
parent b52f34c
fix up md2page
3 files changed,
+414,
-260
+323,
-190
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- :is(h1, h2, h3, blockquote) {
189- --flow-space: 1.5em;
190- }
191-
192- :is(h1, h2, h3) + * {
193- --flow-space: 0.5em;
194- }
195+ --step--2: clamp(0.7813rem, 0.7769rem + 0.0192vw, 0.8rem);
196+ --step--1: clamp(0.9375rem, 0.9231rem + 0.0641vw, 1rem);
197+ --step-0: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem);
198+ --step-1: clamp(1.35rem, 1.301rem + 0.2179vw, 1.5625rem);
199+ --step-2: clamp(1.62rem, 1.5431rem + 0.3417vw, 1.9531rem);
200+ --step-3: clamp(1.944rem, 1.8292rem + 0.5102vw, 2.4414rem);
201+ --step-4: clamp(2.3328rem, 2.1669rem + 0.7374vw, 3.0518rem);
202+ --step-5: clamp(2.7994rem, 2.5651rem + 1.0414vw, 3.8147rem);
203+}
204
205- article > * {
206- max-width: 65ch;
207+@media (max-width: 600px) {
208+ body {
209+ font-size: 0.9em;
210+ padding: 12px;
211+ max-width: 100%;
212 }
213-
214- article {
215- max-width: 65ch;
216- margin-inline: auto;
217+ h1 {
218+ font-size: 1.8em;
219 }
220-
221- blockquote {
222- max-width: 50ch;
223+}
224+
225+@media print {
226+ html {
227+ background-color: var(--base-color);
228 }
229+ body {
230+ background-color: transparent;
231+ color: var(--text-color);
232+ font-size: 12pt;
233+ }
234+ p, h2, h3 {
235+ orphans: 3;
236+ widows: 3;
237+ }
238+ h2, h3, h4 {
239+ page-break-after: avoid;
240+ }
241+}
242+
243+html {
244+ color: var(--text-color);
245+ background-color: var(--base-color);
246+}
247+
248+body {
249+ margin-block: 0;
250+ margin-inline: 0;
251+ min-height: 100vh;
252+ line-height: 1.7;
253+ font-family: var(--font-sans-serif), sans-serif;
254+ hyphens: auto;
255+ overflow-wrap: break-word;
256+ text-rendering: optimizeLegibility;
257+ font-kerning: normal;
258+}
259+
260+p {
261+ margin-block-start: 1.4em;
262+ margin-block-end: 0;
263+}
264+
265+a, a:link, a:visited, a:link:visited {
266+ color: var(--accent-color);
267+ text-underline-offset: .3rem;
268+}
269+
270+a:hover {
271+ text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
272+ color: var(--accent-color-dark);
273+}
274+
275+img {
276+ max-width: 100%;
277+ display: block;
278+}
279+
280+svg {
281+ height: auto;
282+ max-width: 100%;
283+}
284+
285+h1, h2, h3, h4, h5, h6 {
286+ margin-block: 1.4em;
287+ margin-inline: 0;
288+ color: var(--heading-color);
289+ line-height: 1.1;
290+ text-wrap: balance;
291+ max-width: 50ch;
292+}
293+
294+h1 {
295+ margin-block-start: 1.4em;
296+ margin-block-end: auto;
297+ text-align: center;
298+ font-size: var(--step-3);
299+}
300+
301+h2 {
302+ font-size: var(--step-2);
303+}
304+
305+h3 {
306+ font-size: var(--step-1);
307+}
308+
309+h4 {
310+ font-size: var(--step-0);
311+}
312+
313+h5 {
314+ font-size: var(--step--1);
315+}
316+
317+h6 {
318+ font-size: var(--step--2);
319+}
320+
321+ol, ul {
322+ padding-inline-start: 1.7em;
323+ margin-block-start: 1em;
324+}
325+
326+li > ol, li > ul {
327+ margin-block-start: 0;
328+}
329+
330+blockquote {
331+ margin-block: 1em;
332+ padding-inline-start: 1em;
333+ border-inline-start: 2px solid #e6e6e6;
334+ color: #606060;
335+}
336+
337+code {
338+ font-family: var(--font-monospace), monospace;
339+ font-size: 85%;
340+ margin-block: 0;
341+ margin-inline: 0;
342+ hyphens: manual;
343+}
344+
345+pre {
346+ margin-block-start: 1em;
347+ margin-block-end: 0;
348+ padding-block: 1em;
349+ padding-inline: 1em;
350+ overflow: auto;
351+ background: #303446;
352+}
353+
354+pre code {
355+ padding-block: 0;
356+ padding-inline: 0;
357+ overflow: visible;
358+ overflow-wrap: normal;
359+}
360+
361+.sourceCode {
362+ background-color: transparent;
363+ overflow: visible;
364+}
365+
366+hr {
367+ background-color: var(--accent-color);
368+ border: none;
369+ height: 1px;
370+ margin-block: 1.4em;
371+ max-width: 1200px;
372+ width: 45ch;
373+}
374+
375+table {
376+ margin-block-start: 1.4em;
377+ margin-block-end: 0;
378+ border-collapse: collapse;
379+ width: 100%;
380+ overflow-x: auto;
381+ display: block;
382+ font-variant-numeric: lining-nums tabular-nums;
383+}
384+
385+table caption {
386+ margin-block-end: 0.75em;
387+}
388+
389+tbody {
390+ margin-block-start: 0.5em;
391+ border-block-start: 1px solid #1a1a1a;
392+ border-block-end: 1px solid #1a1a1a;
393+}
394+
395+th {
396+ border-block-start: 1px solid #1a1a1a;
397+ padding-block-start: 0.25em;
398+ padding-block-end: 0.25em;
399+ padding-inline-end: 0.5em;
400+ padding-inline-start: 0.5em;
401+}
402+
403+td {
404+ padding-block-start: 0.125em;
405+ padding-block-end: 0.25em;
406+ padding-inline-start: 0.5em;
407+ padding-inline-end: 0.5em;
408+}
409+
410+header {
411+ margin-block-end: 4em;
412+ margin-inline: auto;
413+ max-width: 90ch;
414+}
415+
416+.metadata > p time {
417+ color: var(--accent-color);
418+}
419+
420+#TOC li {
421+ list-style: none;
422+}
423+
424+#TOC ul {
425+ padding-inline-start: 1.3em;
426+}
427+
428+#TOC > ul {
429+ padding-inline-start: 0;
430+}
431+
432+#TOC a:not(:hover) {
433+ text-decoration: none;
434+}
435+
436+code {
437+ white-space: pre-wrap;
438+}
439+
440+span.smallcaps {
441+ font-variant: small-caps;
442+}
443+
444+div.columns {
445+ display: flex;
446+ gap: min(4vw, 1.5em);
447+}
448+
449+div.column {
450+ flex: auto;
451+ overflow-x: auto;
452+}
453+
454+div.hanging-indent {
455+ margin-inline-start: 1.5em;
456+ text-indent: -1.5em;
457+}
458+
459+ul.task-list[class] {
460+ list-style: none;
461+}
462+
463+ul.task-list li input[type="checkbox"] {
464+ font-size: inherit;
465+ width: 0.8em;
466+ margin-block-start: 0;
467+ margin-block-end: 0.2em;
468+ margin-inline-start: -1.6em;
469+ margin-inline-end: 0.8em;
470+ vertical-align: middle;
471+}
472+
473+.display.math {
474+ display: block;
475+ text-align: center;
476+ margin-block-start: 0.5rem;
477+ margin-block-end: auto;
478+}
479+
480+::selection {
481+ color: var(--base-color);
482+ background: var(--text-color);
483+}
484+
485+.hljs::selection, .hljs > span::selection, .hljs > span span::selection {
486+ background-color: var(--accent-color-dark);
487+}
488+
489+.flow > * + * {
490+ margin-block-start: var(--flow-space, 1em);
491+}
492+
493+:is(h1, h2, h3, blockquote) {
494+ --flow-space: 1.5em;
495+}
496+
497+:is(h1, h2, h3) + * {
498+ --flow-space: 0.5em;
499+}
500+
501+article {
502+ max-width: 90ch;
503+ margin-inline: auto;
504+}
505+
506+main {
507+ margin-block-end: 3em;
508+}
509+
510+blockquote {
511+ max-width: 50ch;
512+}
513+
514+.e-content {
515+ --flow-space: 2.5rem;
516+}
517+
518+.e-content :is(h2 + *, h3 + *, h4 + *) {
519+ --flow-space: 1rem
520+}
+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+ <meta charset="utf-8" />
23+ <meta name="generator" content="pandoc" />
24+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
25+ $for(author-meta)$
26+ <meta name="author" content="$author-meta$" />
27+ $endfor$
28+ $if(date-meta)$
29+ <meta name="dcterms.date" content="$date-meta$" />
30+ $endif$
31+ $if(keywords)$
32+ <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
33+ $endif$
34+ $if(description-meta)$
35+ <meta name="description" content="$description-meta$" />
36+ $endif$
37+ <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
38+
39+ <link rel="stylesheet" href="https://unpkg.com/@catppuccin/highlightjs@1.0.1/css/catppuccin-frappe.css">
40+
41+ <link rel="stylesheet" href="./md2html.css">
42+
43+ <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
44
45- <link rel="stylesheet" href="https://unpkg.com/@catppuccin/highlightjs@1.0.1/css/catppuccin-frappe.css">
46+ <script>
47+ document.getElementById("sourceCode").classList.add("language ");
48+ </script>
49
50- <link rel="stylesheet" href="./md2html.css">
51-
52- <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
53-
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"