dots


commit
5a1fab2
parent
a1a566e
author
xxwhirlpool
date
2025-10-15 14:50:47 -0400 EDT
md2html fuckery
4 files changed,  +325, -7
M scripts/Scripts/md2html.css
+39, -6
 1@@ -4,12 +4,10 @@
 2       background-color: var(--ctp-latte-base);
 3     }
 4     body {
 5-      margin: 0 auto;
 6-      max-width: 50%;
 7-      padding-left: 50px;
 8-      padding-right: 50px;
 9-      padding-top: 50px;
10-      padding-bottom: 50px;
11+      margin: 0;
12+      min-height: 100vh;
13+      line-height: 1.7;
14+      font-family: Arial, sans-serif;
15       hyphens: auto;
16       overflow-wrap: break-word;
17       text-rendering: optimizeLegibility;
18@@ -54,6 +52,7 @@
19     }
20     img {
21       max-width: 100%;
22+      display: block;
23     }
24     svg {
25       height: auto;
26@@ -62,6 +61,7 @@
27     h1, h2, h3, h4, h5, h6 {
28       margin-top: 1.4em;
29       color: var(--ctp-frappe-surface0);
30+      line-height: 1.1;
31     }
32     h5, h6 {
33       font-size: 1em;
34@@ -169,3 +169,36 @@
35       color: var(--ctp-latte-surface1);
36       background: var(--ctp-frappe-crust);
37     }
38+    
39+	.flow > * + * {
40+  	margin-block-start: var(--flow-space, 1em);
41+	}
42+
43+	:is(h1, h2, h3, blockquote) {
44+  	--flow-space: 1.5em;
45+	}
46+	
47+	:is(h1, h2, h3) + * {
48+  	--flow-space: 0.5em;
49+	}
50+
51+	article > * {
52+		max-width: 65ch;
53+	}
54+	
55+	article {
56+		max-width: 65ch;
57+		margin-inline: auto;
58+	}
59+	
60+	blockquote {
61+		max-width: 50ch;
62+	}
63+	
64+	h1 {
65+		max-width: 20ch;
66+	}
67+	
68+	h2,h3 {
69+		max-width: 28ch;
70+	}
M scripts/Scripts/md2html.html
+2, -1
 1@@ -37,6 +37,7 @@ $endif$
 2 </head>
 3 <body>
 4 <script>hljs.highlightAll();</script>
 5+<article class="flow">
 6 $for(include-before)$
 7 $include-before$
 8 $endfor$
 9@@ -77,7 +78,7 @@ $endif$
10 $table-of-contents$
11 </nav>
12 $endif$
13-<article>
14+
15 $body$
16 $for(include-after)$
17 $include-after$
A scripts/Scripts/md2html_test/md2html.css
+196, -0
  1@@ -0,0 +1,196 @@
  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+
178+	:is(h1, h2, h3, blockquote) {
179+  	--flow-space: 1.5em;
180+	}
181+	
182+	:is(h1, h2, h3) + * {
183+  	--flow-space: 0.5em;
184+	}
185+
186+	article > * {
187+		max-width: 65ch;
188+	}
189+	
190+	article {
191+		max-width: 65ch;
192+		margin-inline: auto;
193+	}
194+	
195+	blockquote {
196+		max-width: 50ch;
197+	}
A scripts/Scripts/md2html_test/md2html.html
+88, -0
 1@@ -0,0 +1,88 @@
 2+<!DOCTYPE html>
 3+<html lang="en">
 4+<head>
 5+  <meta charset="utf-8" />
 6+  <meta name="generator" content="pandoc" />
 7+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
 8+$for(author-meta)$
 9+  <meta name="author" content="$author-meta$" />
10+$endfor$
11+$if(date-meta)$
12+  <meta name="dcterms.date" content="$date-meta$" />
13+$endif$
14+$if(keywords)$
15+  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
16+$endif$
17+$if(description-meta)$
18+  <meta name="description" content="$description-meta$" />
19+$endif$
20+  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
21+  
22+  <link rel="stylesheet" href="https://unpkg.com/@catppuccin/highlightjs@1.0.1/css/catppuccin-frappe.css">
23+  
24+  <link rel="stylesheet" href="./md2html.css">
25+  
26+  <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
27+  
28+  <script>
29+  document.getElementById("sourceCode").classList.add("language ");
30+  </script>
31+  
32+$for(header-includes)$
33+  $header-includes$
34+$endfor$
35+$if(math)$
36+  $math$
37+$endif$
38+</head>
39+<body>
40+<script>hljs.highlightAll();</script>
41+<article class="flow">
42+$for(include-before)$
43+$include-before$
44+$endfor$
45+$if(title)$
46+<header id="title-block-header">
47+<h1 class="title">$title$</h1>
48+$if(subtitle)$
49+<p class="subtitle">$subtitle$</p>
50+$endif$
51+<p>
52+$if(date)$
53+published <span class="date">$date$</span>
54+$endif$
55+</p>
56+<p>
57+$if(lastmodified)$
58+last edited <span class="date">$lastmodified$</span>
59+$endif$
60+</p>
61+<p>
62+$for(author)$
63+by <a href="https://girlonthemoon.xyz/"><span class="author">$author$</span></a>
64+$endfor$
65+</p>
66+$if(abstract)$
67+<div class="abstract">
68+<div class="abstract-title">$abstract-title$</div>
69+$abstract$
70+</div>
71+$endif$
72+</header>
73+$endif$
74+$if(toc)$
75+<nav id="$idprefix$TOC" role="doc-toc">
76+$if(toc-title)$
77+<h2 id="$idprefix$toc-title">$toc-title$</h2>
78+$endif$
79+$table-of-contents$
80+</nav>
81+$endif$
82+
83+$body$
84+$for(include-after)$
85+$include-after$
86+$endfor$
87+</article>
88+</body>
89+</html>