katproto.girlonthemoon.xyz
+39
-6
scripts/Scripts/md2html.css
+39
-6
scripts/Scripts/md2html.css
···
4
4
background-color: var(--ctp-latte-base);
5
5
}
6
6
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;
13
11
hyphens: auto;
14
12
overflow-wrap: break-word;
15
13
text-rendering: optimizeLegibility;
···
54
52
}
55
53
img {
56
54
max-width: 100%;
55
+
display: block;
57
56
}
58
57
svg {
59
58
height: auto;
···
62
61
h1, h2, h3, h4, h5, h6 {
63
62
margin-top: 1.4em;
64
63
color: var(--ctp-frappe-surface0);
64
+
line-height: 1.1;
65
65
}
66
66
h5, h6 {
67
67
font-size: 1em;
···
169
169
color: var(--ctp-latte-surface1);
170
170
background: var(--ctp-frappe-crust);
171
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
+
}
197
+
198
+
h1 {
199
+
max-width: 20ch;
200
+
}
201
+
202
+
h2,h3 {
203
+
max-width: 28ch;
204
+
}
+2
-1
scripts/Scripts/md2html.html
+2
-1
scripts/Scripts/md2html.html
···
37
37
</head>
38
38
<body>
39
39
<script>hljs.highlightAll();</script>
40
+
<article class="flow">
40
41
$for(include-before)$
41
42
$include-before$
42
43
$endfor$
···
77
78
$table-of-contents$
78
79
</nav>
79
80
$endif$
80
-
<article>
81
+
81
82
$body$
82
83
$for(include-after)$
83
84
$include-after$
+196
scripts/Scripts/md2html_test/md2html.css
+196
scripts/Scripts/md2html_test/md2html.css
···
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
+
}
+88
scripts/Scripts/md2html_test/md2html.html
+88
scripts/Scripts/md2html_test/md2html.html
···
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>