- commit
- cd31f2a
- parent
- 421f370
- author
- Eric Bower
- date
- 2024-01-13 04:33:57 +0000 UTC
style: use docs smol.css as canonical css framework
M
Makefile
+0,
-7
1@@ -10,13 +10,6 @@ DOCKER_BUILDX_BUILD?=$(DOCKER_CMD) buildx build --push --platform $(DOCKER_PLATF
2 WRITE?=0
3
4 css:
5- cp ./smol.css lists/public/main.css
6- cp ./smol.css prose/public/main.css
7- cp ./smol.css pastes/public/main.css
8- cp ./smol.css imgs/public/main.css
9- cp ./smol.css feeds/public/main.css
10- cp ./smol.css pgs/public/main.css
11-
12 cp ./syntax.css pastes/public/syntax.css
13 cp ./syntax.css prose/public/syntax.css
14 .PHONY: css
+1,
-0
1@@ -11,6 +11,7 @@
2 <meta name="keywords" content="rss, email, notification, service" />
3 {{template "meta" .}}
4
5+ <link rel="stylesheet" href="https://pico.sh/smol.css" />
6 <link rel="stylesheet" href="/main.css" />
7 </head>
8 <body {{template "attrs" .}}>{{template "body" .}}</body>
+0,
-434
1@@ -1,437 +1,3 @@
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- --main-hue: 250;
22- --white: #6a737d;
23- --code: #fff8d3;
24- --code-border: #f0d547;
25- --pre: #f6f8fa;
26- --bg-color: #fff;
27- --text-color: #24292f;
28- --link-color: #005cc5;
29- --visited: #6f42c1;
30- --blockquote: #005cc5;
31- --blockquote-bg: #fff;
32- --hover: #d73a49;
33- --grey: #ccc;
34- }
35-}
36-
37-@media (prefers-color-scheme: dark) {
38- :root {
39- --main-hue: 250;
40- --white: #f2f2f2;
41- --code: #414558;
42- --code-border: #252525;
43- --pre: #252525;
44- --bg-color: #282a36;
45- --text-color: #f2f2f2;
46- --link-color: #8be9fd;
47- --visited: #bd93f9;
48- --blockquote: #bd93f9;
49- --blockquote-bg: #414558;
50- --hover: #ff80bf;
51- --grey: #414558;
52- }
53-}
54-
55-html {
56- background-color: var(--bg-color);
57- color: var(--text-color);
58- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
59- Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
60- sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
61- -webkit-text-size-adjust: 100%;
62- tab-size: 4;
63-}
64-
65 body {
66- font-size: 16px;
67- line-height: 1.5;
68- margin: 0 auto;
69 max-width: 720px;
70 }
71-
72-img {
73- max-width: 100%;
74- height: auto;
75-}
76-
77-b,
78-strong {
79- font-weight: bold;
80-}
81-
82-code,
83-kbd,
84-samp,
85-pre {
86- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
87- monospace;
88- font-size: 0.8rem;
89-}
90-
91-code,
92-kbd,
93-samp {
94- background-color: var(--code);
95- border: 1px solid var(--code-border);
96-}
97-
98-pre > code {
99- background-color: inherit;
100- padding: 0;
101- border: none;
102-}
103-
104-code {
105- border-radius: 0.3rem;
106- padding: 0.15rem 0.2rem 0.05rem;
107-}
108-
109-pre {
110- border-radius: 5px;
111- padding: 1rem;
112- margin: 1rem 0;
113- overflow-x: auto;
114- background-color: var(--pre) !important;
115-}
116-
117-small {
118- font-size: 0.8rem;
119-}
120-
121-summary {
122- display: list-item;
123-}
124-
125-h1,
126-h2,
127-h3,
128-h4 {
129- border: 0;
130- font-style: normal;
131- font-weight: inherit;
132- font-size: inherit;
133- margin: 0;
134-}
135-
136-h2,
137-h3,
138-h4 {
139- border-bottom: 2px solid var(--grey);
140- padding-bottom: 15px;
141-}
142-
143-h1 a:visited,
144-h2 a:visited,
145-h3 a:visited,
146-h4 a:visited {
147- color: var(--grey);
148-}
149-
150-h1 a,
151-h2 a,
152-h3 a,
153-h4 a {
154- color: var(--grey);
155-}
156-
157-.no-underline {
158- border-bottom: 0px;
159- padding-bottom: 0;
160-}
161-
162-h1 > code {
163- font-size: inherit;
164-}
165-
166-h2 > code {
167- font-size: inherit;
168-}
169-
170-h3 > code {
171- font-size: inherit;
172-}
173-
174-hr {
175- color: inherit;
176- border: 0;
177- margin: 0;
178- height: 1px;
179- background: var(--grey);
180- margin: 2rem auto;
181- text-align: center;
182-}
183-
184-a {
185- text-decoration: underline;
186- color: var(--link-color);
187-}
188-
189-a:hover,
190-a:visited:hover {
191- color: var(--hover);
192-}
193-
194-a:visited {
195- color: var(--visited);
196-}
197-
198-a.link-grey {
199- text-decoration: underline;
200- color: var(--white);
201-}
202-
203-a.link-grey:visited {
204- color: var(--white);
205-}
206-
207-section {
208- margin-bottom: 1.4rem;
209-}
210-
211-section:last-child {
212- margin-bottom: 0;
213-}
214-
215-header {
216- margin: 1rem auto;
217-}
218-
219-p {
220- margin: 0.8rem 0;
221-}
222-
223-article {
224- overflow-wrap: break-word;
225-}
226-
227-blockquote {
228- border-left: 5px solid var(--blockquote);
229- background-color: var(--blockquote-bg);
230- padding: 0.8rem;
231- margin: 1rem 0;
232-}
233-
234-blockquote > p {
235- margin: 0;
236-}
237-
238-ul,
239-ol {
240- padding: 0 0 0 2rem;
241- list-style-position: outside;
242-}
243-
244-ul[style*="list-style-type: none;"] {
245- padding: 0;
246-}
247-
248-li {
249- margin: 0.5rem 0;
250-}
251-
252-li > pre {
253- padding: 0;
254-}
255-
256-footer {
257- text-align: center;
258- margin-bottom: 4rem;
259-}
260-
261-dt {
262- font-weight: bold;
263-}
264-
265-dd {
266- margin-left: 0;
267-}
268-
269-dd:not(:last-child) {
270- margin-bottom: 0.5rem;
271-}
272-
273-figure {
274- margin: 0;
275-}
276-
277-.btn-link {
278- border: 3px solid hsl(var(--main-hue), 92%, 66%);
279- background-color: hsl(var(--main-hue), 92%, 66%);
280- padding: 0.5rem 1rem;
281- border-radius: 0.25rem;
282- box-shadow: 0px 1px 2px 0px black;
283- color: var(--white);
284- text-decoration: none;
285- font-weight: bold;
286-}
287-
288-.btn-link:visited,
289-.btn-link:visited:hover,
290-.btn-link:hover {
291- color: var(--white);
292-}
293-
294-.post-date {
295- width: 130px;
296-}
297-
298-.text-grey {
299- color: var(--grey);
300-}
301-
302-.text-2xl {
303- font-size: 2.25rem;
304- line-height: 1.15;
305-}
306-
307-.text-xl {
308- font-size: 1.88rem;
309- line-height: 1.15;
310-}
311-
312-.text-lg {
313- font-size: 1.5rem;
314- line-height: 1.15;
315-}
316-
317-.text-md {
318- font-size: 1.13rem;
319- line-height: 1.15;
320-}
321-
322-.text-sm {
323- font-size: 0.875rem;
324-}
325-
326-.text-center {
327- text-align: center;
328-}
329-
330-.font-bold {
331- font-weight: bold;
332-}
333-
334-.font-italic {
335- font-style: italic;
336-}
337-
338-.inline {
339- display: inline;
340-}
341-
342-.inline-block {
343- display: inline-block;
344-}
345-
346-.flex {
347- display: flex;
348-}
349-
350-.items-center {
351- align-items: center;
352-}
353-
354-.m-0 {
355- margin: 0;
356-}
357-
358-.mt {
359- margin-top: 0.5rem;
360-}
361-
362-.mb {
363- margin-bottom: 0.5rem;
364-}
365-
366-.mr {
367- margin-right: 0.5rem;
368-}
369-
370-.ml {
371- margin-left: 0.5rem;
372-}
373-
374-.my {
375- margin-top: 0.5rem;
376- margin-bottom: 0.5rem;
377-}
378-
379-.my-2 {
380- margin-top: 1rem;
381- margin-bottom: 1rem;
382-}
383-
384-.mx {
385- margin-left: 0.5rem;
386- margin-right: 0.5rem;
387-}
388-
389-.mx-2 {
390- margin-left: 1rem;
391- margin-right: 1rem;
392-}
393-
394-.justify-between {
395- justify-content: space-between;
396-}
397-
398-.flex-1 {
399- flex: 1;
400-}
401-
402-.layout-aside {
403- max-width: 50rem;
404-}
405-
406-.layout-aside aside {
407- width: 200px;
408-}
409-
410-.layout-aside img {
411- border-radius: 5px;
412-}
413-
414-#readme {
415- display: none;
416-}
417-
418-@media only screen and (max-width: 600px) {
419- body {
420- padding: 1rem;
421- }
422-
423- header {
424- margin: 0;
425- }
426-
427- .layout-aside main {
428- flex-direction: column;
429- }
430-
431- aside {
432- display: none;
433- }
434-
435- #readme {
436- display: block;
437- }
438-}
+1,
-1
1@@ -10,8 +10,8 @@
2
3 <meta name="keywords" content="image, images, hosting" />
4
5+ <link rel="stylesheet" href="https://pico.sh/smol.css" />
6 <link rel="stylesheet" href="/main.css" />
7- <link rel="stylesheet" href="/imgs.css" />
8
9 {{template "meta" .}}
10 </head>
+0,
-84
1@@ -1,84 +0,0 @@
2-body {
3- max-width: 52rem;
4-}
5-
6-img {
7- max-width: 100%;
8- max-height: 90vh;
9-}
10-
11-.albums {
12- width: 100%;
13- display: grid;
14- grid-template-columns: repeat(3, 1fr);
15- grid-template-rows: repeat(auto-fill, 300px);
16- grid-row-gap: 0.5rem;
17- grid-column-gap: 1rem;
18-}
19-
20-.thumbnail-container {
21- position: relative;
22-}
23-
24-.thumbnail-container a, .thumbnail-container a:visited, .thumbnail-container a:hover {
25- color: var(--white);
26-}
27-
28-.tag-text {
29- position: absolute;
30- bottom: 20px;
31- z-index: 1;
32- text-align: center;
33- width: 100%;
34-}
35-
36-.thumbnail {
37- z-index: 1;
38- object-fit: contain;
39- width: 300px;
40- height: 300px;
41- background-color: #000;
42-}
43-
44-.thumbnail-link {
45- z-index: 1;
46-}
47-
48-.md h1 {
49- font-size: 1.85rem;
50- line-height: 1.15;
51- font-weight: bold;
52- padding: 0.6rem 0 0 0;
53-}
54-
55-.md h2 {
56- font-size: 1.45rem;
57- line-height: 1.15;
58- font-weight: bold;
59- padding: 0.6rem 0 0 0;
60-}
61-
62-.md h3 {
63- font-size: 1.25rem;
64- font-weight: bold;
65- padding: 0.6rem 0 0 0;
66-}
67-
68-.md h4 {
69- font-size: 1rem;
70- font-weight: bold;
71- padding: 0.6rem 0 0 0;
72-}
73-
74-@media only screen and (max-width: 900px) {
75- .albums {
76- grid-template-columns: repeat(1, 1fr);
77- justify-content: center;
78- }
79-
80- .albums article {
81- display: flex;
82- flex-direction: column;
83- align-items: center;
84- }
85-}
+47,
-400
1@@ -1,437 +1,84 @@
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- --main-hue: 250;
22- --white: #6a737d;
23- --code: #fff8d3;
24- --code-border: #f0d547;
25- --pre: #f6f8fa;
26- --bg-color: #fff;
27- --text-color: #24292f;
28- --link-color: #005cc5;
29- --visited: #6f42c1;
30- --blockquote: #005cc5;
31- --blockquote-bg: #fff;
32- --hover: #d73a49;
33- --grey: #ccc;
34- }
35-}
36-
37-@media (prefers-color-scheme: dark) {
38- :root {
39- --main-hue: 250;
40- --white: #f2f2f2;
41- --code: #414558;
42- --code-border: #252525;
43- --pre: #252525;
44- --bg-color: #282a36;
45- --text-color: #f2f2f2;
46- --link-color: #8be9fd;
47- --visited: #bd93f9;
48- --blockquote: #bd93f9;
49- --blockquote-bg: #414558;
50- --hover: #ff80bf;
51- --grey: #414558;
52- }
53-}
54-
55-html {
56- background-color: var(--bg-color);
57- color: var(--text-color);
58- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
59- Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
60- sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
61- -webkit-text-size-adjust: 100%;
62- tab-size: 4;
63-}
64-
65 body {
66- font-size: 16px;
67- line-height: 1.5;
68- margin: 0 auto;
69- max-width: 720px;
70+ max-width: 52rem;
71 }
72
73 img {
74 max-width: 100%;
75- height: auto;
76-}
77-
78-b,
79-strong {
80- font-weight: bold;
81-}
82-
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,
93-kbd,
94-samp {
95- background-color: var(--code);
96- border: 1px solid var(--code-border);
97-}
98-
99-pre > code {
100- background-color: inherit;
101- padding: 0;
102- border: none;
103-}
104-
105-code {
106- border-radius: 0.3rem;
107- padding: 0.15rem 0.2rem 0.05rem;
108-}
109-
110-pre {
111- border-radius: 5px;
112- padding: 1rem;
113- margin: 1rem 0;
114- overflow-x: auto;
115- background-color: var(--pre) !important;
116-}
117-
118-small {
119- font-size: 0.8rem;
120-}
121-
122-summary {
123- display: list-item;
124-}
125-
126-h1,
127-h2,
128-h3,
129-h4 {
130- border: 0;
131- font-style: normal;
132- font-weight: inherit;
133- font-size: inherit;
134- margin: 0;
135-}
136-
137-h2,
138-h3,
139-h4 {
140- border-bottom: 2px solid var(--grey);
141- padding-bottom: 15px;
142-}
143-
144-h1 a:visited,
145-h2 a:visited,
146-h3 a:visited,
147-h4 a:visited {
148- color: var(--grey);
149-}
150-
151-h1 a,
152-h2 a,
153-h3 a,
154-h4 a {
155- color: var(--grey);
156-}
157-
158-.no-underline {
159- border-bottom: 0px;
160- padding-bottom: 0;
161-}
162-
163-h1 > code {
164- font-size: inherit;
165+ max-height: 90vh;
166 }
167
168-h2 > code {
169- font-size: inherit;
170-}
171-
172-h3 > code {
173- font-size: inherit;
174-}
175-
176-hr {
177- color: inherit;
178- border: 0;
179- margin: 0;
180- height: 1px;
181- background: var(--grey);
182- margin: 2rem auto;
183- text-align: center;
184+.albums {
185+ width: 100%;
186+ display: grid;
187+ grid-template-columns: repeat(3, 1fr);
188+ grid-template-rows: repeat(auto-fill, 300px);
189+ grid-row-gap: 0.5rem;
190+ grid-column-gap: 1rem;
191 }
192
193-a {
194- text-decoration: underline;
195- color: var(--link-color);
196+.thumbnail-container {
197+ position: relative;
198 }
199
200-a:hover,
201-a:visited:hover {
202- color: var(--hover);
203-}
204-
205-a:visited {
206- color: var(--visited);
207-}
208-
209-a.link-grey {
210- text-decoration: underline;
211+.thumbnail-container a, .thumbnail-container a:visited, .thumbnail-container a:hover {
212 color: var(--white);
213 }
214
215-a.link-grey:visited {
216- color: var(--white);
217-}
218-
219-section {
220- margin-bottom: 1.4rem;
221-}
222-
223-section:last-child {
224- margin-bottom: 0;
225-}
226-
227-header {
228- margin: 1rem auto;
229-}
230-
231-p {
232- margin: 0.8rem 0;
233-}
234-
235-article {
236- overflow-wrap: break-word;
237-}
238-
239-blockquote {
240- border-left: 5px solid var(--blockquote);
241- background-color: var(--blockquote-bg);
242- padding: 0.8rem;
243- margin: 1rem 0;
244-}
245-
246-blockquote > p {
247- margin: 0;
248-}
249-
250-ul,
251-ol {
252- padding: 0 0 0 2rem;
253- list-style-position: outside;
254-}
255-
256-ul[style*="list-style-type: none;"] {
257- padding: 0;
258-}
259-
260-li {
261- margin: 0.5rem 0;
262-}
263-
264-li > pre {
265- padding: 0;
266-}
267-
268-footer {
269+.tag-text {
270+ position: absolute;
271+ bottom: 20px;
272+ z-index: 1;
273 text-align: center;
274- margin-bottom: 4rem;
275-}
276-
277-dt {
278- font-weight: bold;
279-}
280-
281-dd {
282- margin-left: 0;
283-}
284-
285-dd:not(:last-child) {
286- margin-bottom: 0.5rem;
287-}
288-
289-figure {
290- margin: 0;
291-}
292-
293-.btn-link {
294- border: 3px solid hsl(var(--main-hue), 92%, 66%);
295- background-color: hsl(var(--main-hue), 92%, 66%);
296- padding: 0.5rem 1rem;
297- border-radius: 0.25rem;
298- box-shadow: 0px 1px 2px 0px black;
299- color: var(--white);
300- text-decoration: none;
301- font-weight: bold;
302-}
303-
304-.btn-link:visited,
305-.btn-link:visited:hover,
306-.btn-link:hover {
307- color: var(--white);
308-}
309-
310-.post-date {
311- width: 130px;
312+ width: 100%;
313 }
314
315-.text-grey {
316- color: var(--grey);
317+.thumbnail {
318+ z-index: 1;
319+ object-fit: contain;
320+ width: 300px;
321+ height: 300px;
322+ background-color: #000;
323 }
324
325-.text-2xl {
326- font-size: 2.25rem;
327- line-height: 1.15;
328+.thumbnail-link {
329+ z-index: 1;
330 }
331
332-.text-xl {
333- font-size: 1.88rem;
334- line-height: 1.15;
335-}
336-
337-.text-lg {
338- font-size: 1.5rem;
339+.md h1 {
340+ font-size: 1.85rem;
341 line-height: 1.15;
342+ font-weight: bold;
343+ padding: 0.6rem 0 0 0;
344 }
345
346-.text-md {
347- font-size: 1.13rem;
348+.md h2 {
349+ font-size: 1.45rem;
350 line-height: 1.15;
351-}
352-
353-.text-sm {
354- font-size: 0.875rem;
355-}
356-
357-.text-center {
358- text-align: center;
359-}
360-
361-.font-bold {
362 font-weight: bold;
363+ padding: 0.6rem 0 0 0;
364 }
365
366-.font-italic {
367- font-style: italic;
368-}
369-
370-.inline {
371- display: inline;
372-}
373-
374-.inline-block {
375- display: inline-block;
376-}
377-
378-.flex {
379- display: flex;
380-}
381-
382-.items-center {
383- align-items: center;
384-}
385-
386-.m-0 {
387- margin: 0;
388-}
389-
390-.mt {
391- margin-top: 0.5rem;
392-}
393-
394-.mb {
395- margin-bottom: 0.5rem;
396-}
397-
398-.mr {
399- margin-right: 0.5rem;
400-}
401-
402-.ml {
403- margin-left: 0.5rem;
404-}
405-
406-.my {
407- margin-top: 0.5rem;
408- margin-bottom: 0.5rem;
409-}
410-
411-.my-2 {
412- margin-top: 1rem;
413- margin-bottom: 1rem;
414-}
415-
416-.mx {
417- margin-left: 0.5rem;
418- margin-right: 0.5rem;
419-}
420-
421-.mx-2 {
422- margin-left: 1rem;
423- margin-right: 1rem;
424-}
425-
426-.justify-between {
427- justify-content: space-between;
428-}
429-
430-.flex-1 {
431- flex: 1;
432-}
433-
434-.layout-aside {
435- max-width: 50rem;
436-}
437-
438-.layout-aside aside {
439- width: 200px;
440-}
441-
442-.layout-aside img {
443- border-radius: 5px;
444+.md h3 {
445+ font-size: 1.25rem;
446+ font-weight: bold;
447+ padding: 0.6rem 0 0 0;
448 }
449
450-#readme {
451- display: none;
452+.md h4 {
453+ font-size: 1rem;
454+ font-weight: bold;
455+ padding: 0.6rem 0 0 0;
456 }
457
458-@media only screen and (max-width: 600px) {
459- body {
460- padding: 1rem;
461- }
462-
463- header {
464- margin: 0;
465+@media only screen and (max-width: 900px) {
466+ .albums {
467+ grid-template-columns: repeat(1, 1fr);
468+ justify-content: center;
469 }
470
471- .layout-aside main {
472+ .albums article {
473+ display: flex;
474 flex-direction: column;
475- }
476-
477- aside {
478- display: none;
479- }
480-
481- #readme {
482- display: block;
483+ align-items: center;
484 }
485 }
+1,
-0
1@@ -644,6 +644,7 @@ func rssHandler(w http.ResponseWriter, r *http.Request) {
2 func createStaticRoutes() []shared.Route {
3 return []shared.Route{
4 shared.NewRoute("GET", "/main.css", shared.ServeFile("main.css", "text/css")),
5+ shared.NewRoute("GET", "/lists.css", shared.ServeFile("lists.css", "text/css")),
6 shared.NewRoute("GET", "/card.png", shared.ServeFile("card.png", "image/png")),
7 shared.NewRoute("GET", "/favicon-16x16.png", shared.ServeFile("favicon-16x16.png", "image/png")),
8 shared.NewRoute("GET", "/favicon-32x32.png", shared.ServeFile("favicon-32x32.png", "image/png")),
+1,
-0
1@@ -11,6 +11,7 @@
2 <meta name="keywords" content="blog, blogging, write, writing, lists" />
3 {{template "meta" .}}
4
5+ <link rel="stylesheet" href="https://pico.sh/smol.css" />
6 <link rel="stylesheet" href="/main.css" />
7 </head>
8 <body {{template "attrs" .}}>{{template "body" .}}</body>
+0,
-400
1@@ -1,403 +1,11 @@
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- --main-hue: 250;
22- --white: #6a737d;
23- --code: #fff8d3;
24- --code-border: #f0d547;
25- --pre: #f6f8fa;
26- --bg-color: #fff;
27- --text-color: #24292f;
28- --link-color: #005cc5;
29- --visited: #6f42c1;
30- --blockquote: #005cc5;
31- --blockquote-bg: #fff;
32- --hover: #d73a49;
33- --grey: #ccc;
34- }
35-}
36-
37-@media (prefers-color-scheme: dark) {
38- :root {
39- --main-hue: 250;
40- --white: #f2f2f2;
41- --code: #414558;
42- --code-border: #252525;
43- --pre: #252525;
44- --bg-color: #282a36;
45- --text-color: #f2f2f2;
46- --link-color: #8be9fd;
47- --visited: #bd93f9;
48- --blockquote: #bd93f9;
49- --blockquote-bg: #414558;
50- --hover: #ff80bf;
51- --grey: #414558;
52- }
53-}
54-
55-html {
56- background-color: var(--bg-color);
57- color: var(--text-color);
58- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
59- Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
60- sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
61- -webkit-text-size-adjust: 100%;
62- tab-size: 4;
63-}
64-
65 body {
66- font-size: 16px;
67- line-height: 1.5;
68- margin: 0 auto;
69 max-width: 720px;
70 }
71
72-img {
73- max-width: 100%;
74- height: auto;
75-}
76-
77-b,
78-strong {
79- font-weight: bold;
80-}
81-
82-code,
83-kbd,
84-samp,
85-pre {
86- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
87- monospace;
88- font-size: 0.8rem;
89-}
90-
91-code,
92-kbd,
93-samp {
94- background-color: var(--code);
95- border: 1px solid var(--code-border);
96-}
97-
98-pre > code {
99- background-color: inherit;
100- padding: 0;
101- border: none;
102-}
103-
104-code {
105- border-radius: 0.3rem;
106- padding: 0.15rem 0.2rem 0.05rem;
107-}
108-
109-pre {
110- border-radius: 5px;
111- padding: 1rem;
112- margin: 1rem 0;
113- overflow-x: auto;
114- background-color: var(--pre) !important;
115-}
116-
117-small {
118- font-size: 0.8rem;
119-}
120-
121-summary {
122- display: list-item;
123-}
124-
125-h1,
126-h2,
127-h3,
128-h4 {
129- border: 0;
130- font-style: normal;
131- font-weight: inherit;
132- font-size: inherit;
133- margin: 0;
134-}
135-
136-h2,
137-h3,
138-h4 {
139- border-bottom: 2px solid var(--grey);
140- padding-bottom: 15px;
141-}
142-
143-h1 a:visited,
144-h2 a:visited,
145-h3 a:visited,
146-h4 a:visited {
147- color: var(--grey);
148-}
149-
150-h1 a,
151-h2 a,
152-h3 a,
153-h4 a {
154- color: var(--grey);
155-}
156-
157-.no-underline {
158- border-bottom: 0px;
159- padding-bottom: 0;
160-}
161-
162-h1 > code {
163- font-size: inherit;
164-}
165-
166-h2 > code {
167- font-size: inherit;
168-}
169-
170-h3 > code {
171- font-size: inherit;
172-}
173-
174-hr {
175- color: inherit;
176- border: 0;
177- margin: 0;
178- height: 1px;
179- background: var(--grey);
180- margin: 2rem auto;
181- text-align: center;
182-}
183-
184-a {
185- text-decoration: underline;
186- color: var(--link-color);
187-}
188-
189-a:hover,
190-a:visited:hover {
191- color: var(--hover);
192-}
193-
194-a:visited {
195- color: var(--visited);
196-}
197-
198-a.link-grey {
199- text-decoration: underline;
200- color: var(--white);
201-}
202-
203-a.link-grey:visited {
204- color: var(--white);
205-}
206-
207-section {
208- margin-bottom: 1.4rem;
209-}
210-
211-section:last-child {
212- margin-bottom: 0;
213-}
214-
215-header {
216- margin: 1rem auto;
217-}
218-
219-p {
220- margin: 0.8rem 0;
221-}
222-
223-article {
224- overflow-wrap: break-word;
225-}
226-
227-blockquote {
228- border-left: 5px solid var(--blockquote);
229- background-color: var(--blockquote-bg);
230- padding: 0.8rem;
231- margin: 1rem 0;
232-}
233-
234-blockquote > p {
235- margin: 0;
236-}
237-
238-ul,
239-ol {
240- padding: 0 0 0 2rem;
241- list-style-position: outside;
242-}
243-
244-ul[style*="list-style-type: none;"] {
245- padding: 0;
246-}
247-
248-li {
249- margin: 0.5rem 0;
250-}
251-
252-li > pre {
253- padding: 0;
254-}
255-
256-footer {
257- text-align: center;
258- margin-bottom: 4rem;
259-}
260-
261-dt {
262- font-weight: bold;
263-}
264-
265-dd {
266- margin-left: 0;
267-}
268-
269-dd:not(:last-child) {
270- margin-bottom: 0.5rem;
271-}
272-
273-figure {
274- margin: 0;
275-}
276-
277-.btn-link {
278- border: 3px solid hsl(var(--main-hue), 92%, 66%);
279- background-color: hsl(var(--main-hue), 92%, 66%);
280- padding: 0.5rem 1rem;
281- border-radius: 0.25rem;
282- box-shadow: 0px 1px 2px 0px black;
283- color: var(--white);
284- text-decoration: none;
285- font-weight: bold;
286-}
287-
288-.btn-link:visited,
289-.btn-link:visited:hover,
290-.btn-link:hover {
291- color: var(--white);
292-}
293-
294 .post-date {
295 width: 130px;
296 }
297
298-.text-grey {
299- color: var(--grey);
300-}
301-
302-.text-2xl {
303- font-size: 2.25rem;
304- line-height: 1.15;
305-}
306-
307-.text-xl {
308- font-size: 1.88rem;
309- line-height: 1.15;
310-}
311-
312-.text-lg {
313- font-size: 1.5rem;
314- line-height: 1.15;
315-}
316-
317-.text-md {
318- font-size: 1.13rem;
319- line-height: 1.15;
320-}
321-
322-.text-sm {
323- font-size: 0.875rem;
324-}
325-
326-.text-center {
327- text-align: center;
328-}
329-
330-.font-bold {
331- font-weight: bold;
332-}
333-
334-.font-italic {
335- font-style: italic;
336-}
337-
338-.inline {
339- display: inline;
340-}
341-
342-.inline-block {
343- display: inline-block;
344-}
345-
346-.flex {
347- display: flex;
348-}
349-
350-.items-center {
351- align-items: center;
352-}
353-
354-.m-0 {
355- margin: 0;
356-}
357-
358-.mt {
359- margin-top: 0.5rem;
360-}
361-
362-.mb {
363- margin-bottom: 0.5rem;
364-}
365-
366-.mr {
367- margin-right: 0.5rem;
368-}
369-
370-.ml {
371- margin-left: 0.5rem;
372-}
373-
374-.my {
375- margin-top: 0.5rem;
376- margin-bottom: 0.5rem;
377-}
378-
379-.my-2 {
380- margin-top: 1rem;
381- margin-bottom: 1rem;
382-}
383-
384-.mx {
385- margin-left: 0.5rem;
386- margin-right: 0.5rem;
387-}
388-
389-.mx-2 {
390- margin-left: 1rem;
391- margin-right: 1rem;
392-}
393-
394-.justify-between {
395- justify-content: space-between;
396-}
397-
398-.flex-1 {
399- flex: 1;
400-}
401-
402 .layout-aside {
403 max-width: 50rem;
404 }
405@@ -415,14 +23,6 @@ figure {
406 }
407
408 @media only screen and (max-width: 600px) {
409- body {
410- padding: 1rem;
411- }
412-
413- header {
414- margin: 0;
415- }
416-
417 .layout-aside main {
418 flex-direction: column;
419 }
+1,
-1
1@@ -11,8 +11,8 @@
2 <meta name="keywords" content="pastebin, paste, copy, snippets" />
3 {{template "meta" .}}
4
5+ <link rel="stylesheet" href="https://pico.sh/smol.css" />
6 <link rel="stylesheet" href="/main.css" />
7- <link rel="stylesheet" href="/custom.css" />
8 </head>
9 <body {{template "attrs" .}}>{{template "body" .}}</body>
10 </html>
+0,
-3
1@@ -1,3 +0,0 @@
2-body {
3- max-width: 1025px;
4-}
+1,
-435
1@@ -1,437 +1,3 @@
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- --main-hue: 250;
22- --white: #6a737d;
23- --code: #fff8d3;
24- --code-border: #f0d547;
25- --pre: #f6f8fa;
26- --bg-color: #fff;
27- --text-color: #24292f;
28- --link-color: #005cc5;
29- --visited: #6f42c1;
30- --blockquote: #005cc5;
31- --blockquote-bg: #fff;
32- --hover: #d73a49;
33- --grey: #ccc;
34- }
35-}
36-
37-@media (prefers-color-scheme: dark) {
38- :root {
39- --main-hue: 250;
40- --white: #f2f2f2;
41- --code: #414558;
42- --code-border: #252525;
43- --pre: #252525;
44- --bg-color: #282a36;
45- --text-color: #f2f2f2;
46- --link-color: #8be9fd;
47- --visited: #bd93f9;
48- --blockquote: #bd93f9;
49- --blockquote-bg: #414558;
50- --hover: #ff80bf;
51- --grey: #414558;
52- }
53-}
54-
55-html {
56- background-color: var(--bg-color);
57- color: var(--text-color);
58- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
59- Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
60- sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
61- -webkit-text-size-adjust: 100%;
62- tab-size: 4;
63-}
64-
65 body {
66- font-size: 16px;
67- line-height: 1.5;
68- margin: 0 auto;
69- max-width: 720px;
70-}
71-
72-img {
73- max-width: 100%;
74- height: auto;
75-}
76-
77-b,
78-strong {
79- font-weight: bold;
80-}
81-
82-code,
83-kbd,
84-samp,
85-pre {
86- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
87- monospace;
88- font-size: 0.8rem;
89-}
90-
91-code,
92-kbd,
93-samp {
94- background-color: var(--code);
95- border: 1px solid var(--code-border);
96-}
97-
98-pre > code {
99- background-color: inherit;
100- padding: 0;
101- border: none;
102-}
103-
104-code {
105- border-radius: 0.3rem;
106- padding: 0.15rem 0.2rem 0.05rem;
107-}
108-
109-pre {
110- border-radius: 5px;
111- padding: 1rem;
112- margin: 1rem 0;
113- overflow-x: auto;
114- background-color: var(--pre) !important;
115-}
116-
117-small {
118- font-size: 0.8rem;
119-}
120-
121-summary {
122- display: list-item;
123-}
124-
125-h1,
126-h2,
127-h3,
128-h4 {
129- border: 0;
130- font-style: normal;
131- font-weight: inherit;
132- font-size: inherit;
133- margin: 0;
134-}
135-
136-h2,
137-h3,
138-h4 {
139- border-bottom: 2px solid var(--grey);
140- padding-bottom: 15px;
141-}
142-
143-h1 a:visited,
144-h2 a:visited,
145-h3 a:visited,
146-h4 a:visited {
147- color: var(--grey);
148-}
149-
150-h1 a,
151-h2 a,
152-h3 a,
153-h4 a {
154- color: var(--grey);
155-}
156-
157-.no-underline {
158- border-bottom: 0px;
159- padding-bottom: 0;
160-}
161-
162-h1 > code {
163- font-size: inherit;
164-}
165-
166-h2 > code {
167- font-size: inherit;
168-}
169-
170-h3 > code {
171- font-size: inherit;
172-}
173-
174-hr {
175- color: inherit;
176- border: 0;
177- margin: 0;
178- height: 1px;
179- background: var(--grey);
180- margin: 2rem auto;
181- text-align: center;
182-}
183-
184-a {
185- text-decoration: underline;
186- color: var(--link-color);
187-}
188-
189-a:hover,
190-a:visited:hover {
191- color: var(--hover);
192-}
193-
194-a:visited {
195- color: var(--visited);
196-}
197-
198-a.link-grey {
199- text-decoration: underline;
200- color: var(--white);
201-}
202-
203-a.link-grey:visited {
204- color: var(--white);
205-}
206-
207-section {
208- margin-bottom: 1.4rem;
209-}
210-
211-section:last-child {
212- margin-bottom: 0;
213-}
214-
215-header {
216- margin: 1rem auto;
217-}
218-
219-p {
220- margin: 0.8rem 0;
221-}
222-
223-article {
224- overflow-wrap: break-word;
225-}
226-
227-blockquote {
228- border-left: 5px solid var(--blockquote);
229- background-color: var(--blockquote-bg);
230- padding: 0.8rem;
231- margin: 1rem 0;
232-}
233-
234-blockquote > p {
235- margin: 0;
236-}
237-
238-ul,
239-ol {
240- padding: 0 0 0 2rem;
241- list-style-position: outside;
242-}
243-
244-ul[style*="list-style-type: none;"] {
245- padding: 0;
246-}
247-
248-li {
249- margin: 0.5rem 0;
250-}
251-
252-li > pre {
253- padding: 0;
254-}
255-
256-footer {
257- text-align: center;
258- margin-bottom: 4rem;
259-}
260-
261-dt {
262- font-weight: bold;
263-}
264-
265-dd {
266- margin-left: 0;
267-}
268-
269-dd:not(:last-child) {
270- margin-bottom: 0.5rem;
271-}
272-
273-figure {
274- margin: 0;
275-}
276-
277-.btn-link {
278- border: 3px solid hsl(var(--main-hue), 92%, 66%);
279- background-color: hsl(var(--main-hue), 92%, 66%);
280- padding: 0.5rem 1rem;
281- border-radius: 0.25rem;
282- box-shadow: 0px 1px 2px 0px black;
283- color: var(--white);
284- text-decoration: none;
285- font-weight: bold;
286-}
287-
288-.btn-link:visited,
289-.btn-link:visited:hover,
290-.btn-link:hover {
291- color: var(--white);
292-}
293-
294-.post-date {
295- width: 130px;
296-}
297-
298-.text-grey {
299- color: var(--grey);
300-}
301-
302-.text-2xl {
303- font-size: 2.25rem;
304- line-height: 1.15;
305-}
306-
307-.text-xl {
308- font-size: 1.88rem;
309- line-height: 1.15;
310-}
311-
312-.text-lg {
313- font-size: 1.5rem;
314- line-height: 1.15;
315-}
316-
317-.text-md {
318- font-size: 1.13rem;
319- line-height: 1.15;
320-}
321-
322-.text-sm {
323- font-size: 0.875rem;
324-}
325-
326-.text-center {
327- text-align: center;
328-}
329-
330-.font-bold {
331- font-weight: bold;
332-}
333-
334-.font-italic {
335- font-style: italic;
336-}
337-
338-.inline {
339- display: inline;
340-}
341-
342-.inline-block {
343- display: inline-block;
344-}
345-
346-.flex {
347- display: flex;
348-}
349-
350-.items-center {
351- align-items: center;
352-}
353-
354-.m-0 {
355- margin: 0;
356-}
357-
358-.mt {
359- margin-top: 0.5rem;
360-}
361-
362-.mb {
363- margin-bottom: 0.5rem;
364-}
365-
366-.mr {
367- margin-right: 0.5rem;
368-}
369-
370-.ml {
371- margin-left: 0.5rem;
372-}
373-
374-.my {
375- margin-top: 0.5rem;
376- margin-bottom: 0.5rem;
377-}
378-
379-.my-2 {
380- margin-top: 1rem;
381- margin-bottom: 1rem;
382-}
383-
384-.mx {
385- margin-left: 0.5rem;
386- margin-right: 0.5rem;
387-}
388-
389-.mx-2 {
390- margin-left: 1rem;
391- margin-right: 1rem;
392-}
393-
394-.justify-between {
395- justify-content: space-between;
396-}
397-
398-.flex-1 {
399- flex: 1;
400-}
401-
402-.layout-aside {
403- max-width: 50rem;
404-}
405-
406-.layout-aside aside {
407- width: 200px;
408-}
409-
410-.layout-aside img {
411- border-radius: 5px;
412-}
413-
414-#readme {
415- display: none;
416-}
417-
418-@media only screen and (max-width: 600px) {
419- body {
420- padding: 1rem;
421- }
422-
423- header {
424- margin: 0;
425- }
426-
427- .layout-aside main {
428- flex-direction: column;
429- }
430-
431- aside {
432- display: none;
433- }
434-
435- #readme {
436- display: block;
437- }
438+ max-width: 1025px;
439 }
+2,
-1
1@@ -10,7 +10,8 @@
2
3 <meta name="keywords" content="static, site, hosting" />
4
5- <link rel="stylesheet" href="/main.css" />
6+ <link rel="stylesheet" href="https://pico.sh/smol.css" />
7+ <link rel="stylesheet" href="main.css" />
8
9 {{template "meta" .}}
10 </head>
+0,
-434
1@@ -1,437 +1,3 @@
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- --main-hue: 250;
22- --white: #6a737d;
23- --code: #fff8d3;
24- --code-border: #f0d547;
25- --pre: #f6f8fa;
26- --bg-color: #fff;
27- --text-color: #24292f;
28- --link-color: #005cc5;
29- --visited: #6f42c1;
30- --blockquote: #005cc5;
31- --blockquote-bg: #fff;
32- --hover: #d73a49;
33- --grey: #ccc;
34- }
35-}
36-
37-@media (prefers-color-scheme: dark) {
38- :root {
39- --main-hue: 250;
40- --white: #f2f2f2;
41- --code: #414558;
42- --code-border: #252525;
43- --pre: #252525;
44- --bg-color: #282a36;
45- --text-color: #f2f2f2;
46- --link-color: #8be9fd;
47- --visited: #bd93f9;
48- --blockquote: #bd93f9;
49- --blockquote-bg: #414558;
50- --hover: #ff80bf;
51- --grey: #414558;
52- }
53-}
54-
55-html {
56- background-color: var(--bg-color);
57- color: var(--text-color);
58- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
59- Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
60- sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
61- -webkit-text-size-adjust: 100%;
62- tab-size: 4;
63-}
64-
65 body {
66- font-size: 16px;
67- line-height: 1.5;
68- margin: 0 auto;
69 max-width: 720px;
70 }
71-
72-img {
73- max-width: 100%;
74- height: auto;
75-}
76-
77-b,
78-strong {
79- font-weight: bold;
80-}
81-
82-code,
83-kbd,
84-samp,
85-pre {
86- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
87- monospace;
88- font-size: 0.8rem;
89-}
90-
91-code,
92-kbd,
93-samp {
94- background-color: var(--code);
95- border: 1px solid var(--code-border);
96-}
97-
98-pre > code {
99- background-color: inherit;
100- padding: 0;
101- border: none;
102-}
103-
104-code {
105- border-radius: 0.3rem;
106- padding: 0.15rem 0.2rem 0.05rem;
107-}
108-
109-pre {
110- border-radius: 5px;
111- padding: 1rem;
112- margin: 1rem 0;
113- overflow-x: auto;
114- background-color: var(--pre) !important;
115-}
116-
117-small {
118- font-size: 0.8rem;
119-}
120-
121-summary {
122- display: list-item;
123-}
124-
125-h1,
126-h2,
127-h3,
128-h4 {
129- border: 0;
130- font-style: normal;
131- font-weight: inherit;
132- font-size: inherit;
133- margin: 0;
134-}
135-
136-h2,
137-h3,
138-h4 {
139- border-bottom: 2px solid var(--grey);
140- padding-bottom: 15px;
141-}
142-
143-h1 a:visited,
144-h2 a:visited,
145-h3 a:visited,
146-h4 a:visited {
147- color: var(--grey);
148-}
149-
150-h1 a,
151-h2 a,
152-h3 a,
153-h4 a {
154- color: var(--grey);
155-}
156-
157-.no-underline {
158- border-bottom: 0px;
159- padding-bottom: 0;
160-}
161-
162-h1 > code {
163- font-size: inherit;
164-}
165-
166-h2 > code {
167- font-size: inherit;
168-}
169-
170-h3 > code {
171- font-size: inherit;
172-}
173-
174-hr {
175- color: inherit;
176- border: 0;
177- margin: 0;
178- height: 1px;
179- background: var(--grey);
180- margin: 2rem auto;
181- text-align: center;
182-}
183-
184-a {
185- text-decoration: underline;
186- color: var(--link-color);
187-}
188-
189-a:hover,
190-a:visited:hover {
191- color: var(--hover);
192-}
193-
194-a:visited {
195- color: var(--visited);
196-}
197-
198-a.link-grey {
199- text-decoration: underline;
200- color: var(--white);
201-}
202-
203-a.link-grey:visited {
204- color: var(--white);
205-}
206-
207-section {
208- margin-bottom: 1.4rem;
209-}
210-
211-section:last-child {
212- margin-bottom: 0;
213-}
214-
215-header {
216- margin: 1rem auto;
217-}
218-
219-p {
220- margin: 0.8rem 0;
221-}
222-
223-article {
224- overflow-wrap: break-word;
225-}
226-
227-blockquote {
228- border-left: 5px solid var(--blockquote);
229- background-color: var(--blockquote-bg);
230- padding: 0.8rem;
231- margin: 1rem 0;
232-}
233-
234-blockquote > p {
235- margin: 0;
236-}
237-
238-ul,
239-ol {
240- padding: 0 0 0 2rem;
241- list-style-position: outside;
242-}
243-
244-ul[style*="list-style-type: none;"] {
245- padding: 0;
246-}
247-
248-li {
249- margin: 0.5rem 0;
250-}
251-
252-li > pre {
253- padding: 0;
254-}
255-
256-footer {
257- text-align: center;
258- margin-bottom: 4rem;
259-}
260-
261-dt {
262- font-weight: bold;
263-}
264-
265-dd {
266- margin-left: 0;
267-}
268-
269-dd:not(:last-child) {
270- margin-bottom: 0.5rem;
271-}
272-
273-figure {
274- margin: 0;
275-}
276-
277-.btn-link {
278- border: 3px solid hsl(var(--main-hue), 92%, 66%);
279- background-color: hsl(var(--main-hue), 92%, 66%);
280- padding: 0.5rem 1rem;
281- border-radius: 0.25rem;
282- box-shadow: 0px 1px 2px 0px black;
283- color: var(--white);
284- text-decoration: none;
285- font-weight: bold;
286-}
287-
288-.btn-link:visited,
289-.btn-link:visited:hover,
290-.btn-link:hover {
291- color: var(--white);
292-}
293-
294-.post-date {
295- width: 130px;
296-}
297-
298-.text-grey {
299- color: var(--grey);
300-}
301-
302-.text-2xl {
303- font-size: 2.25rem;
304- line-height: 1.15;
305-}
306-
307-.text-xl {
308- font-size: 1.88rem;
309- line-height: 1.15;
310-}
311-
312-.text-lg {
313- font-size: 1.5rem;
314- line-height: 1.15;
315-}
316-
317-.text-md {
318- font-size: 1.13rem;
319- line-height: 1.15;
320-}
321-
322-.text-sm {
323- font-size: 0.875rem;
324-}
325-
326-.text-center {
327- text-align: center;
328-}
329-
330-.font-bold {
331- font-weight: bold;
332-}
333-
334-.font-italic {
335- font-style: italic;
336-}
337-
338-.inline {
339- display: inline;
340-}
341-
342-.inline-block {
343- display: inline-block;
344-}
345-
346-.flex {
347- display: flex;
348-}
349-
350-.items-center {
351- align-items: center;
352-}
353-
354-.m-0 {
355- margin: 0;
356-}
357-
358-.mt {
359- margin-top: 0.5rem;
360-}
361-
362-.mb {
363- margin-bottom: 0.5rem;
364-}
365-
366-.mr {
367- margin-right: 0.5rem;
368-}
369-
370-.ml {
371- margin-left: 0.5rem;
372-}
373-
374-.my {
375- margin-top: 0.5rem;
376- margin-bottom: 0.5rem;
377-}
378-
379-.my-2 {
380- margin-top: 1rem;
381- margin-bottom: 1rem;
382-}
383-
384-.mx {
385- margin-left: 0.5rem;
386- margin-right: 0.5rem;
387-}
388-
389-.mx-2 {
390- margin-left: 1rem;
391- margin-right: 1rem;
392-}
393-
394-.justify-between {
395- justify-content: space-between;
396-}
397-
398-.flex-1 {
399- flex: 1;
400-}
401-
402-.layout-aside {
403- max-width: 50rem;
404-}
405-
406-.layout-aside aside {
407- width: 200px;
408-}
409-
410-.layout-aside img {
411- border-radius: 5px;
412-}
413-
414-#readme {
415- display: none;
416-}
417-
418-@media only screen and (max-width: 600px) {
419- body {
420- padding: 1rem;
421- }
422-
423- header {
424- margin: 0;
425- }
426-
427- .layout-aside main {
428- flex-direction: column;
429- }
430-
431- aside {
432- display: none;
433- }
434-
435- #readme {
436- display: block;
437- }
438-}
+1,
-1
1@@ -8,8 +8,8 @@
2
3 <meta name="keywords" content="blog, blogging, write, writing" />
4
5+ <link rel="stylesheet" href="https://pico.sh/smol.css" />
6 <link rel="stylesheet" href="/main.css" />
7- <link rel="stylesheet" href="/prose.css" />
8
9 {{template "meta" .}}
10 </head>
+7,
-397
1@@ -1,403 +1,21 @@
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- --main-hue: 250;
22- --white: #6a737d;
23- --code: #fff8d3;
24- --code-border: #f0d547;
25- --pre: #f6f8fa;
26- --bg-color: #fff;
27- --text-color: #24292f;
28- --link-color: #005cc5;
29- --visited: #6f42c1;
30- --blockquote: #005cc5;
31- --blockquote-bg: #fff;
32- --hover: #d73a49;
33- --grey: #ccc;
34- }
35-}
36-
37-@media (prefers-color-scheme: dark) {
38- :root {
39- --main-hue: 250;
40- --white: #f2f2f2;
41- --code: #414558;
42- --code-border: #252525;
43- --pre: #252525;
44- --bg-color: #282a36;
45- --text-color: #f2f2f2;
46- --link-color: #8be9fd;
47- --visited: #bd93f9;
48- --blockquote: #bd93f9;
49- --blockquote-bg: #414558;
50- --hover: #ff80bf;
51- --grey: #414558;
52- }
53-}
54-
55-html {
56- background-color: var(--bg-color);
57- color: var(--text-color);
58- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
59- Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
60- sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
61- -webkit-text-size-adjust: 100%;
62- tab-size: 4;
63-}
64-
65 body {
66- font-size: 16px;
67- line-height: 1.5;
68- margin: 0 auto;
69 max-width: 720px;
70 }
71
72-img {
73- max-width: 100%;
74- height: auto;
75-}
76-
77-b,
78-strong {
79- font-weight: bold;
80-}
81-
82-code,
83-kbd,
84-samp,
85-pre {
86- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
87- monospace;
88- font-size: 0.8rem;
89-}
90-
91-code,
92-kbd,
93-samp {
94- background-color: var(--code);
95- border: 1px solid var(--code-border);
96-}
97-
98-pre > code {
99- background-color: inherit;
100- padding: 0;
101- border: none;
102-}
103-
104-code {
105- border-radius: 0.3rem;
106- padding: 0.15rem 0.2rem 0.05rem;
107-}
108-
109-pre {
110- border-radius: 5px;
111- padding: 1rem;
112- margin: 1rem 0;
113+table {
114+ display: block;
115+ max-width: fit-content;
116+ margin: 0 auto;
117 overflow-x: auto;
118- background-color: var(--pre) !important;
119-}
120-
121-small {
122- font-size: 0.8rem;
123-}
124-
125-summary {
126- display: list-item;
127-}
128-
129-h1,
130-h2,
131-h3,
132-h4 {
133- border: 0;
134- font-style: normal;
135- font-weight: inherit;
136- font-size: inherit;
137- margin: 0;
138-}
139-
140-h2,
141-h3,
142-h4 {
143- border-bottom: 2px solid var(--grey);
144- padding-bottom: 15px;
145-}
146-
147-h1 a:visited,
148-h2 a:visited,
149-h3 a:visited,
150-h4 a:visited {
151- color: var(--grey);
152-}
153-
154-h1 a,
155-h2 a,
156-h3 a,
157-h4 a {
158- color: var(--grey);
159-}
160-
161-.no-underline {
162- border-bottom: 0px;
163- padding-bottom: 0;
164-}
165-
166-h1 > code {
167- font-size: inherit;
168-}
169-
170-h2 > code {
171- font-size: inherit;
172-}
173-
174-h3 > code {
175- font-size: inherit;
176-}
177-
178-hr {
179- color: inherit;
180- border: 0;
181- margin: 0;
182- height: 1px;
183- background: var(--grey);
184- margin: 2rem auto;
185- text-align: center;
186-}
187-
188-a {
189- text-decoration: underline;
190- color: var(--link-color);
191-}
192-
193-a:hover,
194-a:visited:hover {
195- color: var(--hover);
196-}
197-
198-a:visited {
199- color: var(--visited);
200-}
201-
202-a.link-grey {
203- text-decoration: underline;
204- color: var(--white);
205-}
206-
207-a.link-grey:visited {
208- color: var(--white);
209-}
210-
211-section {
212- margin-bottom: 1.4rem;
213-}
214-
215-section:last-child {
216- margin-bottom: 0;
217-}
218-
219-header {
220- margin: 1rem auto;
221-}
222-
223-p {
224- margin: 0.8rem 0;
225-}
226-
227-article {
228- overflow-wrap: break-word;
229-}
230-
231-blockquote {
232- border-left: 5px solid var(--blockquote);
233- background-color: var(--blockquote-bg);
234- padding: 0.8rem;
235- margin: 1rem 0;
236-}
237-
238-blockquote > p {
239- margin: 0;
240-}
241-
242-ul,
243-ol {
244- padding: 0 0 0 2rem;
245- list-style-position: outside;
246-}
247-
248-ul[style*="list-style-type: none;"] {
249- padding: 0;
250-}
251-
252-li {
253- margin: 0.5rem 0;
254-}
255-
256-li > pre {
257- padding: 0;
258-}
259-
260-footer {
261- text-align: center;
262- margin-bottom: 4rem;
263-}
264-
265-dt {
266- font-weight: bold;
267-}
268-
269-dd {
270- margin-left: 0;
271-}
272-
273-dd:not(:last-child) {
274- margin-bottom: 0.5rem;
275-}
276-
277-figure {
278- margin: 0;
279-}
280-
281-.btn-link {
282- border: 3px solid hsl(var(--main-hue), 92%, 66%);
283- background-color: hsl(var(--main-hue), 92%, 66%);
284- padding: 0.5rem 1rem;
285- border-radius: 0.25rem;
286- box-shadow: 0px 1px 2px 0px black;
287- color: var(--white);
288- text-decoration: none;
289- font-weight: bold;
290-}
291-
292-.btn-link:visited,
293-.btn-link:visited:hover,
294-.btn-link:hover {
295- color: var(--white);
296+ white-space: nowrap;
297+ border-spacing: 10px;
298+ border-collapse: separate;
299 }
300
301 .post-date {
302 width: 130px;
303 }
304
305-.text-grey {
306- color: var(--grey);
307-}
308-
309-.text-2xl {
310- font-size: 2.25rem;
311- line-height: 1.15;
312-}
313-
314-.text-xl {
315- font-size: 1.88rem;
316- line-height: 1.15;
317-}
318-
319-.text-lg {
320- font-size: 1.5rem;
321- line-height: 1.15;
322-}
323-
324-.text-md {
325- font-size: 1.13rem;
326- line-height: 1.15;
327-}
328-
329-.text-sm {
330- font-size: 0.875rem;
331-}
332-
333-.text-center {
334- text-align: center;
335-}
336-
337-.font-bold {
338- font-weight: bold;
339-}
340-
341-.font-italic {
342- font-style: italic;
343-}
344-
345-.inline {
346- display: inline;
347-}
348-
349-.inline-block {
350- display: inline-block;
351-}
352-
353-.flex {
354- display: flex;
355-}
356-
357-.items-center {
358- align-items: center;
359-}
360-
361-.m-0 {
362- margin: 0;
363-}
364-
365-.mt {
366- margin-top: 0.5rem;
367-}
368-
369-.mb {
370- margin-bottom: 0.5rem;
371-}
372-
373-.mr {
374- margin-right: 0.5rem;
375-}
376-
377-.ml {
378- margin-left: 0.5rem;
379-}
380-
381-.my {
382- margin-top: 0.5rem;
383- margin-bottom: 0.5rem;
384-}
385-
386-.my-2 {
387- margin-top: 1rem;
388- margin-bottom: 1rem;
389-}
390-
391-.mx {
392- margin-left: 0.5rem;
393- margin-right: 0.5rem;
394-}
395-
396-.mx-2 {
397- margin-left: 1rem;
398- margin-right: 1rem;
399-}
400-
401-.justify-between {
402- justify-content: space-between;
403-}
404-
405-.flex-1 {
406- flex: 1;
407-}
408-
409 .layout-aside {
410 max-width: 50rem;
411 }
412@@ -415,14 +33,6 @@ figure {
413 }
414
415 @media only screen and (max-width: 600px) {
416- body {
417- padding: 1rem;
418- }
419-
420- header {
421- margin: 0;
422- }
423-
424 .layout-aside main {
425 flex-direction: column;
426 }
+0,
-37
1@@ -1,37 +0,0 @@
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-.md h2,
14-.md h3,
15-.md h4 {
16- margin: 1.5rem 0;
17- font-weight: bold;
18- border-bottom: 2px solid var(--grey);
19- padding-bottom: 15px;
20-}
21-
22-.md h1 {
23- font-size: 1.88rem;
24- line-height: 1.15;
25-}
26-
27-.md h2 {
28- font-size: 1.5rem;
29- line-height: 1.15;
30-}
31-
32-.md h3 {
33- font-size: 1.13rem;
34-}
35-
36-.md h4 {
37- font-size: 1rem;
38-}
D
smol.css
+0,
-437
1@@ -1,437 +0,0 @@
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- --main-hue: 250;
22- --white: #6a737d;
23- --code: #fff8d3;
24- --code-border: #f0d547;
25- --pre: #f6f8fa;
26- --bg-color: #fff;
27- --text-color: #24292f;
28- --link-color: #005cc5;
29- --visited: #6f42c1;
30- --blockquote: #005cc5;
31- --blockquote-bg: #fff;
32- --hover: #d73a49;
33- --grey: #ccc;
34- }
35-}
36-
37-@media (prefers-color-scheme: dark) {
38- :root {
39- --main-hue: 250;
40- --white: #f2f2f2;
41- --code: #414558;
42- --code-border: #252525;
43- --pre: #252525;
44- --bg-color: #282a36;
45- --text-color: #f2f2f2;
46- --link-color: #8be9fd;
47- --visited: #bd93f9;
48- --blockquote: #bd93f9;
49- --blockquote-bg: #414558;
50- --hover: #ff80bf;
51- --grey: #414558;
52- }
53-}
54-
55-html {
56- background-color: var(--bg-color);
57- color: var(--text-color);
58- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
59- Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
60- sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
61- -webkit-text-size-adjust: 100%;
62- tab-size: 4;
63-}
64-
65-body {
66- font-size: 16px;
67- line-height: 1.5;
68- margin: 0 auto;
69- max-width: 720px;
70-}
71-
72-img {
73- max-width: 100%;
74- height: auto;
75-}
76-
77-b,
78-strong {
79- font-weight: bold;
80-}
81-
82-code,
83-kbd,
84-samp,
85-pre {
86- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
87- monospace;
88- font-size: 0.8rem;
89-}
90-
91-code,
92-kbd,
93-samp {
94- background-color: var(--code);
95- border: 1px solid var(--code-border);
96-}
97-
98-pre > code {
99- background-color: inherit;
100- padding: 0;
101- border: none;
102-}
103-
104-code {
105- border-radius: 0.3rem;
106- padding: 0.15rem 0.2rem 0.05rem;
107-}
108-
109-pre {
110- border-radius: 5px;
111- padding: 1rem;
112- margin: 1rem 0;
113- overflow-x: auto;
114- background-color: var(--pre) !important;
115-}
116-
117-small {
118- font-size: 0.8rem;
119-}
120-
121-summary {
122- display: list-item;
123-}
124-
125-h1,
126-h2,
127-h3,
128-h4 {
129- border: 0;
130- font-style: normal;
131- font-weight: inherit;
132- font-size: inherit;
133- margin: 0;
134-}
135-
136-h2,
137-h3,
138-h4 {
139- border-bottom: 2px solid var(--grey);
140- padding-bottom: 15px;
141-}
142-
143-h1 a:visited,
144-h2 a:visited,
145-h3 a:visited,
146-h4 a:visited {
147- color: var(--grey);
148-}
149-
150-h1 a,
151-h2 a,
152-h3 a,
153-h4 a {
154- color: var(--grey);
155-}
156-
157-.no-underline {
158- border-bottom: 0px;
159- padding-bottom: 0;
160-}
161-
162-h1 > code {
163- font-size: inherit;
164-}
165-
166-h2 > code {
167- font-size: inherit;
168-}
169-
170-h3 > code {
171- font-size: inherit;
172-}
173-
174-hr {
175- color: inherit;
176- border: 0;
177- margin: 0;
178- height: 1px;
179- background: var(--grey);
180- margin: 2rem auto;
181- text-align: center;
182-}
183-
184-a {
185- text-decoration: underline;
186- color: var(--link-color);
187-}
188-
189-a:hover,
190-a:visited:hover {
191- color: var(--hover);
192-}
193-
194-a:visited {
195- color: var(--visited);
196-}
197-
198-a.link-grey {
199- text-decoration: underline;
200- color: var(--white);
201-}
202-
203-a.link-grey:visited {
204- color: var(--white);
205-}
206-
207-section {
208- margin-bottom: 1.4rem;
209-}
210-
211-section:last-child {
212- margin-bottom: 0;
213-}
214-
215-header {
216- margin: 1rem auto;
217-}
218-
219-p {
220- margin: 0.8rem 0;
221-}
222-
223-article {
224- overflow-wrap: break-word;
225-}
226-
227-blockquote {
228- border-left: 5px solid var(--blockquote);
229- background-color: var(--blockquote-bg);
230- padding: 0.8rem;
231- margin: 1rem 0;
232-}
233-
234-blockquote > p {
235- margin: 0;
236-}
237-
238-ul,
239-ol {
240- padding: 0 0 0 2rem;
241- list-style-position: outside;
242-}
243-
244-ul[style*="list-style-type: none;"] {
245- padding: 0;
246-}
247-
248-li {
249- margin: 0.5rem 0;
250-}
251-
252-li > pre {
253- padding: 0;
254-}
255-
256-footer {
257- text-align: center;
258- margin-bottom: 4rem;
259-}
260-
261-dt {
262- font-weight: bold;
263-}
264-
265-dd {
266- margin-left: 0;
267-}
268-
269-dd:not(:last-child) {
270- margin-bottom: 0.5rem;
271-}
272-
273-figure {
274- margin: 0;
275-}
276-
277-.btn-link {
278- border: 3px solid hsl(var(--main-hue), 92%, 66%);
279- background-color: hsl(var(--main-hue), 92%, 66%);
280- padding: 0.5rem 1rem;
281- border-radius: 0.25rem;
282- box-shadow: 0px 1px 2px 0px black;
283- color: var(--white);
284- text-decoration: none;
285- font-weight: bold;
286-}
287-
288-.btn-link:visited,
289-.btn-link:visited:hover,
290-.btn-link:hover {
291- color: var(--white);
292-}
293-
294-.post-date {
295- width: 130px;
296-}
297-
298-.text-grey {
299- color: var(--grey);
300-}
301-
302-.text-2xl {
303- font-size: 2.25rem;
304- line-height: 1.15;
305-}
306-
307-.text-xl {
308- font-size: 1.88rem;
309- line-height: 1.15;
310-}
311-
312-.text-lg {
313- font-size: 1.5rem;
314- line-height: 1.15;
315-}
316-
317-.text-md {
318- font-size: 1.13rem;
319- line-height: 1.15;
320-}
321-
322-.text-sm {
323- font-size: 0.875rem;
324-}
325-
326-.text-center {
327- text-align: center;
328-}
329-
330-.font-bold {
331- font-weight: bold;
332-}
333-
334-.font-italic {
335- font-style: italic;
336-}
337-
338-.inline {
339- display: inline;
340-}
341-
342-.inline-block {
343- display: inline-block;
344-}
345-
346-.flex {
347- display: flex;
348-}
349-
350-.items-center {
351- align-items: center;
352-}
353-
354-.m-0 {
355- margin: 0;
356-}
357-
358-.mt {
359- margin-top: 0.5rem;
360-}
361-
362-.mb {
363- margin-bottom: 0.5rem;
364-}
365-
366-.mr {
367- margin-right: 0.5rem;
368-}
369-
370-.ml {
371- margin-left: 0.5rem;
372-}
373-
374-.my {
375- margin-top: 0.5rem;
376- margin-bottom: 0.5rem;
377-}
378-
379-.my-2 {
380- margin-top: 1rem;
381- margin-bottom: 1rem;
382-}
383-
384-.mx {
385- margin-left: 0.5rem;
386- margin-right: 0.5rem;
387-}
388-
389-.mx-2 {
390- margin-left: 1rem;
391- margin-right: 1rem;
392-}
393-
394-.justify-between {
395- justify-content: space-between;
396-}
397-
398-.flex-1 {
399- flex: 1;
400-}
401-
402-.layout-aside {
403- max-width: 50rem;
404-}
405-
406-.layout-aside aside {
407- width: 200px;
408-}
409-
410-.layout-aside img {
411- border-radius: 5px;
412-}
413-
414-#readme {
415- display: none;
416-}
417-
418-@media only screen and (max-width: 600px) {
419- body {
420- padding: 1rem;
421- }
422-
423- header {
424- margin: 0;
425- }
426-
427- .layout-aside main {
428- flex-direction: column;
429- }
430-
431- aside {
432- display: none;
433- }
434-
435- #readme {
436- display: block;
437- }
438-}