repos / pico

pico services - prose.sh, pastes.sh, imgs.sh, feeds.sh, pgs.sh
git clone https://github.com/picosh/pico.git

commit
fb68af2
parent
ed3a7c3
author
Eric Bower
date
2022-08-08 15:51:48 +0000 UTC
feat(css): abstracted common css into single file for all services

It was becoming tedious to make the same change in three different css
files, so I abstracted the main styling into a single file and am now
copying the css into each service's public directory with `make css`.
13 files changed,  +2617, -496
M Makefile
+9, -0
 1@@ -7,6 +7,15 @@ DOCKER_TAG?=$(shell git log --format="%H" -n 1)
 2 DOCKER_PLATFORM?=linux/amd64,linux/arm64
 3 DOCKER_BUILDX_BUILD?=docker buildx build --push --platform $(DOCKER_PLATFORM)
 4 
 5+css:
 6+	cp ./smol.css lists/public/main.css
 7+	cp ./smol.css prose/public/main.css
 8+	cp ./smol.css pastes/public/main.css
 9+
10+	cp ./syntax.css pastes/public/syntax.css
11+	cp ./syntax.css prose/public/syntax.css
12+.PHONY: css
13+
14 lint:
15 	docker run --rm -v $(shell pwd):/app -w /app golangci/golangci-lint:latest golangci-lint run -E goimports -E godot
16 .PHONY: lint
M lists/html/blog.page.tmpl
+1, -1
1@@ -55,7 +55,7 @@
2         <article>
3             <div class="flex items-center">
4                 <time datetime="{{.UpdatedAtISO}}" class="font-italic text-sm post-date">{{.UpdatedTimeAgo}}</time>
5-                <h2 class="font-bold flex-1"><a href="{{.URL}}">{{.Title}}</a></h2>
6+                <div class="font-bold flex-1"><a href="{{.URL}}">{{.Title}}</a></div>
7             </div>
8         </article>
9         {{end}}
M lists/html/read.page.tmpl
+1, -1
1@@ -22,7 +22,7 @@
2         <div class="flex items-center">
3             <time datetime="{{.UpdatedAtISO}}" class="font-italic text-sm post-date">{{.UpdatedTimeAgo}}</time>
4             <div class="flex-1">
5-                <h2 class="inline"><a href="{{.URL}}">{{.Title}}</a></h2>
6+                <div class="inline"><a href="{{.URL}}">{{.Title}}</a></div>
7                 <address class="text-sm inline">
8                     <a href="{{.BlogURL}}" class="link-grey">({{.Username}})</a>
9                 </address>
M lists/public/main.css
+60, -34
  1@@ -1,24 +1,31 @@
  2-*, ::before, ::after {
  3+*,
  4+::before,
  5+::after {
  6   box-sizing: border-box;
  7 }
  8 
  9 ::-moz-focus-inner {
 10-	border-style: none;
 11-	padding: 0;
 12+  border-style: none;
 13+  padding: 0;
 14+}
 15+:-moz-focusring {
 16+  outline: 1px dotted ButtonText;
 17+}
 18+:-moz-ui-invalid {
 19+  box-shadow: none;
 20 }
 21-:-moz-focusring { outline: 1px dotted ButtonText; }
 22-:-moz-ui-invalid { box-shadow: none; }
 23 
 24 @media (prefers-color-scheme: light) {
 25   :root {
 26     --white: #6a737d;
 27-    --code: rgba(255, 229, 100, 0.2);
 28+    --code: #fff8d3;
 29+    --code-border: #f0d547;
 30     --pre: #f6f8fa;
 31     --bg-color: #fff;
 32     --text-color: #24292f;
 33     --link-color: #005cc5;
 34     --visited: #6f42c1;
 35-    --blockquote: #785840;
 36+    --blockquote: #005cc5;
 37     --blockquote-bg: #fff;
 38     --hover: #d73a49;
 39     --grey: #ccc;
 40@@ -28,7 +35,8 @@
 41 @media (prefers-color-scheme: dark) {
 42   :root {
 43     --white: #f2f2f2;
 44-    --code: #252525;
 45+    --code: #414558;
 46+    --code-border: #252525;
 47     --pre: #252525;
 48     --bg-color: #282a36;
 49     --text-color: #f2f2f2;
 50@@ -45,17 +53,18 @@ html {
 51   background-color: var(--bg-color);
 52   color: var(--text-color);
 53   line-height: 1.5;
 54-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
 55-    "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
 56-    "Segoe UI Emoji", "Segoe UI Symbol";
 57-	-webkit-text-size-adjust: 100%;
 58-	-moz-tab-size: 4;
 59-	tab-size: 4;
 60+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 61+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
 62+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 63+  -webkit-text-size-adjust: 100%;
 64+  -moz-tab-size: 4;
 65+  tab-size: 4;
 66+  font-size: 17px;
 67 }
 68 
 69 body {
 70   margin: 0 auto;
 71-  max-width: 35rem;
 72+  max-width: 42rem;
 73 }
 74 
 75 img {
 76@@ -63,34 +72,43 @@ img {
 77   height: auto;
 78 }
 79 
 80-b, strong {
 81+b,
 82+strong {
 83   font-weight: bold;
 84 }
 85 
 86-code, kbd, samp, pre {
 87-	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
 88-	font-size: 0.8rem;
 89+code,
 90+kbd,
 91+samp,
 92+pre {
 93+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
 94+    monospace;
 95+  font-size: 0.8rem;
 96 }
 97 
 98-code, kbd, samp {
 99+code,
100+kbd,
101+samp {
102   background-color: var(--code);
103+  border: 1px solid var(--code-border);
104 }
105 
106 pre > code {
107   background-color: inherit;
108   padding: 0;
109+  border: none;
110 }
111 
112 code {
113   border-radius: 0.3rem;
114-  padding: .15rem .2rem .05rem;
115+  padding: 0.15rem 0.2rem 0.05rem;
116 }
117 
118 pre {
119   border-radius: 5px;
120   padding: 1rem;
121+  margin: 1rem 0;
122   overflow-x: auto;
123-  margin: 0;
124   background-color: var(--pre) !important;
125 }
126 
127@@ -102,10 +120,12 @@ summary {
128   display: list-item;
129 }
130 
131-h1, h2, h3 {
132+h1,
133+h2,
134+h3 {
135   margin: 0;
136-	padding: 0;
137-	border: 0;
138+  padding: 0.6rem 0 0 0;
139+  border: 0;
140   font-style: normal;
141   font-weight: inherit;
142   font-size: inherit;
143@@ -126,7 +146,8 @@ a {
144   color: var(--link-color);
145 }
146 
147-a:hover, a:visited:hover {
148+a:hover,
149+a:visited:hover {
150   color: var(--hover);
151 }
152 
153@@ -144,7 +165,7 @@ a.link-grey:visited {
154 }
155 
156 section {
157-  margin-bottom: 2rem;
158+  margin-bottom: 1.4rem;
159 }
160 
161 section:last-child {
162@@ -166,11 +187,16 @@ article {
163 blockquote {
164   border-left: 5px solid var(--blockquote);
165   background-color: var(--blockquote-bg);
166-  padding: 0.5rem;
167-  margin: 0.5rem 0;
168+  padding: 0.8rem;
169+  margin: 1rem 0;
170+}
171+
172+blockquote > p {
173+  margin: 0;
174 }
175 
176-ul, ol {
177+ul,
178+ol {
179   padding: 0 0 0 2rem;
180   list-style-position: outside;
181 }
182@@ -201,7 +227,7 @@ dd {
183 }
184 
185 dd:not(:last-child) {
186-  margin-bottom: .5rem;
187+  margin-bottom: 0.5rem;
188 }
189 
190 .post-date {
191@@ -213,17 +239,17 @@ dd:not(:last-child) {
192 }
193 
194 .text-2xl {
195-  font-size: 1.5rem;
196+  font-size: 1.85rem;
197   line-height: 1.15;
198 }
199 
200 .text-xl {
201-  font-size: 1.25rem;
202+  font-size: 1.45rem;
203   line-height: 1.15;
204 }
205 
206 .text-lg {
207-  font-size: 1.125rem;
208+  font-size: 1.25rem;
209   line-height: 1.15;
210 }
211 
M pastes/public/main.css
+59, -60
  1@@ -1,24 +1,31 @@
  2-*, ::before, ::after {
  3+*,
  4+::before,
  5+::after {
  6   box-sizing: border-box;
  7 }
  8 
  9 ::-moz-focus-inner {
 10-	border-style: none;
 11-	padding: 0;
 12+  border-style: none;
 13+  padding: 0;
 14+}
 15+:-moz-focusring {
 16+  outline: 1px dotted ButtonText;
 17+}
 18+:-moz-ui-invalid {
 19+  box-shadow: none;
 20 }
 21-:-moz-focusring { outline: 1px dotted ButtonText; }
 22-:-moz-ui-invalid { box-shadow: none; }
 23 
 24 @media (prefers-color-scheme: light) {
 25   :root {
 26     --white: #6a737d;
 27-    --code: rgba(255, 229, 100, 0.2);
 28+    --code: #fff8d3;
 29+    --code-border: #f0d547;
 30     --pre: #f6f8fa;
 31     --bg-color: #fff;
 32     --text-color: #24292f;
 33     --link-color: #005cc5;
 34     --visited: #6f42c1;
 35-    --blockquote: #785840;
 36+    --blockquote: #005cc5;
 37     --blockquote-bg: #fff;
 38     --hover: #d73a49;
 39     --grey: #ccc;
 40@@ -28,7 +35,8 @@
 41 @media (prefers-color-scheme: dark) {
 42   :root {
 43     --white: #f2f2f2;
 44-    --code: #252525;
 45+    --code: #414558;
 46+    --code-border: #252525;
 47     --pre: #252525;
 48     --bg-color: #282a36;
 49     --text-color: #f2f2f2;
 50@@ -45,12 +53,13 @@ html {
 51   background-color: var(--bg-color);
 52   color: var(--text-color);
 53   line-height: 1.5;
 54-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
 55-    "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
 56-    "Segoe UI Emoji", "Segoe UI Symbol";
 57-	-webkit-text-size-adjust: 100%;
 58-	-moz-tab-size: 4;
 59-	tab-size: 4;
 60+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 61+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
 62+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 63+  -webkit-text-size-adjust: 100%;
 64+  -moz-tab-size: 4;
 65+  tab-size: 4;
 66+  font-size: 17px;
 67 }
 68 
 69 body {
 70@@ -63,34 +72,43 @@ img {
 71   height: auto;
 72 }
 73 
 74-b, strong {
 75+b,
 76+strong {
 77   font-weight: bold;
 78 }
 79 
 80-code, kbd, samp, pre {
 81-	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
 82-	font-size: 0.8rem;
 83+code,
 84+kbd,
 85+samp,
 86+pre {
 87+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
 88+    monospace;
 89+  font-size: 0.8rem;
 90 }
 91 
 92-code, kbd, samp {
 93+code,
 94+kbd,
 95+samp {
 96   background-color: var(--code);
 97+  border: 1px solid var(--code-border);
 98 }
 99 
100 pre > code {
101   background-color: inherit;
102   padding: 0;
103+  border: none;
104 }
105 
106 code {
107   border-radius: 0.3rem;
108-  padding: .15rem .2rem .05rem;
109+  padding: 0.15rem 0.2rem 0.05rem;
110 }
111 
112 pre {
113   border-radius: 5px;
114   padding: 1rem;
115+  margin: 1rem 0;
116   overflow-x: auto;
117-  margin: 0;
118   background-color: var(--pre) !important;
119 }
120 
121@@ -102,10 +120,12 @@ summary {
122   display: list-item;
123 }
124 
125-h1, h2, h3 {
126+h1,
127+h2,
128+h3 {
129   margin: 0;
130-	padding: 0;
131-	border: 0;
132+  padding: 0.6rem 0 0 0;
133+  border: 0;
134   font-style: normal;
135   font-weight: inherit;
136   font-size: inherit;
137@@ -126,7 +146,8 @@ a {
138   color: var(--link-color);
139 }
140 
141-a:hover, a:visited:hover {
142+a:hover,
143+a:visited:hover {
144   color: var(--hover);
145 }
146 
147@@ -144,7 +165,7 @@ a.link-grey:visited {
148 }
149 
150 section {
151-  margin-bottom: 2rem;
152+  margin-bottom: 1.4rem;
153 }
154 
155 section:last-child {
156@@ -166,11 +187,16 @@ article {
157 blockquote {
158   border-left: 5px solid var(--blockquote);
159   background-color: var(--blockquote-bg);
160-  padding: 0.5rem;
161-  margin: 0.5rem 0;
162+  padding: 0.8rem;
163+  margin: 1rem 0;
164+}
165+
166+blockquote > p {
167+  margin: 0;
168 }
169 
170-ul, ol {
171+ul,
172+ol {
173   padding: 0 0 0 2rem;
174   list-style-position: outside;
175 }
176@@ -201,30 +227,7 @@ dd {
177 }
178 
179 dd:not(:last-child) {
180-  margin-bottom: .5rem;
181-}
182-
183-.md h1 {
184-  font-size: 1.25rem;
185-  line-height: 1.15;
186-  font-weight: bold;
187-  padding: 0.5rem 0;
188-}
189-
190-.md h2 {
191-  font-size: 1.125rem;
192-  line-height: 1.15;
193-  font-weight: bold;
194-  padding: 0.5rem 0;
195-}
196-
197-.md h3 {
198-  font-weight: bold;
199-}
200-
201-.md h4 {
202-  font-size: 0.875rem;
203-  font-weight: bold;
204+  margin-bottom: 0.5rem;
205 }
206 
207 .post-date {
208@@ -236,17 +239,17 @@ dd:not(:last-child) {
209 }
210 
211 .text-2xl {
212-  font-size: 1.5rem;
213+  font-size: 1.85rem;
214   line-height: 1.15;
215 }
216 
217 .text-xl {
218-  font-size: 1.25rem;
219+  font-size: 1.45rem;
220   line-height: 1.15;
221 }
222 
223 .text-lg {
224-  font-size: 1.125rem;
225+  font-size: 1.25rem;
226   line-height: 1.15;
227 }
228 
229@@ -314,7 +317,3 @@ dd:not(:last-child) {
230     margin: 0;
231   }
232 }
233-
234-#post {
235-  max-width: 90%;
236-}
M pastes/public/syntax.css
+695, -170
  1@@ -1,175 +1,700 @@
  2 @media (prefers-color-scheme: light) {
  3-  /* Background */ .bg { background-color: #ffffff; }
  4-  /* PreWrapper */ .chroma { background-color: #ffffff; }
  5-  /* Other */ .chroma .x {  }
  6-  /* Error */ .chroma .err { background-color: #a848a8 }
  7-  /* CodeLine */ .chroma .cl {  }
  8-  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
  9-  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
 10-  /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
 11-  /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 12-  /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 13-  /* Line */ .chroma .line { display: flex; }
 14-  /* Keyword */ .chroma .k { color: #2838b0 }
 15-  /* KeywordConstant */ .chroma .kc { color: #444444; font-style: italic }
 16-  /* KeywordDeclaration */ .chroma .kd { color: #2838b0; font-style: italic }
 17-  /* KeywordNamespace */ .chroma .kn { color: #2838b0 }
 18-  /* KeywordPseudo */ .chroma .kp { color: #2838b0 }
 19-  /* KeywordReserved */ .chroma .kr { color: #2838b0 }
 20-  /* KeywordType */ .chroma .kt { color: #2838b0; font-style: italic }
 21-  /* Name */ .chroma .n {  }
 22-  /* NameAttribute */ .chroma .na { color: #388038 }
 23-  /* NameBuiltin */ .chroma .nb { color: #388038 }
 24-  /* NameBuiltinPseudo */ .chroma .bp { font-style: italic }
 25-  /* NameClass */ .chroma .nc { color: #287088 }
 26-  /* NameConstant */ .chroma .no { color: #b85820 }
 27-  /* NameDecorator */ .chroma .nd { color: #287088 }
 28-  /* NameEntity */ .chroma .ni { color: #709030 }
 29-  /* NameException */ .chroma .ne { color: #908828 }
 30-  /* NameFunction */ .chroma .nf { color: #785840 }
 31-  /* NameFunctionMagic */ .chroma .fm { color: #b85820 }
 32-  /* NameLabel */ .chroma .nl { color: #289870 }
 33-  /* NameNamespace */ .chroma .nn { color: #289870 }
 34-  /* NameOther */ .chroma .nx {  }
 35-  /* NameProperty */ .chroma .py {  }
 36-  /* NameTag */ .chroma .nt { color: #2838b0 }
 37-  /* NameVariable */ .chroma .nv { color: #b04040 }
 38-  /* NameVariableClass */ .chroma .vc {  }
 39-  /* NameVariableGlobal */ .chroma .vg { color: #908828 }
 40-  /* NameVariableInstance */ .chroma .vi {  }
 41-  /* NameVariableMagic */ .chroma .vm { color: #b85820 }
 42-  /* Literal */ .chroma .l {  }
 43-  /* LiteralDate */ .chroma .ld {  }
 44-  /* LiteralString */ .chroma .s { color: #b83838 }
 45-  /* LiteralStringAffix */ .chroma .sa { color: #444444 }
 46-  /* LiteralStringBacktick */ .chroma .sb { color: #b83838 }
 47-  /* LiteralStringChar */ .chroma .sc { color: #a848a8 }
 48-  /* LiteralStringDelimiter */ .chroma .dl { color: #b85820 }
 49-  /* LiteralStringDoc */ .chroma .sd { color: #b85820; font-style: italic }
 50-  /* LiteralStringDouble */ .chroma .s2 { color: #b83838 }
 51-  /* LiteralStringEscape */ .chroma .se { color: #709030 }
 52-  /* LiteralStringHeredoc */ .chroma .sh { color: #b83838 }
 53-  /* LiteralStringInterpol */ .chroma .si { color: #b83838; text-decoration: underline }
 54-  /* LiteralStringOther */ .chroma .sx { color: #a848a8 }
 55-  /* LiteralStringRegex */ .chroma .sr { color: #a848a8 }
 56-  /* LiteralStringSingle */ .chroma .s1 { color: #b83838 }
 57-  /* LiteralStringSymbol */ .chroma .ss { color: #b83838 }
 58-  /* LiteralNumber */ .chroma .m { color: #444444 }
 59-  /* LiteralNumberBin */ .chroma .mb { color: #444444 }
 60-  /* LiteralNumberFloat */ .chroma .mf { color: #444444 }
 61-  /* LiteralNumberHex */ .chroma .mh { color: #444444 }
 62-  /* LiteralNumberInteger */ .chroma .mi { color: #444444 }
 63-  /* LiteralNumberIntegerLong */ .chroma .il { color: #444444 }
 64-  /* LiteralNumberOct */ .chroma .mo { color: #444444 }
 65-  /* Operator */ .chroma .o { color: #666666 }
 66-  /* OperatorWord */ .chroma .ow { color: #a848a8 }
 67-  /* Punctuation */ .chroma .p { color: #888888 }
 68-  /* Comment */ .chroma .c { color: #888888; font-style: italic }
 69-  /* CommentHashbang */ .chroma .ch { color: #287088; font-style: italic }
 70-  /* CommentMultiline */ .chroma .cm { color: #888888; font-style: italic }
 71-  /* CommentSingle */ .chroma .c1 { color: #888888; font-style: italic }
 72-  /* CommentSpecial */ .chroma .cs { color: #888888; font-style: italic }
 73-  /* CommentPreproc */ .chroma .cp { color: #289870 }
 74-  /* CommentPreprocFile */ .chroma .cpf { color: #289870 }
 75-  /* Generic */ .chroma .g {  }
 76-  /* GenericDeleted */ .chroma .gd { color: #c02828 }
 77-  /* GenericEmph */ .chroma .ge { font-style: italic }
 78-  /* GenericError */ .chroma .gr { color: #c02828 }
 79-  /* GenericHeading */ .chroma .gh { color: #666666 }
 80-  /* GenericInserted */ .chroma .gi { color: #388038 }
 81-  /* GenericOutput */ .chroma .go { color: #666666 }
 82-  /* GenericPrompt */ .chroma .gp { color: #444444 }
 83-  /* GenericStrong */ .chroma .gs { font-weight: bold }
 84-  /* GenericSubheading */ .chroma .gu { color: #444444 }
 85-  /* GenericTraceback */ .chroma .gt { color: #2838b0 }
 86-  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
 87-  /* TextWhitespace */ .chroma .w { color: #a89028 }
 88+  /* Background */
 89+  .bg {
 90+    background-color: #ffffff;
 91+  }
 92+  /* PreWrapper */
 93+  .chroma {
 94+    background-color: #ffffff;
 95+  }
 96+  /* Other */
 97+  .chroma .x {
 98+  }
 99+  /* Error */
100+  .chroma .err {
101+    background-color: #a848a8;
102+  }
103+  /* CodeLine */
104+  .chroma .cl {
105+  }
106+  /* LineTableTD */
107+  .chroma .lntd {
108+    vertical-align: top;
109+    padding: 0;
110+    margin: 0;
111+    border: 0;
112+  }
113+  /* LineTable */
114+  .chroma .lntable {
115+    border-spacing: 0;
116+    padding: 0;
117+    margin: 0;
118+    border: 0;
119+  }
120+  /* LineHighlight */
121+  .chroma .hl {
122+    background-color: #ffffcc;
123+  }
124+  /* LineNumbersTable */
125+  .chroma .lnt {
126+    white-space: pre;
127+    user-select: none;
128+    margin-right: 0.4em;
129+    padding: 0 0.4em 0 0.4em;
130+    color: #7f7f7f;
131+  }
132+  /* LineNumbers */
133+  .chroma .ln {
134+    white-space: pre;
135+    user-select: none;
136+    margin-right: 0.4em;
137+    padding: 0 0.4em 0 0.4em;
138+    color: #7f7f7f;
139+  }
140+  /* Line */
141+  .chroma .line {
142+    display: flex;
143+  }
144+  /* Keyword */
145+  .chroma .k {
146+    color: #2838b0;
147+  }
148+  /* KeywordConstant */
149+  .chroma .kc {
150+    color: #444444;
151+    font-style: italic;
152+  }
153+  /* KeywordDeclaration */
154+  .chroma .kd {
155+    color: #2838b0;
156+    font-style: italic;
157+  }
158+  /* KeywordNamespace */
159+  .chroma .kn {
160+    color: #2838b0;
161+  }
162+  /* KeywordPseudo */
163+  .chroma .kp {
164+    color: #2838b0;
165+  }
166+  /* KeywordReserved */
167+  .chroma .kr {
168+    color: #2838b0;
169+  }
170+  /* KeywordType */
171+  .chroma .kt {
172+    color: #2838b0;
173+    font-style: italic;
174+  }
175+  /* Name */
176+  .chroma .n {
177+  }
178+  /* NameAttribute */
179+  .chroma .na {
180+    color: #388038;
181+  }
182+  /* NameBuiltin */
183+  .chroma .nb {
184+    color: #388038;
185+  }
186+  /* NameBuiltinPseudo */
187+  .chroma .bp {
188+    font-style: italic;
189+  }
190+  /* NameClass */
191+  .chroma .nc {
192+    color: #287088;
193+  }
194+  /* NameConstant */
195+  .chroma .no {
196+    color: #b85820;
197+  }
198+  /* NameDecorator */
199+  .chroma .nd {
200+    color: #287088;
201+  }
202+  /* NameEntity */
203+  .chroma .ni {
204+    color: #709030;
205+  }
206+  /* NameException */
207+  .chroma .ne {
208+    color: #908828;
209+  }
210+  /* NameFunction */
211+  .chroma .nf {
212+    color: #785840;
213+  }
214+  /* NameFunctionMagic */
215+  .chroma .fm {
216+    color: #b85820;
217+  }
218+  /* NameLabel */
219+  .chroma .nl {
220+    color: #289870;
221+  }
222+  /* NameNamespace */
223+  .chroma .nn {
224+    color: #289870;
225+  }
226+  /* NameOther */
227+  .chroma .nx {
228+  }
229+  /* NameProperty */
230+  .chroma .py {
231+  }
232+  /* NameTag */
233+  .chroma .nt {
234+    color: #2838b0;
235+  }
236+  /* NameVariable */
237+  .chroma .nv {
238+    color: #b04040;
239+  }
240+  /* NameVariableClass */
241+  .chroma .vc {
242+  }
243+  /* NameVariableGlobal */
244+  .chroma .vg {
245+    color: #908828;
246+  }
247+  /* NameVariableInstance */
248+  .chroma .vi {
249+  }
250+  /* NameVariableMagic */
251+  .chroma .vm {
252+    color: #b85820;
253+  }
254+  /* Literal */
255+  .chroma .l {
256+  }
257+  /* LiteralDate */
258+  .chroma .ld {
259+  }
260+  /* LiteralString */
261+  .chroma .s {
262+    color: #b83838;
263+  }
264+  /* LiteralStringAffix */
265+  .chroma .sa {
266+    color: #444444;
267+  }
268+  /* LiteralStringBacktick */
269+  .chroma .sb {
270+    color: #b83838;
271+  }
272+  /* LiteralStringChar */
273+  .chroma .sc {
274+    color: #a848a8;
275+  }
276+  /* LiteralStringDelimiter */
277+  .chroma .dl {
278+    color: #b85820;
279+  }
280+  /* LiteralStringDoc */
281+  .chroma .sd {
282+    color: #b85820;
283+    font-style: italic;
284+  }
285+  /* LiteralStringDouble */
286+  .chroma .s2 {
287+    color: #b83838;
288+  }
289+  /* LiteralStringEscape */
290+  .chroma .se {
291+    color: #709030;
292+  }
293+  /* LiteralStringHeredoc */
294+  .chroma .sh {
295+    color: #b83838;
296+  }
297+  /* LiteralStringInterpol */
298+  .chroma .si {
299+    color: #b83838;
300+    text-decoration: underline;
301+  }
302+  /* LiteralStringOther */
303+  .chroma .sx {
304+    color: #a848a8;
305+  }
306+  /* LiteralStringRegex */
307+  .chroma .sr {
308+    color: #a848a8;
309+  }
310+  /* LiteralStringSingle */
311+  .chroma .s1 {
312+    color: #b83838;
313+  }
314+  /* LiteralStringSymbol */
315+  .chroma .ss {
316+    color: #b83838;
317+  }
318+  /* LiteralNumber */
319+  .chroma .m {
320+    color: #444444;
321+  }
322+  /* LiteralNumberBin */
323+  .chroma .mb {
324+    color: #444444;
325+  }
326+  /* LiteralNumberFloat */
327+  .chroma .mf {
328+    color: #444444;
329+  }
330+  /* LiteralNumberHex */
331+  .chroma .mh {
332+    color: #444444;
333+  }
334+  /* LiteralNumberInteger */
335+  .chroma .mi {
336+    color: #444444;
337+  }
338+  /* LiteralNumberIntegerLong */
339+  .chroma .il {
340+    color: #444444;
341+  }
342+  /* LiteralNumberOct */
343+  .chroma .mo {
344+    color: #444444;
345+  }
346+  /* Operator */
347+  .chroma .o {
348+    color: #666666;
349+  }
350+  /* OperatorWord */
351+  .chroma .ow {
352+    color: #a848a8;
353+  }
354+  /* Punctuation */
355+  .chroma .p {
356+    color: #888888;
357+  }
358+  /* Comment */
359+  .chroma .c {
360+    color: #888888;
361+    font-style: italic;
362+  }
363+  /* CommentHashbang */
364+  .chroma .ch {
365+    color: #287088;
366+    font-style: italic;
367+  }
368+  /* CommentMultiline */
369+  .chroma .cm {
370+    color: #888888;
371+    font-style: italic;
372+  }
373+  /* CommentSingle */
374+  .chroma .c1 {
375+    color: #888888;
376+    font-style: italic;
377+  }
378+  /* CommentSpecial */
379+  .chroma .cs {
380+    color: #888888;
381+    font-style: italic;
382+  }
383+  /* CommentPreproc */
384+  .chroma .cp {
385+    color: #289870;
386+  }
387+  /* CommentPreprocFile */
388+  .chroma .cpf {
389+    color: #289870;
390+  }
391+  /* Generic */
392+  .chroma .g {
393+  }
394+  /* GenericDeleted */
395+  .chroma .gd {
396+    color: #c02828;
397+  }
398+  /* GenericEmph */
399+  .chroma .ge {
400+    font-style: italic;
401+  }
402+  /* GenericError */
403+  .chroma .gr {
404+    color: #c02828;
405+  }
406+  /* GenericHeading */
407+  .chroma .gh {
408+    color: #666666;
409+  }
410+  /* GenericInserted */
411+  .chroma .gi {
412+    color: #388038;
413+  }
414+  /* GenericOutput */
415+  .chroma .go {
416+    color: #666666;
417+  }
418+  /* GenericPrompt */
419+  .chroma .gp {
420+    color: #444444;
421+  }
422+  /* GenericStrong */
423+  .chroma .gs {
424+    font-weight: bold;
425+  }
426+  /* GenericSubheading */
427+  .chroma .gu {
428+    color: #444444;
429+  }
430+  /* GenericTraceback */
431+  .chroma .gt {
432+    color: #2838b0;
433+  }
434+  /* GenericUnderline */
435+  .chroma .gl {
436+    text-decoration: underline;
437+  }
438+  /* TextWhitespace */
439+  .chroma .w {
440+    color: #a89028;
441+  }
442 }
443 
444 @media (prefers-color-scheme: dark) {
445-  /* Background */ .bg { color: #f8f8f2; background-color: #282a36; }
446-  /* PreWrapper */ .chroma { color: #f8f8f2; background-color: #282a36; }
447-  /* Other */ .chroma .x {  }
448-  /* Error */ .chroma .err {  }
449-  /* CodeLine */ .chroma .cl {  }
450-  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
451-  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
452-  /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
453-  /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
454-  /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
455-  /* Line */ .chroma .line { display: flex; }
456-  /* Keyword */ .chroma .k { color: #ff79c6 }
457-  /* KeywordConstant */ .chroma .kc { color: #ff79c6 }
458-  /* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
459-  /* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
460-  /* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
461-  /* KeywordReserved */ .chroma .kr { color: #ff79c6 }
462-  /* KeywordType */ .chroma .kt { color: #8be9fd }
463-  /* Name */ .chroma .n {  }
464-  /* NameAttribute */ .chroma .na { color: #50fa7b }
465-  /* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
466-  /* NameBuiltinPseudo */ .chroma .bp {  }
467-  /* NameClass */ .chroma .nc { color: #50fa7b }
468-  /* NameConstant */ .chroma .no {  }
469-  /* NameDecorator */ .chroma .nd {  }
470-  /* NameEntity */ .chroma .ni {  }
471-  /* NameException */ .chroma .ne {  }
472-  /* NameFunction */ .chroma .nf { color: #50fa7b }
473-  /* NameFunctionMagic */ .chroma .fm {  }
474-  /* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
475-  /* NameNamespace */ .chroma .nn {  }
476-  /* NameOther */ .chroma .nx {  }
477-  /* NameProperty */ .chroma .py {  }
478-  /* NameTag */ .chroma .nt { color: #ff79c6 }
479-  /* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
480-  /* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
481-  /* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
482-  /* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
483-  /* NameVariableMagic */ .chroma .vm {  }
484-  /* Literal */ .chroma .l {  }
485-  /* LiteralDate */ .chroma .ld {  }
486-  /* LiteralString */ .chroma .s { color: #f1fa8c }
487-  /* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
488-  /* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
489-  /* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
490-  /* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
491-  /* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
492-  /* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
493-  /* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
494-  /* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
495-  /* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
496-  /* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
497-  /* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
498-  /* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
499-  /* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
500-  /* LiteralNumber */ .chroma .m { color: #bd93f9 }
501-  /* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
502-  /* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
503-  /* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
504-  /* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
505-  /* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
506-  /* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
507-  /* Operator */ .chroma .o { color: #ff79c6 }
508-  /* OperatorWord */ .chroma .ow { color: #ff79c6 }
509-  /* Punctuation */ .chroma .p {  }
510-  /* Comment */ .chroma .c { color: #6272a4 }
511-  /* CommentHashbang */ .chroma .ch { color: #6272a4 }
512-  /* CommentMultiline */ .chroma .cm { color: #6272a4 }
513-  /* CommentSingle */ .chroma .c1 { color: #6272a4 }
514-  /* CommentSpecial */ .chroma .cs { color: #6272a4 }
515-  /* CommentPreproc */ .chroma .cp { color: #ff79c6 }
516-  /* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
517-  /* Generic */ .chroma .g {  }
518-  /* GenericDeleted */ .chroma .gd { color: #ff5555 }
519-  /* GenericEmph */ .chroma .ge { text-decoration: underline }
520-  /* GenericError */ .chroma .gr {  }
521-  /* GenericHeading */ .chroma .gh { font-weight: bold }
522-  /* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold }
523-  /* GenericOutput */ .chroma .go { color: #44475a }
524-  /* GenericPrompt */ .chroma .gp {  }
525-  /* GenericStrong */ .chroma .gs {  }
526-  /* GenericSubheading */ .chroma .gu { font-weight: bold }
527-  /* GenericTraceback */ .chroma .gt {  }
528-  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
529-  /* TextWhitespace */ .chroma .w {  }
530+  /* Background */
531+  .bg {
532+    color: #f8f8f2;
533+    background-color: #282a36;
534+  }
535+  /* PreWrapper */
536+  .chroma {
537+    color: #f8f8f2;
538+    background-color: #282a36;
539+  }
540+  /* Other */
541+  .chroma .x {
542+  }
543+  /* Error */
544+  .chroma .err {
545+  }
546+  /* CodeLine */
547+  .chroma .cl {
548+  }
549+  /* LineTableTD */
550+  .chroma .lntd {
551+    vertical-align: top;
552+    padding: 0;
553+    margin: 0;
554+    border: 0;
555+  }
556+  /* LineTable */
557+  .chroma .lntable {
558+    border-spacing: 0;
559+    padding: 0;
560+    margin: 0;
561+    border: 0;
562+  }
563+  /* LineHighlight */
564+  .chroma .hl {
565+    background-color: #ffffcc;
566+  }
567+  /* LineNumbersTable */
568+  .chroma .lnt {
569+    white-space: pre;
570+    user-select: none;
571+    margin-right: 0.4em;
572+    padding: 0 0.4em 0 0.4em;
573+    color: #7f7f7f;
574+  }
575+  /* LineNumbers */
576+  .chroma .ln {
577+    white-space: pre;
578+    user-select: none;
579+    margin-right: 0.4em;
580+    padding: 0 0.4em 0 0.4em;
581+    color: #7f7f7f;
582+  }
583+  /* Line */
584+  .chroma .line {
585+    display: flex;
586+  }
587+  /* Keyword */
588+  .chroma .k {
589+    color: #ff79c6;
590+  }
591+  /* KeywordConstant */
592+  .chroma .kc {
593+    color: #ff79c6;
594+  }
595+  /* KeywordDeclaration */
596+  .chroma .kd {
597+    color: #8be9fd;
598+    font-style: italic;
599+  }
600+  /* KeywordNamespace */
601+  .chroma .kn {
602+    color: #ff79c6;
603+  }
604+  /* KeywordPseudo */
605+  .chroma .kp {
606+    color: #ff79c6;
607+  }
608+  /* KeywordReserved */
609+  .chroma .kr {
610+    color: #ff79c6;
611+  }
612+  /* KeywordType */
613+  .chroma .kt {
614+    color: #8be9fd;
615+  }
616+  /* Name */
617+  .chroma .n {
618+  }
619+  /* NameAttribute */
620+  .chroma .na {
621+    color: #50fa7b;
622+  }
623+  /* NameBuiltin */
624+  .chroma .nb {
625+    color: #8be9fd;
626+    font-style: italic;
627+  }
628+  /* NameBuiltinPseudo */
629+  .chroma .bp {
630+  }
631+  /* NameClass */
632+  .chroma .nc {
633+    color: #50fa7b;
634+  }
635+  /* NameConstant */
636+  .chroma .no {
637+  }
638+  /* NameDecorator */
639+  .chroma .nd {
640+  }
641+  /* NameEntity */
642+  .chroma .ni {
643+  }
644+  /* NameException */
645+  .chroma .ne {
646+  }
647+  /* NameFunction */
648+  .chroma .nf {
649+    color: #50fa7b;
650+  }
651+  /* NameFunctionMagic */
652+  .chroma .fm {
653+  }
654+  /* NameLabel */
655+  .chroma .nl {
656+    color: #8be9fd;
657+    font-style: italic;
658+  }
659+  /* NameNamespace */
660+  .chroma .nn {
661+  }
662+  /* NameOther */
663+  .chroma .nx {
664+  }
665+  /* NameProperty */
666+  .chroma .py {
667+  }
668+  /* NameTag */
669+  .chroma .nt {
670+    color: #ff79c6;
671+  }
672+  /* NameVariable */
673+  .chroma .nv {
674+    color: #8be9fd;
675+    font-style: italic;
676+  }
677+  /* NameVariableClass */
678+  .chroma .vc {
679+    color: #8be9fd;
680+    font-style: italic;
681+  }
682+  /* NameVariableGlobal */
683+  .chroma .vg {
684+    color: #8be9fd;
685+    font-style: italic;
686+  }
687+  /* NameVariableInstance */
688+  .chroma .vi {
689+    color: #8be9fd;
690+    font-style: italic;
691+  }
692+  /* NameVariableMagic */
693+  .chroma .vm {
694+  }
695+  /* Literal */
696+  .chroma .l {
697+  }
698+  /* LiteralDate */
699+  .chroma .ld {
700+  }
701+  /* LiteralString */
702+  .chroma .s {
703+    color: #f1fa8c;
704+  }
705+  /* LiteralStringAffix */
706+  .chroma .sa {
707+    color: #f1fa8c;
708+  }
709+  /* LiteralStringBacktick */
710+  .chroma .sb {
711+    color: #f1fa8c;
712+  }
713+  /* LiteralStringChar */
714+  .chroma .sc {
715+    color: #f1fa8c;
716+  }
717+  /* LiteralStringDelimiter */
718+  .chroma .dl {
719+    color: #f1fa8c;
720+  }
721+  /* LiteralStringDoc */
722+  .chroma .sd {
723+    color: #f1fa8c;
724+  }
725+  /* LiteralStringDouble */
726+  .chroma .s2 {
727+    color: #f1fa8c;
728+  }
729+  /* LiteralStringEscape */
730+  .chroma .se {
731+    color: #f1fa8c;
732+  }
733+  /* LiteralStringHeredoc */
734+  .chroma .sh {
735+    color: #f1fa8c;
736+  }
737+  /* LiteralStringInterpol */
738+  .chroma .si {
739+    color: #f1fa8c;
740+  }
741+  /* LiteralStringOther */
742+  .chroma .sx {
743+    color: #f1fa8c;
744+  }
745+  /* LiteralStringRegex */
746+  .chroma .sr {
747+    color: #f1fa8c;
748+  }
749+  /* LiteralStringSingle */
750+  .chroma .s1 {
751+    color: #f1fa8c;
752+  }
753+  /* LiteralStringSymbol */
754+  .chroma .ss {
755+    color: #f1fa8c;
756+  }
757+  /* LiteralNumber */
758+  .chroma .m {
759+    color: #bd93f9;
760+  }
761+  /* LiteralNumberBin */
762+  .chroma .mb {
763+    color: #bd93f9;
764+  }
765+  /* LiteralNumberFloat */
766+  .chroma .mf {
767+    color: #bd93f9;
768+  }
769+  /* LiteralNumberHex */
770+  .chroma .mh {
771+    color: #bd93f9;
772+  }
773+  /* LiteralNumberInteger */
774+  .chroma .mi {
775+    color: #bd93f9;
776+  }
777+  /* LiteralNumberIntegerLong */
778+  .chroma .il {
779+    color: #bd93f9;
780+  }
781+  /* LiteralNumberOct */
782+  .chroma .mo {
783+    color: #bd93f9;
784+  }
785+  /* Operator */
786+  .chroma .o {
787+    color: #ff79c6;
788+  }
789+  /* OperatorWord */
790+  .chroma .ow {
791+    color: #ff79c6;
792+  }
793+  /* Punctuation */
794+  .chroma .p {
795+  }
796+  /* Comment */
797+  .chroma .c {
798+    color: #6272a4;
799+  }
800+  /* CommentHashbang */
801+  .chroma .ch {
802+    color: #6272a4;
803+  }
804+  /* CommentMultiline */
805+  .chroma .cm {
806+    color: #6272a4;
807+  }
808+  /* CommentSingle */
809+  .chroma .c1 {
810+    color: #6272a4;
811+  }
812+  /* CommentSpecial */
813+  .chroma .cs {
814+    color: #6272a4;
815+  }
816+  /* CommentPreproc */
817+  .chroma .cp {
818+    color: #ff79c6;
819+  }
820+  /* CommentPreprocFile */
821+  .chroma .cpf {
822+    color: #ff79c6;
823+  }
824+  /* Generic */
825+  .chroma .g {
826+  }
827+  /* GenericDeleted */
828+  .chroma .gd {
829+    color: #ff5555;
830+  }
831+  /* GenericEmph */
832+  .chroma .ge {
833+    text-decoration: underline;
834+  }
835+  /* GenericError */
836+  .chroma .gr {
837+  }
838+  /* GenericHeading */
839+  .chroma .gh {
840+    font-weight: bold;
841+  }
842+  /* GenericInserted */
843+  .chroma .gi {
844+    color: #50fa7b;
845+    font-weight: bold;
846+  }
847+  /* GenericOutput */
848+  .chroma .go {
849+    color: #44475a;
850+  }
851+  /* GenericPrompt */
852+  .chroma .gp {
853+  }
854+  /* GenericStrong */
855+  .chroma .gs {
856+  }
857+  /* GenericSubheading */
858+  .chroma .gu {
859+    font-weight: bold;
860+  }
861+  /* GenericTraceback */
862+  .chroma .gt {
863+  }
864+  /* GenericUnderline */
865+  .chroma .gl {
866+    text-decoration: underline;
867+  }
868+  /* TextWhitespace */
869+  .chroma .w {
870+  }
871 }
M prose/api.go
+1, -0
1@@ -713,6 +713,7 @@ func serveFile(file string, contentType string) http.HandlerFunc {
2 func createStaticRoutes() []shared.Route {
3 	return []shared.Route{
4 		shared.NewRoute("GET", "/main.css", serveFile("main.css", "text/css")),
5+		shared.NewRoute("GET", "/prose.css", serveFile("prose.css", "text/css")),
6 		shared.NewRoute("GET", "/syntax.css", serveFile("syntax.css", "text/css")),
7 		shared.NewRoute("GET", "/card.png", serveFile("card.png", "image/png")),
8 		shared.NewRoute("GET", "/favicon-16x16.png", serveFile("favicon-16x16.png", "image/png")),
M prose/html/base.layout.tmpl
+1, -0
1@@ -11,6 +11,7 @@
2         <meta name="keywords" content="blog, blogging, write, writing" />
3 
4         <link rel="stylesheet" href="/main.css" />
5+        <link rel="stylesheet" href="/prose.css" />
6 
7         {{template "meta" .}}
8     </head>
M prose/public/main.css
+41, -60
  1@@ -1,13 +1,19 @@
  2-*, ::before, ::after {
  3+*,
  4+::before,
  5+::after {
  6   box-sizing: border-box;
  7 }
  8 
  9 ::-moz-focus-inner {
 10-	border-style: none;
 11-	padding: 0;
 12+  border-style: none;
 13+  padding: 0;
 14+}
 15+:-moz-focusring {
 16+  outline: 1px dotted ButtonText;
 17+}
 18+:-moz-ui-invalid {
 19+  box-shadow: none;
 20 }
 21-:-moz-focusring { outline: 1px dotted ButtonText; }
 22-:-moz-ui-invalid { box-shadow: none; }
 23 
 24 @media (prefers-color-scheme: light) {
 25   :root {
 26@@ -47,12 +53,12 @@ html {
 27   background-color: var(--bg-color);
 28   color: var(--text-color);
 29   line-height: 1.5;
 30-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
 31-    "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
 32-    "Segoe UI Emoji", "Segoe UI Symbol";
 33-	-webkit-text-size-adjust: 100%;
 34-	-moz-tab-size: 4;
 35-	tab-size: 4;
 36+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 37+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
 38+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 39+  -webkit-text-size-adjust: 100%;
 40+  -moz-tab-size: 4;
 41+  tab-size: 4;
 42   font-size: 17px;
 43 }
 44 
 45@@ -66,16 +72,23 @@ img {
 46   height: auto;
 47 }
 48 
 49-b, strong {
 50+b,
 51+strong {
 52   font-weight: bold;
 53 }
 54 
 55-code, kbd, samp, pre {
 56-	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
 57-	font-size: 0.8rem;
 58+code,
 59+kbd,
 60+samp,
 61+pre {
 62+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
 63+    monospace;
 64+  font-size: 0.8rem;
 65 }
 66 
 67-code, kbd, samp {
 68+code,
 69+kbd,
 70+samp {
 71   background-color: var(--code);
 72   border: 1px solid var(--code-border);
 73 }
 74@@ -88,7 +101,7 @@ pre > code {
 75 
 76 code {
 77   border-radius: 0.3rem;
 78-  padding: .15rem .2rem .05rem;
 79+  padding: 0.15rem 0.2rem 0.05rem;
 80 }
 81 
 82 pre {
 83@@ -107,10 +120,12 @@ summary {
 84   display: list-item;
 85 }
 86 
 87-h1, h2, h3 {
 88+h1,
 89+h2,
 90+h3 {
 91   margin: 0;
 92-  padding: 1rem 0 0 0;
 93-	border: 0;
 94+  padding: 0.6rem 0 0 0;
 95+  border: 0;
 96   font-style: normal;
 97   font-weight: inherit;
 98   font-size: inherit;
 99@@ -131,7 +146,8 @@ a {
100   color: var(--link-color);
101 }
102 
103-a:hover, a:visited:hover {
104+a:hover,
105+a:visited:hover {
106   color: var(--hover);
107 }
108 
109@@ -149,7 +165,7 @@ a.link-grey:visited {
110 }
111 
112 section {
113-  margin-bottom: 2rem;
114+  margin-bottom: 1.4rem;
115 }
116 
117 section:last-child {
118@@ -179,17 +195,8 @@ blockquote > p {
119   margin: 0;
120 }
121 
122-table {
123-  display: block;
124-  max-width: fit-content;
125-  margin: 0 auto;
126-  overflow-x: auto;
127-  white-space: nowrap;
128-  border-spacing: 10px;
129-  border-collapse: separate;
130-}
131-
132-ul, ol {
133+ul,
134+ol {
135   padding: 0 0 0 2rem;
136   list-style-position: outside;
137 }
138@@ -220,33 +227,7 @@ dd {
139 }
140 
141 dd:not(:last-child) {
142-  margin-bottom: .5rem;
143-}
144-
145-.md h1 {
146-  font-size: 1.85rem;
147-  line-height: 1.15;
148-  font-weight: bold;
149-  padding: 1rem 0 0 0;
150-}
151-
152-.md h2 {
153-  font-size: 1.45rem;
154-  line-height: 1.15;
155-  font-weight: bold;
156-  padding: 1rem 0 0 0;
157-}
158-
159-.md h3 {
160-  font-size: 1.25rem;
161-  font-weight: bold;
162-  padding: 1rem 0 0 0;
163-}
164-
165-.md h4 {
166-  font-size: 1rem;
167-  font-weight: bold;
168-  padding: 1rem 0 0 0;
169+  margin-bottom: 0.5rem;
170 }
171 
172 .post-date {
A prose/public/prose.css
+35, -0
 1@@ -0,0 +1,35 @@
 2+table {
 3+  display: block;
 4+  max-width: fit-content;
 5+  margin: 0 auto;
 6+  overflow-x: auto;
 7+  white-space: nowrap;
 8+  border-spacing: 10px;
 9+  border-collapse: separate;
10+}
11+
12+.md h1 {
13+  font-size: 1.85rem;
14+  line-height: 1.15;
15+  font-weight: bold;
16+  padding: 0.6rem 0 0 0;
17+}
18+
19+.md h2 {
20+  font-size: 1.45rem;
21+  line-height: 1.15;
22+  font-weight: bold;
23+  padding: 0.6rem 0 0 0;
24+}
25+
26+.md h3 {
27+  font-size: 1.25rem;
28+  font-weight: bold;
29+  padding: 0.6rem 0 0 0;
30+}
31+
32+.md h4 {
33+  font-size: 1rem;
34+  font-weight: bold;
35+  padding: 0.6rem 0 0 0;
36+}
M prose/public/syntax.css
+695, -170
  1@@ -1,175 +1,700 @@
  2 @media (prefers-color-scheme: light) {
  3-  /* Background */ .bg { background-color: #ffffff; }
  4-  /* PreWrapper */ .chroma { background-color: #ffffff; }
  5-  /* Other */ .chroma .x {  }
  6-  /* Error */ .chroma .err { background-color: #a848a8 }
  7-  /* CodeLine */ .chroma .cl {  }
  8-  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
  9-  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
 10-  /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
 11-  /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 12-  /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 13-  /* Line */ .chroma .line { display: flex; }
 14-  /* Keyword */ .chroma .k { color: #2838b0 }
 15-  /* KeywordConstant */ .chroma .kc { color: #444444; font-style: italic }
 16-  /* KeywordDeclaration */ .chroma .kd { color: #2838b0; font-style: italic }
 17-  /* KeywordNamespace */ .chroma .kn { color: #2838b0 }
 18-  /* KeywordPseudo */ .chroma .kp { color: #2838b0 }
 19-  /* KeywordReserved */ .chroma .kr { color: #2838b0 }
 20-  /* KeywordType */ .chroma .kt { color: #2838b0; font-style: italic }
 21-  /* Name */ .chroma .n {  }
 22-  /* NameAttribute */ .chroma .na { color: #388038 }
 23-  /* NameBuiltin */ .chroma .nb { color: #388038 }
 24-  /* NameBuiltinPseudo */ .chroma .bp { font-style: italic }
 25-  /* NameClass */ .chroma .nc { color: #287088 }
 26-  /* NameConstant */ .chroma .no { color: #b85820 }
 27-  /* NameDecorator */ .chroma .nd { color: #287088 }
 28-  /* NameEntity */ .chroma .ni { color: #709030 }
 29-  /* NameException */ .chroma .ne { color: #908828 }
 30-  /* NameFunction */ .chroma .nf { color: #785840 }
 31-  /* NameFunctionMagic */ .chroma .fm { color: #b85820 }
 32-  /* NameLabel */ .chroma .nl { color: #289870 }
 33-  /* NameNamespace */ .chroma .nn { color: #289870 }
 34-  /* NameOther */ .chroma .nx {  }
 35-  /* NameProperty */ .chroma .py {  }
 36-  /* NameTag */ .chroma .nt { color: #2838b0 }
 37-  /* NameVariable */ .chroma .nv { color: #b04040 }
 38-  /* NameVariableClass */ .chroma .vc {  }
 39-  /* NameVariableGlobal */ .chroma .vg { color: #908828 }
 40-  /* NameVariableInstance */ .chroma .vi {  }
 41-  /* NameVariableMagic */ .chroma .vm { color: #b85820 }
 42-  /* Literal */ .chroma .l {  }
 43-  /* LiteralDate */ .chroma .ld {  }
 44-  /* LiteralString */ .chroma .s { color: #b83838 }
 45-  /* LiteralStringAffix */ .chroma .sa { color: #444444 }
 46-  /* LiteralStringBacktick */ .chroma .sb { color: #b83838 }
 47-  /* LiteralStringChar */ .chroma .sc { color: #a848a8 }
 48-  /* LiteralStringDelimiter */ .chroma .dl { color: #b85820 }
 49-  /* LiteralStringDoc */ .chroma .sd { color: #b85820; font-style: italic }
 50-  /* LiteralStringDouble */ .chroma .s2 { color: #b83838 }
 51-  /* LiteralStringEscape */ .chroma .se { color: #709030 }
 52-  /* LiteralStringHeredoc */ .chroma .sh { color: #b83838 }
 53-  /* LiteralStringInterpol */ .chroma .si { color: #b83838; text-decoration: underline }
 54-  /* LiteralStringOther */ .chroma .sx { color: #a848a8 }
 55-  /* LiteralStringRegex */ .chroma .sr { color: #a848a8 }
 56-  /* LiteralStringSingle */ .chroma .s1 { color: #b83838 }
 57-  /* LiteralStringSymbol */ .chroma .ss { color: #b83838 }
 58-  /* LiteralNumber */ .chroma .m { color: #444444 }
 59-  /* LiteralNumberBin */ .chroma .mb { color: #444444 }
 60-  /* LiteralNumberFloat */ .chroma .mf { color: #444444 }
 61-  /* LiteralNumberHex */ .chroma .mh { color: #444444 }
 62-  /* LiteralNumberInteger */ .chroma .mi { color: #444444 }
 63-  /* LiteralNumberIntegerLong */ .chroma .il { color: #444444 }
 64-  /* LiteralNumberOct */ .chroma .mo { color: #444444 }
 65-  /* Operator */ .chroma .o { color: #666666 }
 66-  /* OperatorWord */ .chroma .ow { color: #a848a8 }
 67-  /* Punctuation */ .chroma .p { color: #888888 }
 68-  /* Comment */ .chroma .c { color: #888888; font-style: italic }
 69-  /* CommentHashbang */ .chroma .ch { color: #287088; font-style: italic }
 70-  /* CommentMultiline */ .chroma .cm { color: #888888; font-style: italic }
 71-  /* CommentSingle */ .chroma .c1 { color: #888888; font-style: italic }
 72-  /* CommentSpecial */ .chroma .cs { color: #888888; font-style: italic }
 73-  /* CommentPreproc */ .chroma .cp { color: #289870 }
 74-  /* CommentPreprocFile */ .chroma .cpf { color: #289870 }
 75-  /* Generic */ .chroma .g {  }
 76-  /* GenericDeleted */ .chroma .gd { color: #c02828 }
 77-  /* GenericEmph */ .chroma .ge { font-style: italic }
 78-  /* GenericError */ .chroma .gr { color: #c02828 }
 79-  /* GenericHeading */ .chroma .gh { color: #666666 }
 80-  /* GenericInserted */ .chroma .gi { color: #388038 }
 81-  /* GenericOutput */ .chroma .go { color: #666666 }
 82-  /* GenericPrompt */ .chroma .gp { color: #444444 }
 83-  /* GenericStrong */ .chroma .gs { font-weight: bold }
 84-  /* GenericSubheading */ .chroma .gu { color: #444444 }
 85-  /* GenericTraceback */ .chroma .gt { color: #2838b0 }
 86-  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
 87-  /* TextWhitespace */ .chroma .w { color: #a89028 }
 88+  /* Background */
 89+  .bg {
 90+    background-color: #ffffff;
 91+  }
 92+  /* PreWrapper */
 93+  .chroma {
 94+    background-color: #ffffff;
 95+  }
 96+  /* Other */
 97+  .chroma .x {
 98+  }
 99+  /* Error */
100+  .chroma .err {
101+    background-color: #a848a8;
102+  }
103+  /* CodeLine */
104+  .chroma .cl {
105+  }
106+  /* LineTableTD */
107+  .chroma .lntd {
108+    vertical-align: top;
109+    padding: 0;
110+    margin: 0;
111+    border: 0;
112+  }
113+  /* LineTable */
114+  .chroma .lntable {
115+    border-spacing: 0;
116+    padding: 0;
117+    margin: 0;
118+    border: 0;
119+  }
120+  /* LineHighlight */
121+  .chroma .hl {
122+    background-color: #ffffcc;
123+  }
124+  /* LineNumbersTable */
125+  .chroma .lnt {
126+    white-space: pre;
127+    user-select: none;
128+    margin-right: 0.4em;
129+    padding: 0 0.4em 0 0.4em;
130+    color: #7f7f7f;
131+  }
132+  /* LineNumbers */
133+  .chroma .ln {
134+    white-space: pre;
135+    user-select: none;
136+    margin-right: 0.4em;
137+    padding: 0 0.4em 0 0.4em;
138+    color: #7f7f7f;
139+  }
140+  /* Line */
141+  .chroma .line {
142+    display: flex;
143+  }
144+  /* Keyword */
145+  .chroma .k {
146+    color: #2838b0;
147+  }
148+  /* KeywordConstant */
149+  .chroma .kc {
150+    color: #444444;
151+    font-style: italic;
152+  }
153+  /* KeywordDeclaration */
154+  .chroma .kd {
155+    color: #2838b0;
156+    font-style: italic;
157+  }
158+  /* KeywordNamespace */
159+  .chroma .kn {
160+    color: #2838b0;
161+  }
162+  /* KeywordPseudo */
163+  .chroma .kp {
164+    color: #2838b0;
165+  }
166+  /* KeywordReserved */
167+  .chroma .kr {
168+    color: #2838b0;
169+  }
170+  /* KeywordType */
171+  .chroma .kt {
172+    color: #2838b0;
173+    font-style: italic;
174+  }
175+  /* Name */
176+  .chroma .n {
177+  }
178+  /* NameAttribute */
179+  .chroma .na {
180+    color: #388038;
181+  }
182+  /* NameBuiltin */
183+  .chroma .nb {
184+    color: #388038;
185+  }
186+  /* NameBuiltinPseudo */
187+  .chroma .bp {
188+    font-style: italic;
189+  }
190+  /* NameClass */
191+  .chroma .nc {
192+    color: #287088;
193+  }
194+  /* NameConstant */
195+  .chroma .no {
196+    color: #b85820;
197+  }
198+  /* NameDecorator */
199+  .chroma .nd {
200+    color: #287088;
201+  }
202+  /* NameEntity */
203+  .chroma .ni {
204+    color: #709030;
205+  }
206+  /* NameException */
207+  .chroma .ne {
208+    color: #908828;
209+  }
210+  /* NameFunction */
211+  .chroma .nf {
212+    color: #785840;
213+  }
214+  /* NameFunctionMagic */
215+  .chroma .fm {
216+    color: #b85820;
217+  }
218+  /* NameLabel */
219+  .chroma .nl {
220+    color: #289870;
221+  }
222+  /* NameNamespace */
223+  .chroma .nn {
224+    color: #289870;
225+  }
226+  /* NameOther */
227+  .chroma .nx {
228+  }
229+  /* NameProperty */
230+  .chroma .py {
231+  }
232+  /* NameTag */
233+  .chroma .nt {
234+    color: #2838b0;
235+  }
236+  /* NameVariable */
237+  .chroma .nv {
238+    color: #b04040;
239+  }
240+  /* NameVariableClass */
241+  .chroma .vc {
242+  }
243+  /* NameVariableGlobal */
244+  .chroma .vg {
245+    color: #908828;
246+  }
247+  /* NameVariableInstance */
248+  .chroma .vi {
249+  }
250+  /* NameVariableMagic */
251+  .chroma .vm {
252+    color: #b85820;
253+  }
254+  /* Literal */
255+  .chroma .l {
256+  }
257+  /* LiteralDate */
258+  .chroma .ld {
259+  }
260+  /* LiteralString */
261+  .chroma .s {
262+    color: #b83838;
263+  }
264+  /* LiteralStringAffix */
265+  .chroma .sa {
266+    color: #444444;
267+  }
268+  /* LiteralStringBacktick */
269+  .chroma .sb {
270+    color: #b83838;
271+  }
272+  /* LiteralStringChar */
273+  .chroma .sc {
274+    color: #a848a8;
275+  }
276+  /* LiteralStringDelimiter */
277+  .chroma .dl {
278+    color: #b85820;
279+  }
280+  /* LiteralStringDoc */
281+  .chroma .sd {
282+    color: #b85820;
283+    font-style: italic;
284+  }
285+  /* LiteralStringDouble */
286+  .chroma .s2 {
287+    color: #b83838;
288+  }
289+  /* LiteralStringEscape */
290+  .chroma .se {
291+    color: #709030;
292+  }
293+  /* LiteralStringHeredoc */
294+  .chroma .sh {
295+    color: #b83838;
296+  }
297+  /* LiteralStringInterpol */
298+  .chroma .si {
299+    color: #b83838;
300+    text-decoration: underline;
301+  }
302+  /* LiteralStringOther */
303+  .chroma .sx {
304+    color: #a848a8;
305+  }
306+  /* LiteralStringRegex */
307+  .chroma .sr {
308+    color: #a848a8;
309+  }
310+  /* LiteralStringSingle */
311+  .chroma .s1 {
312+    color: #b83838;
313+  }
314+  /* LiteralStringSymbol */
315+  .chroma .ss {
316+    color: #b83838;
317+  }
318+  /* LiteralNumber */
319+  .chroma .m {
320+    color: #444444;
321+  }
322+  /* LiteralNumberBin */
323+  .chroma .mb {
324+    color: #444444;
325+  }
326+  /* LiteralNumberFloat */
327+  .chroma .mf {
328+    color: #444444;
329+  }
330+  /* LiteralNumberHex */
331+  .chroma .mh {
332+    color: #444444;
333+  }
334+  /* LiteralNumberInteger */
335+  .chroma .mi {
336+    color: #444444;
337+  }
338+  /* LiteralNumberIntegerLong */
339+  .chroma .il {
340+    color: #444444;
341+  }
342+  /* LiteralNumberOct */
343+  .chroma .mo {
344+    color: #444444;
345+  }
346+  /* Operator */
347+  .chroma .o {
348+    color: #666666;
349+  }
350+  /* OperatorWord */
351+  .chroma .ow {
352+    color: #a848a8;
353+  }
354+  /* Punctuation */
355+  .chroma .p {
356+    color: #888888;
357+  }
358+  /* Comment */
359+  .chroma .c {
360+    color: #888888;
361+    font-style: italic;
362+  }
363+  /* CommentHashbang */
364+  .chroma .ch {
365+    color: #287088;
366+    font-style: italic;
367+  }
368+  /* CommentMultiline */
369+  .chroma .cm {
370+    color: #888888;
371+    font-style: italic;
372+  }
373+  /* CommentSingle */
374+  .chroma .c1 {
375+    color: #888888;
376+    font-style: italic;
377+  }
378+  /* CommentSpecial */
379+  .chroma .cs {
380+    color: #888888;
381+    font-style: italic;
382+  }
383+  /* CommentPreproc */
384+  .chroma .cp {
385+    color: #289870;
386+  }
387+  /* CommentPreprocFile */
388+  .chroma .cpf {
389+    color: #289870;
390+  }
391+  /* Generic */
392+  .chroma .g {
393+  }
394+  /* GenericDeleted */
395+  .chroma .gd {
396+    color: #c02828;
397+  }
398+  /* GenericEmph */
399+  .chroma .ge {
400+    font-style: italic;
401+  }
402+  /* GenericError */
403+  .chroma .gr {
404+    color: #c02828;
405+  }
406+  /* GenericHeading */
407+  .chroma .gh {
408+    color: #666666;
409+  }
410+  /* GenericInserted */
411+  .chroma .gi {
412+    color: #388038;
413+  }
414+  /* GenericOutput */
415+  .chroma .go {
416+    color: #666666;
417+  }
418+  /* GenericPrompt */
419+  .chroma .gp {
420+    color: #444444;
421+  }
422+  /* GenericStrong */
423+  .chroma .gs {
424+    font-weight: bold;
425+  }
426+  /* GenericSubheading */
427+  .chroma .gu {
428+    color: #444444;
429+  }
430+  /* GenericTraceback */
431+  .chroma .gt {
432+    color: #2838b0;
433+  }
434+  /* GenericUnderline */
435+  .chroma .gl {
436+    text-decoration: underline;
437+  }
438+  /* TextWhitespace */
439+  .chroma .w {
440+    color: #a89028;
441+  }
442 }
443 
444 @media (prefers-color-scheme: dark) {
445-  /* Background */ .bg { color: #f8f8f2; background-color: #282a36; }
446-  /* PreWrapper */ .chroma { color: #f8f8f2; background-color: #282a36; }
447-  /* Other */ .chroma .x {  }
448-  /* Error */ .chroma .err {  }
449-  /* CodeLine */ .chroma .cl {  }
450-  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
451-  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
452-  /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
453-  /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
454-  /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
455-  /* Line */ .chroma .line { display: flex; }
456-  /* Keyword */ .chroma .k { color: #ff79c6 }
457-  /* KeywordConstant */ .chroma .kc { color: #ff79c6 }
458-  /* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
459-  /* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
460-  /* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
461-  /* KeywordReserved */ .chroma .kr { color: #ff79c6 }
462-  /* KeywordType */ .chroma .kt { color: #8be9fd }
463-  /* Name */ .chroma .n {  }
464-  /* NameAttribute */ .chroma .na { color: #50fa7b }
465-  /* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
466-  /* NameBuiltinPseudo */ .chroma .bp {  }
467-  /* NameClass */ .chroma .nc { color: #50fa7b }
468-  /* NameConstant */ .chroma .no {  }
469-  /* NameDecorator */ .chroma .nd {  }
470-  /* NameEntity */ .chroma .ni {  }
471-  /* NameException */ .chroma .ne {  }
472-  /* NameFunction */ .chroma .nf { color: #50fa7b }
473-  /* NameFunctionMagic */ .chroma .fm {  }
474-  /* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
475-  /* NameNamespace */ .chroma .nn {  }
476-  /* NameOther */ .chroma .nx {  }
477-  /* NameProperty */ .chroma .py {  }
478-  /* NameTag */ .chroma .nt { color: #ff79c6 }
479-  /* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
480-  /* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
481-  /* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
482-  /* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
483-  /* NameVariableMagic */ .chroma .vm {  }
484-  /* Literal */ .chroma .l {  }
485-  /* LiteralDate */ .chroma .ld {  }
486-  /* LiteralString */ .chroma .s { color: #f1fa8c }
487-  /* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
488-  /* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
489-  /* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
490-  /* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
491-  /* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
492-  /* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
493-  /* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
494-  /* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
495-  /* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
496-  /* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
497-  /* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
498-  /* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
499-  /* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
500-  /* LiteralNumber */ .chroma .m { color: #bd93f9 }
501-  /* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
502-  /* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
503-  /* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
504-  /* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
505-  /* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
506-  /* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
507-  /* Operator */ .chroma .o { color: #ff79c6 }
508-  /* OperatorWord */ .chroma .ow { color: #ff79c6 }
509-  /* Punctuation */ .chroma .p {  }
510-  /* Comment */ .chroma .c { color: #6272a4 }
511-  /* CommentHashbang */ .chroma .ch { color: #6272a4 }
512-  /* CommentMultiline */ .chroma .cm { color: #6272a4 }
513-  /* CommentSingle */ .chroma .c1 { color: #6272a4 }
514-  /* CommentSpecial */ .chroma .cs { color: #6272a4 }
515-  /* CommentPreproc */ .chroma .cp { color: #ff79c6 }
516-  /* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
517-  /* Generic */ .chroma .g {  }
518-  /* GenericDeleted */ .chroma .gd { color: #ff5555 }
519-  /* GenericEmph */ .chroma .ge { text-decoration: underline }
520-  /* GenericError */ .chroma .gr {  }
521-  /* GenericHeading */ .chroma .gh { font-weight: bold }
522-  /* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold }
523-  /* GenericOutput */ .chroma .go { color: #44475a }
524-  /* GenericPrompt */ .chroma .gp {  }
525-  /* GenericStrong */ .chroma .gs {  }
526-  /* GenericSubheading */ .chroma .gu { font-weight: bold }
527-  /* GenericTraceback */ .chroma .gt {  }
528-  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
529-  /* TextWhitespace */ .chroma .w {  }
530+  /* Background */
531+  .bg {
532+    color: #f8f8f2;
533+    background-color: #282a36;
534+  }
535+  /* PreWrapper */
536+  .chroma {
537+    color: #f8f8f2;
538+    background-color: #282a36;
539+  }
540+  /* Other */
541+  .chroma .x {
542+  }
543+  /* Error */
544+  .chroma .err {
545+  }
546+  /* CodeLine */
547+  .chroma .cl {
548+  }
549+  /* LineTableTD */
550+  .chroma .lntd {
551+    vertical-align: top;
552+    padding: 0;
553+    margin: 0;
554+    border: 0;
555+  }
556+  /* LineTable */
557+  .chroma .lntable {
558+    border-spacing: 0;
559+    padding: 0;
560+    margin: 0;
561+    border: 0;
562+  }
563+  /* LineHighlight */
564+  .chroma .hl {
565+    background-color: #ffffcc;
566+  }
567+  /* LineNumbersTable */
568+  .chroma .lnt {
569+    white-space: pre;
570+    user-select: none;
571+    margin-right: 0.4em;
572+    padding: 0 0.4em 0 0.4em;
573+    color: #7f7f7f;
574+  }
575+  /* LineNumbers */
576+  .chroma .ln {
577+    white-space: pre;
578+    user-select: none;
579+    margin-right: 0.4em;
580+    padding: 0 0.4em 0 0.4em;
581+    color: #7f7f7f;
582+  }
583+  /* Line */
584+  .chroma .line {
585+    display: flex;
586+  }
587+  /* Keyword */
588+  .chroma .k {
589+    color: #ff79c6;
590+  }
591+  /* KeywordConstant */
592+  .chroma .kc {
593+    color: #ff79c6;
594+  }
595+  /* KeywordDeclaration */
596+  .chroma .kd {
597+    color: #8be9fd;
598+    font-style: italic;
599+  }
600+  /* KeywordNamespace */
601+  .chroma .kn {
602+    color: #ff79c6;
603+  }
604+  /* KeywordPseudo */
605+  .chroma .kp {
606+    color: #ff79c6;
607+  }
608+  /* KeywordReserved */
609+  .chroma .kr {
610+    color: #ff79c6;
611+  }
612+  /* KeywordType */
613+  .chroma .kt {
614+    color: #8be9fd;
615+  }
616+  /* Name */
617+  .chroma .n {
618+  }
619+  /* NameAttribute */
620+  .chroma .na {
621+    color: #50fa7b;
622+  }
623+  /* NameBuiltin */
624+  .chroma .nb {
625+    color: #8be9fd;
626+    font-style: italic;
627+  }
628+  /* NameBuiltinPseudo */
629+  .chroma .bp {
630+  }
631+  /* NameClass */
632+  .chroma .nc {
633+    color: #50fa7b;
634+  }
635+  /* NameConstant */
636+  .chroma .no {
637+  }
638+  /* NameDecorator */
639+  .chroma .nd {
640+  }
641+  /* NameEntity */
642+  .chroma .ni {
643+  }
644+  /* NameException */
645+  .chroma .ne {
646+  }
647+  /* NameFunction */
648+  .chroma .nf {
649+    color: #50fa7b;
650+  }
651+  /* NameFunctionMagic */
652+  .chroma .fm {
653+  }
654+  /* NameLabel */
655+  .chroma .nl {
656+    color: #8be9fd;
657+    font-style: italic;
658+  }
659+  /* NameNamespace */
660+  .chroma .nn {
661+  }
662+  /* NameOther */
663+  .chroma .nx {
664+  }
665+  /* NameProperty */
666+  .chroma .py {
667+  }
668+  /* NameTag */
669+  .chroma .nt {
670+    color: #ff79c6;
671+  }
672+  /* NameVariable */
673+  .chroma .nv {
674+    color: #8be9fd;
675+    font-style: italic;
676+  }
677+  /* NameVariableClass */
678+  .chroma .vc {
679+    color: #8be9fd;
680+    font-style: italic;
681+  }
682+  /* NameVariableGlobal */
683+  .chroma .vg {
684+    color: #8be9fd;
685+    font-style: italic;
686+  }
687+  /* NameVariableInstance */
688+  .chroma .vi {
689+    color: #8be9fd;
690+    font-style: italic;
691+  }
692+  /* NameVariableMagic */
693+  .chroma .vm {
694+  }
695+  /* Literal */
696+  .chroma .l {
697+  }
698+  /* LiteralDate */
699+  .chroma .ld {
700+  }
701+  /* LiteralString */
702+  .chroma .s {
703+    color: #f1fa8c;
704+  }
705+  /* LiteralStringAffix */
706+  .chroma .sa {
707+    color: #f1fa8c;
708+  }
709+  /* LiteralStringBacktick */
710+  .chroma .sb {
711+    color: #f1fa8c;
712+  }
713+  /* LiteralStringChar */
714+  .chroma .sc {
715+    color: #f1fa8c;
716+  }
717+  /* LiteralStringDelimiter */
718+  .chroma .dl {
719+    color: #f1fa8c;
720+  }
721+  /* LiteralStringDoc */
722+  .chroma .sd {
723+    color: #f1fa8c;
724+  }
725+  /* LiteralStringDouble */
726+  .chroma .s2 {
727+    color: #f1fa8c;
728+  }
729+  /* LiteralStringEscape */
730+  .chroma .se {
731+    color: #f1fa8c;
732+  }
733+  /* LiteralStringHeredoc */
734+  .chroma .sh {
735+    color: #f1fa8c;
736+  }
737+  /* LiteralStringInterpol */
738+  .chroma .si {
739+    color: #f1fa8c;
740+  }
741+  /* LiteralStringOther */
742+  .chroma .sx {
743+    color: #f1fa8c;
744+  }
745+  /* LiteralStringRegex */
746+  .chroma .sr {
747+    color: #f1fa8c;
748+  }
749+  /* LiteralStringSingle */
750+  .chroma .s1 {
751+    color: #f1fa8c;
752+  }
753+  /* LiteralStringSymbol */
754+  .chroma .ss {
755+    color: #f1fa8c;
756+  }
757+  /* LiteralNumber */
758+  .chroma .m {
759+    color: #bd93f9;
760+  }
761+  /* LiteralNumberBin */
762+  .chroma .mb {
763+    color: #bd93f9;
764+  }
765+  /* LiteralNumberFloat */
766+  .chroma .mf {
767+    color: #bd93f9;
768+  }
769+  /* LiteralNumberHex */
770+  .chroma .mh {
771+    color: #bd93f9;
772+  }
773+  /* LiteralNumberInteger */
774+  .chroma .mi {
775+    color: #bd93f9;
776+  }
777+  /* LiteralNumberIntegerLong */
778+  .chroma .il {
779+    color: #bd93f9;
780+  }
781+  /* LiteralNumberOct */
782+  .chroma .mo {
783+    color: #bd93f9;
784+  }
785+  /* Operator */
786+  .chroma .o {
787+    color: #ff79c6;
788+  }
789+  /* OperatorWord */
790+  .chroma .ow {
791+    color: #ff79c6;
792+  }
793+  /* Punctuation */
794+  .chroma .p {
795+  }
796+  /* Comment */
797+  .chroma .c {
798+    color: #6272a4;
799+  }
800+  /* CommentHashbang */
801+  .chroma .ch {
802+    color: #6272a4;
803+  }
804+  /* CommentMultiline */
805+  .chroma .cm {
806+    color: #6272a4;
807+  }
808+  /* CommentSingle */
809+  .chroma .c1 {
810+    color: #6272a4;
811+  }
812+  /* CommentSpecial */
813+  .chroma .cs {
814+    color: #6272a4;
815+  }
816+  /* CommentPreproc */
817+  .chroma .cp {
818+    color: #ff79c6;
819+  }
820+  /* CommentPreprocFile */
821+  .chroma .cpf {
822+    color: #ff79c6;
823+  }
824+  /* Generic */
825+  .chroma .g {
826+  }
827+  /* GenericDeleted */
828+  .chroma .gd {
829+    color: #ff5555;
830+  }
831+  /* GenericEmph */
832+  .chroma .ge {
833+    text-decoration: underline;
834+  }
835+  /* GenericError */
836+  .chroma .gr {
837+  }
838+  /* GenericHeading */
839+  .chroma .gh {
840+    font-weight: bold;
841+  }
842+  /* GenericInserted */
843+  .chroma .gi {
844+    color: #50fa7b;
845+    font-weight: bold;
846+  }
847+  /* GenericOutput */
848+  .chroma .go {
849+    color: #44475a;
850+  }
851+  /* GenericPrompt */
852+  .chroma .gp {
853+  }
854+  /* GenericStrong */
855+  .chroma .gs {
856+  }
857+  /* GenericSubheading */
858+  .chroma .gu {
859+    font-weight: bold;
860+  }
861+  /* GenericTraceback */
862+  .chroma .gt {
863+  }
864+  /* GenericUnderline */
865+  .chroma .gl {
866+    text-decoration: underline;
867+  }
868+  /* TextWhitespace */
869+  .chroma .w {
870+  }
871 }
A smol.css
+319, -0
  1@@ -0,0 +1,319 @@
  2+*,
  3+::before,
  4+::after {
  5+  box-sizing: border-box;
  6+}
  7+
  8+::-moz-focus-inner {
  9+  border-style: none;
 10+  padding: 0;
 11+}
 12+:-moz-focusring {
 13+  outline: 1px dotted ButtonText;
 14+}
 15+:-moz-ui-invalid {
 16+  box-shadow: none;
 17+}
 18+
 19+@media (prefers-color-scheme: light) {
 20+  :root {
 21+    --white: #6a737d;
 22+    --code: #fff8d3;
 23+    --code-border: #f0d547;
 24+    --pre: #f6f8fa;
 25+    --bg-color: #fff;
 26+    --text-color: #24292f;
 27+    --link-color: #005cc5;
 28+    --visited: #6f42c1;
 29+    --blockquote: #005cc5;
 30+    --blockquote-bg: #fff;
 31+    --hover: #d73a49;
 32+    --grey: #ccc;
 33+  }
 34+}
 35+
 36+@media (prefers-color-scheme: dark) {
 37+  :root {
 38+    --white: #f2f2f2;
 39+    --code: #414558;
 40+    --code-border: #252525;
 41+    --pre: #252525;
 42+    --bg-color: #282a36;
 43+    --text-color: #f2f2f2;
 44+    --link-color: #8be9fd;
 45+    --visited: #bd93f9;
 46+    --blockquote: #bd93f9;
 47+    --blockquote-bg: #414558;
 48+    --hover: #ff80bf;
 49+    --grey: #414558;
 50+  }
 51+}
 52+
 53+html {
 54+  background-color: var(--bg-color);
 55+  color: var(--text-color);
 56+  line-height: 1.5;
 57+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 58+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
 59+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 60+  -webkit-text-size-adjust: 100%;
 61+  -moz-tab-size: 4;
 62+  tab-size: 4;
 63+  font-size: 17px;
 64+}
 65+
 66+body {
 67+  margin: 0 auto;
 68+  max-width: 42rem;
 69+}
 70+
 71+img {
 72+  max-width: 100%;
 73+  height: auto;
 74+}
 75+
 76+b,
 77+strong {
 78+  font-weight: bold;
 79+}
 80+
 81+code,
 82+kbd,
 83+samp,
 84+pre {
 85+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
 86+    monospace;
 87+  font-size: 0.8rem;
 88+}
 89+
 90+code,
 91+kbd,
 92+samp {
 93+  background-color: var(--code);
 94+  border: 1px solid var(--code-border);
 95+}
 96+
 97+pre > code {
 98+  background-color: inherit;
 99+  padding: 0;
100+  border: none;
101+}
102+
103+code {
104+  border-radius: 0.3rem;
105+  padding: 0.15rem 0.2rem 0.05rem;
106+}
107+
108+pre {
109+  border-radius: 5px;
110+  padding: 1rem;
111+  margin: 1rem 0;
112+  overflow-x: auto;
113+  background-color: var(--pre) !important;
114+}
115+
116+small {
117+  font-size: 0.8rem;
118+}
119+
120+summary {
121+  display: list-item;
122+}
123+
124+h1,
125+h2,
126+h3 {
127+  margin: 0;
128+  padding: 0.6rem 0 0 0;
129+  border: 0;
130+  font-style: normal;
131+  font-weight: inherit;
132+  font-size: inherit;
133+}
134+
135+hr {
136+  color: inherit;
137+  border: 0;
138+  margin: 0;
139+  height: 1px;
140+  background: var(--grey);
141+  margin: 2rem auto;
142+  text-align: center;
143+}
144+
145+a {
146+  text-decoration: underline;
147+  color: var(--link-color);
148+}
149+
150+a:hover,
151+a:visited:hover {
152+  color: var(--hover);
153+}
154+
155+a:visited {
156+  color: var(--visited);
157+}
158+
159+a.link-grey {
160+  text-decoration: underline;
161+  color: var(--white);
162+}
163+
164+a.link-grey:visited {
165+  color: var(--white);
166+}
167+
168+section {
169+  margin-bottom: 1.4rem;
170+}
171+
172+section:last-child {
173+  margin-bottom: 0;
174+}
175+
176+header {
177+  margin: 1rem auto;
178+}
179+
180+p {
181+  margin: 1rem 0;
182+}
183+
184+article {
185+  overflow-wrap: break-word;
186+}
187+
188+blockquote {
189+  border-left: 5px solid var(--blockquote);
190+  background-color: var(--blockquote-bg);
191+  padding: 0.8rem;
192+  margin: 1rem 0;
193+}
194+
195+blockquote > p {
196+  margin: 0;
197+}
198+
199+ul,
200+ol {
201+  padding: 0 0 0 2rem;
202+  list-style-position: outside;
203+}
204+
205+ul[style*="list-style-type: none;"] {
206+  padding: 0;
207+}
208+
209+li {
210+  margin: 0.5rem 0;
211+}
212+
213+li > pre {
214+  padding: 0;
215+}
216+
217+footer {
218+  text-align: center;
219+  margin-bottom: 4rem;
220+}
221+
222+dt {
223+  font-weight: bold;
224+}
225+
226+dd {
227+  margin-left: 0;
228+}
229+
230+dd:not(:last-child) {
231+  margin-bottom: 0.5rem;
232+}
233+
234+.post-date {
235+  width: 130px;
236+}
237+
238+.text-grey {
239+  color: var(--grey);
240+}
241+
242+.text-2xl {
243+  font-size: 1.85rem;
244+  line-height: 1.15;
245+}
246+
247+.text-xl {
248+  font-size: 1.45rem;
249+  line-height: 1.15;
250+}
251+
252+.text-lg {
253+  font-size: 1.25rem;
254+  line-height: 1.15;
255+}
256+
257+.text-sm {
258+  font-size: 0.875rem;
259+}
260+
261+.text-center {
262+  text-align: center;
263+}
264+
265+.font-bold {
266+  font-weight: bold;
267+}
268+
269+.font-italic {
270+  font-style: italic;
271+}
272+
273+.inline {
274+  display: inline;
275+}
276+
277+.flex {
278+  display: flex;
279+}
280+
281+.items-center {
282+  align-items: center;
283+}
284+
285+.m-0 {
286+  margin: 0;
287+}
288+
289+.my {
290+  margin-top: 0.5rem;
291+  margin-bottom: 0.5rem;
292+}
293+
294+.mx {
295+  margin-left: 0.5rem;
296+  margin-right: 0.5rem;
297+}
298+
299+.mx-2 {
300+  margin-left: 1rem;
301+  margin-right: 1rem;
302+}
303+
304+.justify-between {
305+  justify-content: space-between;
306+}
307+
308+.flex-1 {
309+  flex: 1;
310+}
311+
312+@media only screen and (max-width: 600px) {
313+  body {
314+    padding: 1rem;
315+  }
316+
317+  header {
318+    margin: 0;
319+  }
320+}
A syntax.css
+700, -0
  1@@ -0,0 +1,700 @@
  2+@media (prefers-color-scheme: light) {
  3+  /* Background */
  4+  .bg {
  5+    background-color: #ffffff;
  6+  }
  7+  /* PreWrapper */
  8+  .chroma {
  9+    background-color: #ffffff;
 10+  }
 11+  /* Other */
 12+  .chroma .x {
 13+  }
 14+  /* Error */
 15+  .chroma .err {
 16+    background-color: #a848a8;
 17+  }
 18+  /* CodeLine */
 19+  .chroma .cl {
 20+  }
 21+  /* LineTableTD */
 22+  .chroma .lntd {
 23+    vertical-align: top;
 24+    padding: 0;
 25+    margin: 0;
 26+    border: 0;
 27+  }
 28+  /* LineTable */
 29+  .chroma .lntable {
 30+    border-spacing: 0;
 31+    padding: 0;
 32+    margin: 0;
 33+    border: 0;
 34+  }
 35+  /* LineHighlight */
 36+  .chroma .hl {
 37+    background-color: #ffffcc;
 38+  }
 39+  /* LineNumbersTable */
 40+  .chroma .lnt {
 41+    white-space: pre;
 42+    user-select: none;
 43+    margin-right: 0.4em;
 44+    padding: 0 0.4em 0 0.4em;
 45+    color: #7f7f7f;
 46+  }
 47+  /* LineNumbers */
 48+  .chroma .ln {
 49+    white-space: pre;
 50+    user-select: none;
 51+    margin-right: 0.4em;
 52+    padding: 0 0.4em 0 0.4em;
 53+    color: #7f7f7f;
 54+  }
 55+  /* Line */
 56+  .chroma .line {
 57+    display: flex;
 58+  }
 59+  /* Keyword */
 60+  .chroma .k {
 61+    color: #2838b0;
 62+  }
 63+  /* KeywordConstant */
 64+  .chroma .kc {
 65+    color: #444444;
 66+    font-style: italic;
 67+  }
 68+  /* KeywordDeclaration */
 69+  .chroma .kd {
 70+    color: #2838b0;
 71+    font-style: italic;
 72+  }
 73+  /* KeywordNamespace */
 74+  .chroma .kn {
 75+    color: #2838b0;
 76+  }
 77+  /* KeywordPseudo */
 78+  .chroma .kp {
 79+    color: #2838b0;
 80+  }
 81+  /* KeywordReserved */
 82+  .chroma .kr {
 83+    color: #2838b0;
 84+  }
 85+  /* KeywordType */
 86+  .chroma .kt {
 87+    color: #2838b0;
 88+    font-style: italic;
 89+  }
 90+  /* Name */
 91+  .chroma .n {
 92+  }
 93+  /* NameAttribute */
 94+  .chroma .na {
 95+    color: #388038;
 96+  }
 97+  /* NameBuiltin */
 98+  .chroma .nb {
 99+    color: #388038;
100+  }
101+  /* NameBuiltinPseudo */
102+  .chroma .bp {
103+    font-style: italic;
104+  }
105+  /* NameClass */
106+  .chroma .nc {
107+    color: #287088;
108+  }
109+  /* NameConstant */
110+  .chroma .no {
111+    color: #b85820;
112+  }
113+  /* NameDecorator */
114+  .chroma .nd {
115+    color: #287088;
116+  }
117+  /* NameEntity */
118+  .chroma .ni {
119+    color: #709030;
120+  }
121+  /* NameException */
122+  .chroma .ne {
123+    color: #908828;
124+  }
125+  /* NameFunction */
126+  .chroma .nf {
127+    color: #785840;
128+  }
129+  /* NameFunctionMagic */
130+  .chroma .fm {
131+    color: #b85820;
132+  }
133+  /* NameLabel */
134+  .chroma .nl {
135+    color: #289870;
136+  }
137+  /* NameNamespace */
138+  .chroma .nn {
139+    color: #289870;
140+  }
141+  /* NameOther */
142+  .chroma .nx {
143+  }
144+  /* NameProperty */
145+  .chroma .py {
146+  }
147+  /* NameTag */
148+  .chroma .nt {
149+    color: #2838b0;
150+  }
151+  /* NameVariable */
152+  .chroma .nv {
153+    color: #b04040;
154+  }
155+  /* NameVariableClass */
156+  .chroma .vc {
157+  }
158+  /* NameVariableGlobal */
159+  .chroma .vg {
160+    color: #908828;
161+  }
162+  /* NameVariableInstance */
163+  .chroma .vi {
164+  }
165+  /* NameVariableMagic */
166+  .chroma .vm {
167+    color: #b85820;
168+  }
169+  /* Literal */
170+  .chroma .l {
171+  }
172+  /* LiteralDate */
173+  .chroma .ld {
174+  }
175+  /* LiteralString */
176+  .chroma .s {
177+    color: #b83838;
178+  }
179+  /* LiteralStringAffix */
180+  .chroma .sa {
181+    color: #444444;
182+  }
183+  /* LiteralStringBacktick */
184+  .chroma .sb {
185+    color: #b83838;
186+  }
187+  /* LiteralStringChar */
188+  .chroma .sc {
189+    color: #a848a8;
190+  }
191+  /* LiteralStringDelimiter */
192+  .chroma .dl {
193+    color: #b85820;
194+  }
195+  /* LiteralStringDoc */
196+  .chroma .sd {
197+    color: #b85820;
198+    font-style: italic;
199+  }
200+  /* LiteralStringDouble */
201+  .chroma .s2 {
202+    color: #b83838;
203+  }
204+  /* LiteralStringEscape */
205+  .chroma .se {
206+    color: #709030;
207+  }
208+  /* LiteralStringHeredoc */
209+  .chroma .sh {
210+    color: #b83838;
211+  }
212+  /* LiteralStringInterpol */
213+  .chroma .si {
214+    color: #b83838;
215+    text-decoration: underline;
216+  }
217+  /* LiteralStringOther */
218+  .chroma .sx {
219+    color: #a848a8;
220+  }
221+  /* LiteralStringRegex */
222+  .chroma .sr {
223+    color: #a848a8;
224+  }
225+  /* LiteralStringSingle */
226+  .chroma .s1 {
227+    color: #b83838;
228+  }
229+  /* LiteralStringSymbol */
230+  .chroma .ss {
231+    color: #b83838;
232+  }
233+  /* LiteralNumber */
234+  .chroma .m {
235+    color: #444444;
236+  }
237+  /* LiteralNumberBin */
238+  .chroma .mb {
239+    color: #444444;
240+  }
241+  /* LiteralNumberFloat */
242+  .chroma .mf {
243+    color: #444444;
244+  }
245+  /* LiteralNumberHex */
246+  .chroma .mh {
247+    color: #444444;
248+  }
249+  /* LiteralNumberInteger */
250+  .chroma .mi {
251+    color: #444444;
252+  }
253+  /* LiteralNumberIntegerLong */
254+  .chroma .il {
255+    color: #444444;
256+  }
257+  /* LiteralNumberOct */
258+  .chroma .mo {
259+    color: #444444;
260+  }
261+  /* Operator */
262+  .chroma .o {
263+    color: #666666;
264+  }
265+  /* OperatorWord */
266+  .chroma .ow {
267+    color: #a848a8;
268+  }
269+  /* Punctuation */
270+  .chroma .p {
271+    color: #888888;
272+  }
273+  /* Comment */
274+  .chroma .c {
275+    color: #888888;
276+    font-style: italic;
277+  }
278+  /* CommentHashbang */
279+  .chroma .ch {
280+    color: #287088;
281+    font-style: italic;
282+  }
283+  /* CommentMultiline */
284+  .chroma .cm {
285+    color: #888888;
286+    font-style: italic;
287+  }
288+  /* CommentSingle */
289+  .chroma .c1 {
290+    color: #888888;
291+    font-style: italic;
292+  }
293+  /* CommentSpecial */
294+  .chroma .cs {
295+    color: #888888;
296+    font-style: italic;
297+  }
298+  /* CommentPreproc */
299+  .chroma .cp {
300+    color: #289870;
301+  }
302+  /* CommentPreprocFile */
303+  .chroma .cpf {
304+    color: #289870;
305+  }
306+  /* Generic */
307+  .chroma .g {
308+  }
309+  /* GenericDeleted */
310+  .chroma .gd {
311+    color: #c02828;
312+  }
313+  /* GenericEmph */
314+  .chroma .ge {
315+    font-style: italic;
316+  }
317+  /* GenericError */
318+  .chroma .gr {
319+    color: #c02828;
320+  }
321+  /* GenericHeading */
322+  .chroma .gh {
323+    color: #666666;
324+  }
325+  /* GenericInserted */
326+  .chroma .gi {
327+    color: #388038;
328+  }
329+  /* GenericOutput */
330+  .chroma .go {
331+    color: #666666;
332+  }
333+  /* GenericPrompt */
334+  .chroma .gp {
335+    color: #444444;
336+  }
337+  /* GenericStrong */
338+  .chroma .gs {
339+    font-weight: bold;
340+  }
341+  /* GenericSubheading */
342+  .chroma .gu {
343+    color: #444444;
344+  }
345+  /* GenericTraceback */
346+  .chroma .gt {
347+    color: #2838b0;
348+  }
349+  /* GenericUnderline */
350+  .chroma .gl {
351+    text-decoration: underline;
352+  }
353+  /* TextWhitespace */
354+  .chroma .w {
355+    color: #a89028;
356+  }
357+}
358+
359+@media (prefers-color-scheme: dark) {
360+  /* Background */
361+  .bg {
362+    color: #f8f8f2;
363+    background-color: #282a36;
364+  }
365+  /* PreWrapper */
366+  .chroma {
367+    color: #f8f8f2;
368+    background-color: #282a36;
369+  }
370+  /* Other */
371+  .chroma .x {
372+  }
373+  /* Error */
374+  .chroma .err {
375+  }
376+  /* CodeLine */
377+  .chroma .cl {
378+  }
379+  /* LineTableTD */
380+  .chroma .lntd {
381+    vertical-align: top;
382+    padding: 0;
383+    margin: 0;
384+    border: 0;
385+  }
386+  /* LineTable */
387+  .chroma .lntable {
388+    border-spacing: 0;
389+    padding: 0;
390+    margin: 0;
391+    border: 0;
392+  }
393+  /* LineHighlight */
394+  .chroma .hl {
395+    background-color: #ffffcc;
396+  }
397+  /* LineNumbersTable */
398+  .chroma .lnt {
399+    white-space: pre;
400+    user-select: none;
401+    margin-right: 0.4em;
402+    padding: 0 0.4em 0 0.4em;
403+    color: #7f7f7f;
404+  }
405+  /* LineNumbers */
406+  .chroma .ln {
407+    white-space: pre;
408+    user-select: none;
409+    margin-right: 0.4em;
410+    padding: 0 0.4em 0 0.4em;
411+    color: #7f7f7f;
412+  }
413+  /* Line */
414+  .chroma .line {
415+    display: flex;
416+  }
417+  /* Keyword */
418+  .chroma .k {
419+    color: #ff79c6;
420+  }
421+  /* KeywordConstant */
422+  .chroma .kc {
423+    color: #ff79c6;
424+  }
425+  /* KeywordDeclaration */
426+  .chroma .kd {
427+    color: #8be9fd;
428+    font-style: italic;
429+  }
430+  /* KeywordNamespace */
431+  .chroma .kn {
432+    color: #ff79c6;
433+  }
434+  /* KeywordPseudo */
435+  .chroma .kp {
436+    color: #ff79c6;
437+  }
438+  /* KeywordReserved */
439+  .chroma .kr {
440+    color: #ff79c6;
441+  }
442+  /* KeywordType */
443+  .chroma .kt {
444+    color: #8be9fd;
445+  }
446+  /* Name */
447+  .chroma .n {
448+  }
449+  /* NameAttribute */
450+  .chroma .na {
451+    color: #50fa7b;
452+  }
453+  /* NameBuiltin */
454+  .chroma .nb {
455+    color: #8be9fd;
456+    font-style: italic;
457+  }
458+  /* NameBuiltinPseudo */
459+  .chroma .bp {
460+  }
461+  /* NameClass */
462+  .chroma .nc {
463+    color: #50fa7b;
464+  }
465+  /* NameConstant */
466+  .chroma .no {
467+  }
468+  /* NameDecorator */
469+  .chroma .nd {
470+  }
471+  /* NameEntity */
472+  .chroma .ni {
473+  }
474+  /* NameException */
475+  .chroma .ne {
476+  }
477+  /* NameFunction */
478+  .chroma .nf {
479+    color: #50fa7b;
480+  }
481+  /* NameFunctionMagic */
482+  .chroma .fm {
483+  }
484+  /* NameLabel */
485+  .chroma .nl {
486+    color: #8be9fd;
487+    font-style: italic;
488+  }
489+  /* NameNamespace */
490+  .chroma .nn {
491+  }
492+  /* NameOther */
493+  .chroma .nx {
494+  }
495+  /* NameProperty */
496+  .chroma .py {
497+  }
498+  /* NameTag */
499+  .chroma .nt {
500+    color: #ff79c6;
501+  }
502+  /* NameVariable */
503+  .chroma .nv {
504+    color: #8be9fd;
505+    font-style: italic;
506+  }
507+  /* NameVariableClass */
508+  .chroma .vc {
509+    color: #8be9fd;
510+    font-style: italic;
511+  }
512+  /* NameVariableGlobal */
513+  .chroma .vg {
514+    color: #8be9fd;
515+    font-style: italic;
516+  }
517+  /* NameVariableInstance */
518+  .chroma .vi {
519+    color: #8be9fd;
520+    font-style: italic;
521+  }
522+  /* NameVariableMagic */
523+  .chroma .vm {
524+  }
525+  /* Literal */
526+  .chroma .l {
527+  }
528+  /* LiteralDate */
529+  .chroma .ld {
530+  }
531+  /* LiteralString */
532+  .chroma .s {
533+    color: #f1fa8c;
534+  }
535+  /* LiteralStringAffix */
536+  .chroma .sa {
537+    color: #f1fa8c;
538+  }
539+  /* LiteralStringBacktick */
540+  .chroma .sb {
541+    color: #f1fa8c;
542+  }
543+  /* LiteralStringChar */
544+  .chroma .sc {
545+    color: #f1fa8c;
546+  }
547+  /* LiteralStringDelimiter */
548+  .chroma .dl {
549+    color: #f1fa8c;
550+  }
551+  /* LiteralStringDoc */
552+  .chroma .sd {
553+    color: #f1fa8c;
554+  }
555+  /* LiteralStringDouble */
556+  .chroma .s2 {
557+    color: #f1fa8c;
558+  }
559+  /* LiteralStringEscape */
560+  .chroma .se {
561+    color: #f1fa8c;
562+  }
563+  /* LiteralStringHeredoc */
564+  .chroma .sh {
565+    color: #f1fa8c;
566+  }
567+  /* LiteralStringInterpol */
568+  .chroma .si {
569+    color: #f1fa8c;
570+  }
571+  /* LiteralStringOther */
572+  .chroma .sx {
573+    color: #f1fa8c;
574+  }
575+  /* LiteralStringRegex */
576+  .chroma .sr {
577+    color: #f1fa8c;
578+  }
579+  /* LiteralStringSingle */
580+  .chroma .s1 {
581+    color: #f1fa8c;
582+  }
583+  /* LiteralStringSymbol */
584+  .chroma .ss {
585+    color: #f1fa8c;
586+  }
587+  /* LiteralNumber */
588+  .chroma .m {
589+    color: #bd93f9;
590+  }
591+  /* LiteralNumberBin */
592+  .chroma .mb {
593+    color: #bd93f9;
594+  }
595+  /* LiteralNumberFloat */
596+  .chroma .mf {
597+    color: #bd93f9;
598+  }
599+  /* LiteralNumberHex */
600+  .chroma .mh {
601+    color: #bd93f9;
602+  }
603+  /* LiteralNumberInteger */
604+  .chroma .mi {
605+    color: #bd93f9;
606+  }
607+  /* LiteralNumberIntegerLong */
608+  .chroma .il {
609+    color: #bd93f9;
610+  }
611+  /* LiteralNumberOct */
612+  .chroma .mo {
613+    color: #bd93f9;
614+  }
615+  /* Operator */
616+  .chroma .o {
617+    color: #ff79c6;
618+  }
619+  /* OperatorWord */
620+  .chroma .ow {
621+    color: #ff79c6;
622+  }
623+  /* Punctuation */
624+  .chroma .p {
625+  }
626+  /* Comment */
627+  .chroma .c {
628+    color: #6272a4;
629+  }
630+  /* CommentHashbang */
631+  .chroma .ch {
632+    color: #6272a4;
633+  }
634+  /* CommentMultiline */
635+  .chroma .cm {
636+    color: #6272a4;
637+  }
638+  /* CommentSingle */
639+  .chroma .c1 {
640+    color: #6272a4;
641+  }
642+  /* CommentSpecial */
643+  .chroma .cs {
644+    color: #6272a4;
645+  }
646+  /* CommentPreproc */
647+  .chroma .cp {
648+    color: #ff79c6;
649+  }
650+  /* CommentPreprocFile */
651+  .chroma .cpf {
652+    color: #ff79c6;
653+  }
654+  /* Generic */
655+  .chroma .g {
656+  }
657+  /* GenericDeleted */
658+  .chroma .gd {
659+    color: #ff5555;
660+  }
661+  /* GenericEmph */
662+  .chroma .ge {
663+    text-decoration: underline;
664+  }
665+  /* GenericError */
666+  .chroma .gr {
667+  }
668+  /* GenericHeading */
669+  .chroma .gh {
670+    font-weight: bold;
671+  }
672+  /* GenericInserted */
673+  .chroma .gi {
674+    color: #50fa7b;
675+    font-weight: bold;
676+  }
677+  /* GenericOutput */
678+  .chroma .go {
679+    color: #44475a;
680+  }
681+  /* GenericPrompt */
682+  .chroma .gp {
683+  }
684+  /* GenericStrong */
685+  .chroma .gs {
686+  }
687+  /* GenericSubheading */
688+  .chroma .gu {
689+    font-weight: bold;
690+  }
691+  /* GenericTraceback */
692+  .chroma .gt {
693+  }
694+  /* GenericUnderline */
695+  .chroma .gl {
696+    text-decoration: underline;
697+  }
698+  /* TextWhitespace */
699+  .chroma .w {
700+  }
701+}