Commit 5a1fab2

xxwhirlpool  ·  2025-10-15 14:50:47 -0400 EDT
parent a1a566e 
md2html fuckery
4 files changed,  +325, -7
M scripts/Scripts/md2html.css
M scripts/Scripts/md2html.html
A scripts/Scripts/md2html_test/md2html.css
A scripts/Scripts/md2html_test/md2html.html
M scripts/Scripts/md2html.css
+39, -6
......@@ -4,12 +4,10 @@
44 background-color: var(--ctp-latte-base);
55 }
66 body {
7- margin: 0 auto;
8- max-width: 50%;
9- padding-left: 50px;
10- padding-right: 50px;
11- padding-top: 50px;
12- padding-bottom: 50px;
7+ margin: 0;
8+ min-height: 100vh;
9+ line-height: 1.7;
10+ font-family: Arial, sans-serif;
1311 hyphens: auto;
1412 overflow-wrap: break-word;
1513 text-rendering: optimizeLegibility;
......@@ -54,6 +52,7 @@
5452 }
5553 img {
5654 max-width: 100%;
55+ display: block;
5756 }
5857 svg {
5958 height: auto;
......@@ -62,6 +61,7 @@
6261 h1, h2, h3, h4, h5, h6 {
6362 margin-top: 1.4em;
6463 color: var(--ctp-frappe-surface0);
64+ line-height: 1.1;
6565 }
6666 h5, h6 {
6767 font-size: 1em;
......@@ -169,3 +169,36 @@
169169 color: var(--ctp-latte-surface1);
170170 background: var(--ctp-frappe-crust);
171171 }
172+
173+ .flow > * + * {
174+ margin-block-start: var(--flow-space, 1em);
175+ }
176+
177+ :is(h1, h2, h3, blockquote) {
178+ --flow-space: 1.5em;
179+ }
180+
181+ :is(h1, h2, h3) + * {
182+ --flow-space: 0.5em;
183+ }
184+
185+ article > * {
186+ max-width: 65ch;
187+ }
188+
189+ article {
190+ max-width: 65ch;
191+ margin-inline: auto;
192+ }
193+
194+ blockquote {
195+ max-width: 50ch;
196+ }
197+
198+ h1 {
199+ max-width: 20ch;
200+ }
201+
202+ h2,h3 {
203+ max-width: 28ch;
204+ }
M scripts/Scripts/md2html.html
+2, -1
......@@ -37,6 +37,7 @@ $endif$
3737 </head>
3838 <body>
3939 <script>hljs.highlightAll();</script>
40+<article class="flow">
4041 $for(include-before)$
4142 $include-before$
4243 $endfor$
......@@ -77,7 +78,7 @@ $endif$
7778 $table-of-contents$
7879 </nav>
7980 $endif$
80-<article>
81+
8182 $body$
8283 $for(include-after)$
8384 $include-after$
A scripts/Scripts/md2html_test/md2html.css
+196, -0
......@@ -0,0 +1,196 @@
1+@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
2+ html {
3+ color: var(--ctp-frappe-base);
4+ background-color: var(--ctp-latte-base);
5+ }
6+ body {
7+ margin: 0;
8+ min-height: 100vh;
9+ line-height: 1.7;
10+ font-family: Arial, sans-serif;
11+ hyphens: auto;
12+ overflow-wrap: break-word;
13+ text-rendering: optimizeLegibility;
14+ font-kerning: normal;
15+ }
16+ @media (max-width: 600px) {
17+ body {
18+ font-size: 0.9em;
19+ padding: 12px;
20+ max-width: 100%;
21+ }
22+ h1 {
23+ font-size: 1.8em;
24+ }
25+ }
26+ @media print {
27+ html {
28+ background-color: white;
29+ }
30+ body {
31+ background-color: transparent;
32+ color: black;
33+ font-size: 12pt;
34+ }
35+ p, h2, h3 {
36+ orphans: 3;
37+ widows: 3;
38+ }
39+ h2, h3, h4 {
40+ page-break-after: avoid;
41+ }
42+ }
43+ p {
44+ margin: 1em 0;
45+ }
46+ a, a:link, a:visited, a:link:visited {
47+ color: var(--ctp-latte-lavender);
48+ }
49+ a:hover {
50+ text-decoration: none;
51+ color: var(--ctp-latte-text);
52+ }
53+ img {
54+ max-width: 100%;
55+ display: block;
56+ }
57+ svg {
58+ height: auto;
59+ max-width: 100%;
60+ }
61+ h1, h2, h3, h4, h5, h6 {
62+ margin-top: 1.4em;
63+ color: var(--ctp-frappe-surface0);
64+ line-height: 1.1;
65+ }
66+ h5, h6 {
67+ font-size: 1em;
68+ font-style: italic;
69+ }
70+ h6 {
71+ font-weight: normal;
72+ }
73+ ol, ul {
74+ padding-left: 1.7em;
75+ margin-top: 1em;
76+ }
77+ li > ol, li > ul {
78+ margin-top: 0;
79+ }
80+ blockquote {
81+ margin: 1em 0 1em 1.7em;
82+ padding-left: 1em;
83+ border-left: 2px solid #e6e6e6;
84+ color: #606060;
85+ }
86+ code {
87+ font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
88+ font-size: 85%;
89+ margin: 0;
90+ hyphens: manual;
91+ }
92+ pre {
93+ margin: 1em 0;
94+ overflow: auto;
95+ padding: 1em;
96+ background: #303446;
97+ }
98+ pre code {
99+ padding: 0;
100+ overflow: visible;
101+ overflow-wrap: normal;
102+ }
103+ .sourceCode {
104+ background-color: transparent;
105+ overflow: visible;
106+ }
107+ hr {
108+ background-color: #1a1a1a;
109+ border: none;
110+ height: 1px;
111+ margin: 1em 0;
112+ }
113+ table {
114+ margin: 1em 0;
115+ border-collapse: collapse;
116+ width: 100%;
117+ overflow-x: auto;
118+ display: block;
119+ font-variant-numeric: lining-nums tabular-nums;
120+ }
121+ table caption {
122+ margin-bottom: 0.75em;
123+ }
124+ tbody {
125+ margin-top: 0.5em;
126+ border-top: 1px solid #1a1a1a;
127+ border-bottom: 1px solid #1a1a1a;
128+ }
129+ th {
130+ border-top: 1px solid #1a1a1a;
131+ padding: 0.25em 0.5em 0.25em 0.5em;
132+ }
133+ td {
134+ padding: 0.125em 0.5em 0.25em 0.5em;
135+ }
136+ header {
137+ margin-bottom: 4em;
138+ text-align: center;
139+ }
140+ #TOC li {
141+ list-style: none;
142+ }
143+ #TOC ul {
144+ padding-left: 1.3em;
145+ }
146+ #TOC > ul {
147+ padding-left: 0;
148+ }
149+ #TOC a:not(:hover) {
150+ text-decoration: none;
151+ }
152+ code{white-space: pre-wrap;}
153+ span.smallcaps{font-variant: small-caps;}
154+ div.columns{display: flex; gap: min(4vw, 1.5em);}
155+ div.column{flex: auto; overflow-x: auto;}
156+ div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
157+ /* The extra [class] is a hack that increases specificity enough to
158+ override a similar rule in reveal.js */
159+ ul.task-list[class]{list-style: none;}
160+ ul.task-list li input[type="checkbox"] {
161+ font-size: inherit;
162+ width: 0.8em;
163+ margin: 0 0.8em 0.2em -1.6em;
164+ vertical-align: middle;
165+ }
166+ .display.math{display: block; text-align: center; margin: 0.5rem auto;}
167+
168+ ::selection {
169+ color: var(--ctp-latte-surface1);
170+ background: var(--ctp-frappe-crust);
171+ }
172+
173+ .flow > * + * {
174+ margin-block-start: var(--flow-space, 1em);
175+ }
176+
177+ :is(h1, h2, h3, blockquote) {
178+ --flow-space: 1.5em;
179+ }
180+
181+ :is(h1, h2, h3) + * {
182+ --flow-space: 0.5em;
183+ }
184+
185+ article > * {
186+ max-width: 65ch;
187+ }
188+
189+ article {
190+ max-width: 65ch;
191+ margin-inline: auto;
192+ }
193+
194+ blockquote {
195+ max-width: 50ch;
196+ }
A scripts/Scripts/md2html_test/md2html.html
+88, -0
......@@ -0,0 +1,88 @@
1+<!DOCTYPE html>
2+<html lang="en">
3+<head>
4+ <meta charset="utf-8" />
5+ <meta name="generator" content="pandoc" />
6+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
7+$for(author-meta)$
8+ <meta name="author" content="$author-meta$" />
9+$endfor$
10+$if(date-meta)$
11+ <meta name="dcterms.date" content="$date-meta$" />
12+$endif$
13+$if(keywords)$
14+ <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
15+$endif$
16+$if(description-meta)$
17+ <meta name="description" content="$description-meta$" />
18+$endif$
19+ <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
20+
21+ <link rel="stylesheet" href="https://unpkg.com/@catppuccin/highlightjs@1.0.1/css/catppuccin-frappe.css">
22+
23+ <link rel="stylesheet" href="./md2html.css">
24+
25+ <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
26+
27+ <script>
28+ document.getElementById("sourceCode").classList.add("language ");
29+ </script>
30+
31+$for(header-includes)$
32+ $header-includes$
33+$endfor$
34+$if(math)$
35+ $math$
36+$endif$
37+</head>
38+<body>
39+<script>hljs.highlightAll();</script>
40+<article class="flow">
41+$for(include-before)$
42+$include-before$
43+$endfor$
44+$if(title)$
45+<header id="title-block-header">
46+<h1 class="title">$title$</h1>
47+$if(subtitle)$
48+<p class="subtitle">$subtitle$</p>
49+$endif$
50+<p>
51+$if(date)$
52+published <span class="date">$date$</span>
53+$endif$
54+</p>
55+<p>
56+$if(lastmodified)$
57+last edited <span class="date">$lastmodified$</span>
58+$endif$
59+</p>
60+<p>
61+$for(author)$
62+by <a href="https://girlonthemoon.xyz/"><span class="author">$author$</span></a>
63+$endfor$
64+</p>
65+$if(abstract)$
66+<div class="abstract">
67+<div class="abstract-title">$abstract-title$</div>
68+$abstract$
69+</div>
70+$endif$
71+</header>
72+$endif$
73+$if(toc)$
74+<nav id="$idprefix$TOC" role="doc-toc">
75+$if(toc-title)$
76+<h2 id="$idprefix$toc-title">$toc-title$</h2>
77+$endif$
78+$table-of-contents$
79+</nav>
80+$endif$
81+
82+$body$
83+$for(include-after)$
84+$include-after$
85+$endfor$
86+</article>
87+</body>
88+</html>