pico

refactor(pgs): use httputil rev proxy to external service rss
created pr with 24.1 on 2024-09-03T02:15:28Z · by c8ef7d19
cmds
checkout latest patchset: 
ssh pr.pico.sh print 24 | git am -3
checkout any patchset in a patch request: 
ssh pr.pico.sh print 24.[rev] | git am -3
add changes to patch request: 
git format-patch main --stdout | ssh pr.pico.sh pr add 24

Patchset 24.1 on 2024-09-03T02:15:28Z · commit feaf5f9

→ style(prose): update smol.css
Eric Bower 2024-09-03T02:14:52Z
style(prose): update smol.css
Eric Bower 2024-09-03T02:14:52Z
Semantic diff summary
0 added, 0 modified, 0 signature changed, 0 removed across 0 analyzed files (6 files skipped: unsupported file type)
+140 -158 pastes/public/smol.css #
......@@ -15,9 +15,13 @@
1515 box-shadow: none;
1616 }
1717
18+:root {
19+ --line-height: 1.3rem;
20+ --grid-height: 0.65rem;
21+}
22+
1823 @media (prefers-color-scheme: light) {
1924 :root {
20- --main-hue: 250;
2125 --white: #2e3f53;
2226 --white-light: #cfe0f4;
2327 --white-dark: #6c6a6a;
......@@ -32,13 +36,11 @@
3236 --hover: #c11e7a;
3337 --grey: #ccc;
3438 --grey-light: #6a708e;
35- --shadow: #e8e8e8;
3639 }
3740 }
3841
3942 @media (prefers-color-scheme: dark) {
4043 :root {
41- --main-hue: 250;
4244 --white: #f2f2f2;
4345 --white-light: #f2f2f2;
4446 --white-dark: #e8e8e8;
......@@ -53,15 +55,14 @@
5355 --hover: #ff80bf;
5456 --grey: #414558;
5557 --grey-light: #6a708e;
56- --shadow: #252525;
5758 }
5859 }
5960
6061 html {
6162 background-color: var(--bg-color);
6263 color: var(--text-color);
63- font-size: 18px;
64- line-height: 1.5;
64+ font-size: 16px;
65+ line-height: var(--line-height);
6566 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
6667 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
6768 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
......@@ -89,8 +90,7 @@ code,
8990 kbd,
9091 samp,
9192 pre {
92- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
93- monospace;
93+ font-family: monospace;
9494 }
9595
9696 code,
......@@ -103,19 +103,19 @@ pre > code {
103103 background-color: inherit;
104104 padding: 0;
105105 border: none;
106+ border-radius: 0;
106107 }
107108
108109 code {
109110 font-size: 90%;
110111 border-radius: 0.3rem;
111- padding: 0.1rem 0.3rem;
112+ padding: 0.025rem 0.3rem;
112113 }
113114
114115 pre {
115- font-size: 14px;
116- border-radius: 5px;
117- padding: 1rem;
118- margin: 1rem 0;
116+ font-size: 0.8rem;
117+ border-radius: 1px;
118+ padding: var(--line-height);
119119 overflow-x: auto;
120120 background-color: var(--pre) !important;
121121 }
......@@ -124,6 +124,16 @@ small {
124124 font-size: 0.8rem;
125125 }
126126
127+details {
128+ border: 2px solid var(--grey-light);
129+ padding: calc(var(--line-height) - 2px) 1ch;
130+ margin-bottom: var(--line-height);
131+}
132+
133+details[open] summary {
134+ margin-bottom: var(--line-height);
135+}
136+
127137 summary {
128138 display: list-item;
129139 cursor: pointer;
......@@ -134,7 +144,7 @@ h2,
134144 h3,
135145 h4 {
136146 margin: 0;
137- padding: 0.5rem 0 0 0;
147+ padding: 0;
138148 border: 0;
139149 font-style: normal;
140150 font-weight: inherit;
......@@ -149,11 +159,9 @@ path {
149159 hr {
150160 color: inherit;
151161 border: 0;
152- margin: 0;
153162 height: 2px;
154163 background: var(--grey);
155- margin: 1rem auto;
156- text-align: center;
164+ margin: calc(var(--grid-height) - 2px) auto;
157165 }
158166
159167 a {
......@@ -164,22 +172,12 @@ a {
164172 a:hover,
165173 a:visited:hover {
166174 text-decoration: underline;
167- color: var(--hover);
168175 }
169176
170177 a:visited {
171178 color: var(--visited);
172179 }
173180
174-a.link-grey {
175- text-decoration: underline;
176- color: var(--white);
177-}
178-
179-a.link-grey:visited {
180- color: var(--white);
181-}
182-
183181 section {
184182 margin-bottom: 1.4rem;
185183 }
......@@ -193,7 +191,8 @@ header {
193191 }
194192
195193 p {
196- margin: 0.5rem 0;
194+ margin-top: var(--line-height);
195+ margin-bottom: var(--line-height);
197196 }
198197
199198 article {
......@@ -203,8 +202,8 @@ article {
203202 blockquote {
204203 border-left: 5px solid var(--blockquote);
205204 background-color: var(--blockquote-bg);
206- padding: 0.5rem 0.75rem;
207- margin: 0.5rem 0;
205+ padding: var(--grid-height);
206+ margin: var(--line-height) 0;
208207 }
209208
210209 blockquote > p {
......@@ -217,16 +216,28 @@ blockquote code {
217216
218217 ul,
219218 ol {
220- padding: 0 0 0 1rem;
221- list-style-position: outside;
219+ padding: 0 0 0 var(--line-height);
220+ list-style-position: inside;
221+ list-style-type: square;
222+ margin: var(--line-height) 0;
222223 }
223224
224225 ul[style*="list-style-type: none;"] {
225226 padding: 0;
226227 }
227228
229+ol ul, ol ol, ul ol, ul ul {
230+ padding: 0 0 0 3ch;
231+ margin: 0;
232+}
233+
228234 li {
229- margin: 0.5rem 0;
235+ margin: 0;
236+ padding: 0;
237+}
238+
239+li::marker {
240+ line-height: 0;
230241 }
231242
232243 li > pre {
......@@ -235,7 +246,7 @@ li > pre {
235246
236247 footer {
237248 text-align: center;
238- margin-bottom: 4rem;
249+ margin-bottom: calc(var(--line-height) * 3);
239250 }
240251
241252 dt {
......@@ -254,6 +265,10 @@ figure {
254265 margin: 0;
255266 }
256267
268+#toc {
269+ margin-top: var(--line-height);
270+}
271+
257272 .container {
258273 max-width: 50em;
259274 width: 100%;
......@@ -272,21 +287,7 @@ figure {
272287 }
273288
274289 .mono {
275- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
276- monospace;
277-}
278-
279-.link-alt-adj,
280-.link-alt-adj:visited,
281-.link-alt-adj:visited:hover,
282-.link-alt-adj:hover {
283- color: var(--link-color);
284- text-decoration: none;
285-}
286-
287-.link-alt-adj:visited:hover,
288-.link-alt-adj:hover {
289- text-decoration: underline;
290+ font-family: monospace;
290291 }
291292
292293 .link-alt-hover,
......@@ -315,36 +316,28 @@ figure {
315316 text-decoration: underline;
316317 }
317318
318-.text-3xl {
319- font-size: 2.5rem;
319+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
320+ text-transform: none;
320321 }
321322
322323 .text-2xl {
323- font-size: 1.9rem;
324- line-height: 1.15;
325-}
326-
327-.text-xl {
328- font-size: 1.55rem;
329- line-height: 1.15;
330-}
331-
332-.text-lg {
333- font-size: 1.35rem;
334- line-height: 1.15;
324+ font-size: var(--line-height);
325+ font-weight: bold;
326+ line-height: var(--line-height);
327+ margin-bottom: var(--grid-height);
328+ text-transform: uppercase;
335329 }
336330
337-.text-md {
338- font-size: 1.15rem;
339- line-height: 1.15;
331+.text-xl, .text-lg, .text-md {
332+ font-size: 1rem;
333+ font-weight: bold;
334+ line-height: var(--line-height);
335+ margin-bottom: var(--grid-height);
336+ text-transform: uppercase;
340337 }
341338
342339 .text-sm {
343- font-size: 0.875rem;
344-}
345-
346-.text-xs {
347- font-size: 0.775rem;
340+ font-size: 0.8rem;
348341 }
349342
350343 .cursor-pointer {
......@@ -372,19 +365,14 @@ figure {
372365 }
373366
374367 .text-underline {
375- border-bottom: 3px solid var(--text-color);
376- padding-bottom: 3px;
368+ text-decoration: underline;
369+ text-decoration-thickness: 2px;
377370 }
378371
379372 .text-hdr {
380373 color: var(--hover);
381374 }
382375
383-.text-underline-hdr {
384- border-bottom: 3px solid var(--hover);
385- padding-bottom: 3px;
386-}
387-
388376 .font-bold {
389377 font-weight: bold;
390378 }
......@@ -429,40 +417,32 @@ figure {
429417 margin: 0;
430418 }
431419
420+.mt-0 {
421+ margin-top: 0;
422+}
423+
432424 .mt {
433- margin-top: 0.5rem;
425+ margin-top: var(--grid-height);
434426 }
435427
436428 .mt-2 {
437- margin-top: 1rem;
429+ margin-top: var(--line-height);
438430 }
439431
440432 .mt-4 {
441- margin-top: 2rem;
442-}
443-
444-.mt-8 {
445- margin-top: 4rem;
433+ margin-top: calc(var(--line-height) * 2);
446434 }
447435
448436 .mb {
449- margin-bottom: 0.5rem;
437+ margin-bottom: var(--grid-height);
450438 }
451439
452440 .mb-2 {
453- margin-bottom: 1rem;
441+ margin-bottom: var(--line-height);
454442 }
455443
456444 .mb-4 {
457- margin-bottom: 2rem;
458-}
459-
460-.mb-8 {
461- margin-bottom: 4rem;
462-}
463-
464-.mb-16 {
465- margin-bottom: 8rem;
445+ margin-bottom: calc(var(--line-height) * 2);
466446 }
467447
468448 .mr {
......@@ -482,23 +462,18 @@ figure {
482462 }
483463
484464 .my {
485- margin-top: 0.5rem;
486- margin-bottom: 0.5rem;
465+ margin-top: var(--grid-height);
466+ margin-bottom: var(--grid-height);
487467 }
488468
489469 .my-2 {
490- margin-top: 1rem;
491- margin-bottom: 1rem;
470+ margin-top: var(--line-height);
471+ margin-bottom: var(--line-height);
492472 }
493473
494474 .my-4 {
495- margin-top: 2rem;
496- margin-bottom: 2rem;
497-}
498-
499-.my-8 {
500- margin-top: 4rem;
501- margin-bottom: 4rem;
475+ margin-top: calc(var(--line-height) * 2);
476+ margin-bottom: calc(var(--line-height) * 2);
502477 }
503478
504479 .mx {
......@@ -512,11 +487,11 @@ figure {
512487 }
513488
514489 .m-1 {
515- margin: 0.5rem;
490+ margin: var(--grid-height);
516491 }
517492
518493 .p-1 {
519- padding: 0.5rem;
494+ padding: var(--grid-height);
520495 }
521496
522497 .p-0 {
......@@ -534,23 +509,18 @@ figure {
534509 }
535510
536511 .py {
537- padding-top: 0.5rem;
538- padding-bottom: 0.5rem;
512+ padding-top: var(--grid-height);
513+ padding-bottom: var(--grid-height);
539514 }
540515
541516 .py-2 {
542- padding-top: 1rem;
543- padding-bottom: 1rem;
517+ padding-top: var(--line-height);
518+ padding-bottom: var(--line-height);
544519 }
545520
546521 .py-4 {
547- padding-top: 2rem;
548- padding-bottom: 2rem;
549-}
550-
551-.py-8 {
552- padding-top: 4rem;
553- padding-bottom: 4rem;
522+ padding-top: calc(var(--line-height) * 2);
523+ padding-bottom: calc(var(--line-height) * 2);
554524 }
555525
556526 .justify-between {
......@@ -562,28 +532,28 @@ figure {
562532 }
563533
564534 .gap {
565- gap: 0.5rem;
535+ gap: var(--grid-height);
566536 }
567537
568538 .gap-2 {
569- gap: 1rem;
539+ gap: var(--line-height);
570540 }
571541
572542 .group {
573543 display: flex;
574544 flex-direction: column;
575- gap: 0.5rem;
545+ gap: var(--grid-height);
576546 }
577547
578548 .group-2 {
579549 display: flex;
580550 flex-direction: column;
581- gap: 1rem;
551+ gap: var(--line-height);
582552 }
583553
584554 .group-h {
585555 display: flex;
586- gap: 0.5rem;
556+ gap: var(--grid-height);
587557 align-items: center;
588558 }
589559
......@@ -622,7 +592,8 @@ figure {
622592 .md h3,
623593 .md h4 {
624594 padding: 0;
625- margin: 1.5rem 0 0.9rem 0;
595+ margin: 0;
596+ /* margin: 1.5rem 0 0.9rem 0; */
626597 font-weight: bold;
627598 }
628599
......@@ -634,26 +605,24 @@ figure {
634605 text-decoration: none;
635606 }
636607
637-.md h1 {
638- font-size: 1.6rem;
639- line-height: 1.15;
640- border-bottom: 2px solid var(--grey);
641- padding-bottom: 0.7rem;
642-}
643-
644-.md h2 {
645- font-size: 1.3rem;
646- line-height: 1.15;
647- color: var(--white-dark);
608+h1 code, h2 code, h3 code, h4 code {
609+ text-transform: none;
648610 }
649611
650-.md h3 {
651- font-size: 1.2rem;
652- color: var(--white-dark);
612+.md h1 {
613+ font-size: 1rem;
614+ line-height: var(--line-height);
615+ margin-top: calc(var(--line-height) * 2);
616+ margin-bottom: var(--grid-height);
617+ text-transform: uppercase;
653618 }
654619
655-.md h4 {
620+.md h2, .md h3, .md h4 {
656621 font-size: 1rem;
622+ line-height: var(--line-height);
623+ margin-top: calc(var(--line-height) * 2);
624+ margin-bottom: var(--line-height);
625+ text-transform: uppercase;
657626 color: var(--white-dark);
658627 }
659628
......@@ -669,8 +638,8 @@ figure {
669638 border: 3px solid #FF79C6;
670639 padding: 8px 10px 10px 10px;
671640 border-radius: 10px;
672- box-shadow: 0px 5px 0px 0px var(--shadow);
673641 background-size: 100%;
642+ margin: 0:
674643 -webkit-background-clip: text;
675644 -moz-background-clip: text;
676645 -webkit-text-fill-color: transparent;
......@@ -689,47 +658,40 @@ figure {
689658 .btn-link:visited {
690659 border: 2px solid var(--link-color);
691660 color: var(--link-color);
692- padding: 0.4rem 1rem;
661+ padding: var(--grid-height) 1rem;
693662 text-decoration: none;
694663 font-weight: bold;
695664 display: inline-block;
696665 }
697666
698-.btn-link:visited:hover,
699-.btn-link:hover {
700- border: 2px solid var(--hover);
701-}
702-
703-.btn-link-alt,
704-.btn-link-alt:visited {
705- border: 2px solid var(--white);
706- color: var(--white);
707-}
708-
709667 .box {
710668 border: 2px solid var(--grey-light);
711- padding: 0.5rem 0.75rem;
669+ padding: var(--line-height);
712670 }
713671
714672 .box-sm {
715673 border: 2px solid var(--grey-light);
716- padding: 0.15rem 0.35rem;
674+ padding: var(--grid-height);
717675 }
718676
719677 .box-alert {
720678 border: 2px solid var(--hover);
721- padding: 0.5rem 0.75rem;
679+ padding: var(--line-height);
722680 }
723681
724682 .box-sm-alert {
725683 border: 2px solid var(--hover);
726- padding: 0.15rem 0.35rem;
684+ padding: var(--grid-height);
727685 }
728686
729687 .list-none {
730688 list-style-type: none;
731689 }
732690
691+.list-square {
692+ list-style-type: square;
693+}
694+
733695 .list-disc {
734696 list-style-type: disc;
735697 }
......@@ -766,3 +728,23 @@ figure {
766728 flex-direction: column;
767729 }
768730 }
731+
732+#debug {
733+ position: relative;
734+}
735+
736+#debug .debug-grid {
737+ width: 100%;
738+ height: 100%;
739+ position: absolute;
740+ top: 0;
741+ left: 0;
742+ right: 0;
743+ bottom: 0;
744+ z-index: -1;
745+ background-image:
746+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
747+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
748+ background-size: 1ch var(--grid-height);
749+ margin: 0;
750+}
+3 -3 prose/html/blog-aside.partial.tmpl #
......@@ -2,7 +2,7 @@
22 <main class="flex">
33 <section class="flex-1 mr">
44 <div>
5- <h1 class="text-2xl font-bold">{{.Header.Title}}</h1>
5+ <h1 class="text-2xl font-bold mt-2">{{.Header.Title}}</h1>
66 {{if .Header.Bio}}<span>{{.Header.Bio}}</span>{{end}}
77 </div>
88
......@@ -25,12 +25,12 @@
2525 <a href={{.URL}}>clear filters</a>
2626 {{end}}
2727
28- <div class="posts group mt">
28+ <div class="posts group mt-2">
2929 {{range .Posts}}
3030 <article>
3131 <div class="flex items-center">
3232 <time datetime="{{.PublishAtISO}}" class="text-sm post-date">{{.PublishAt}}</time>
33- <span class="text-md flex-1"><a href="{{.URL}}">{{.Title}}</a></span>
33+ <span class="text-md flex-1 m-0"><a href="{{.URL}}">{{.Title}}</a></span>
3434 </div>
3535 </article>
3636 {{end}}
+4 -4 prose/html/blog-default.partial.tmpl #
......@@ -1,7 +1,7 @@
11 {{define "blog-default"}}
22 <header class="text-center">
3- <h1 class="text-2xl font-bold">{{.Header.Title}}</h1>
4- {{if .Header.Bio}}<p class="text-lg">{{.Header.Bio}}</p>{{end}}
3+ <h1 class="text-2xl font-bold mt-2">{{.Header.Title}}</h1>
4+ {{if .Header.Bio}}<span>{{.Header.Bio}}</span>{{end}}
55 <nav>
66 {{range .Header.Nav}}
77 <a href="{{.URL}}" class="text-lg">{{.Text}}</a> |
......@@ -20,7 +20,7 @@
2020 </section>
2121 {{end}}
2222
23- <section class="posts group mt">
23+ <section class="posts group mt-2">
2424 {{if .HasFilter}}
2525 <a href={{.URL}}>clear filters</a>
2626 {{end}}
......@@ -28,7 +28,7 @@
2828 <article>
2929 <div class="flex items-center">
3030 <time datetime="{{.PublishAtISO}}" class="text-sm post-date">{{.PublishAt}}</time>
31- <span class="text-md flex-1"><a href="{{.URL}}">{{.Title}}</a></span>
31+ <span class="text-md flex-1 m-0"><a href="{{.URL}}">{{.Title}}</a></span>
3232 </div>
3333 </article>
3434 {{end}}
+4 -2 prose/html/post.page.tmpl #
......@@ -53,13 +53,15 @@
5353 {{if .Unlisted}} <code>unlisted</code>{{end}}
5454 <time datetime="{{.PublishAtISO}}">{{.PublishAt}}</time>
5555 <span>&middot;<span>
56- <a href="{{.BlogURL}}">{{.BlogName}}</a></p>
57- {{if .Description}}<blockquote class="font-italic">{{.Description}}</blockquote>{{end}}
56+ <a href="{{.BlogURL}}">{{.BlogName}}</a>
57+ </p>
58+ {{if .Description}}<blockquote>{{.Description}}</blockquote>{{end}}
5859 <div class="tags">
5960 {{range .Tags}}
6061 <a class="tag" href="{{$.BlogURL}}?tag={{.}}">#{{.}}</a>
6162 {{end}}
6263 </div>
64+ <hr />
6365 </header>
6466 <main>
6567 {{if .Diff}}
+4 -0 prose/public/main.css #
......@@ -12,6 +12,10 @@ table {
1212 border-collapse: separate;
1313 }
1414
15+header blockquote {
16+ margin: var(--grid-height) 0;
17+}
18+
1519 .post-date {
1620 width: 110px;
1721 }
+140 -158 prose/public/smol.css #
......@@ -15,9 +15,13 @@
1515 box-shadow: none;
1616 }
1717
18+:root {
19+ --line-height: 1.3rem;
20+ --grid-height: 0.65rem;
21+}
22+
1823 @media (prefers-color-scheme: light) {
1924 :root {
20- --main-hue: 250;
2125 --white: #2e3f53;
2226 --white-light: #cfe0f4;
2327 --white-dark: #6c6a6a;
......@@ -32,13 +36,11 @@
3236 --hover: #c11e7a;
3337 --grey: #ccc;
3438 --grey-light: #6a708e;
35- --shadow: #e8e8e8;
3639 }
3740 }
3841
3942 @media (prefers-color-scheme: dark) {
4043 :root {
41- --main-hue: 250;
4244 --white: #f2f2f2;
4345 --white-light: #f2f2f2;
4446 --white-dark: #e8e8e8;
......@@ -53,15 +55,14 @@
5355 --hover: #ff80bf;
5456 --grey: #414558;
5557 --grey-light: #6a708e;
56- --shadow: #252525;
5758 }
5859 }
5960
6061 html {
6162 background-color: var(--bg-color);
6263 color: var(--text-color);
63- font-size: 18px;
64- line-height: 1.5;
64+ font-size: 16px;
65+ line-height: var(--line-height);
6566 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
6667 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
6768 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
......@@ -89,8 +90,7 @@ code,
8990 kbd,
9091 samp,
9192 pre {
92- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
93- monospace;
93+ font-family: monospace;
9494 }
9595
9696 code,
......@@ -103,19 +103,19 @@ pre > code {
103103 background-color: inherit;
104104 padding: 0;
105105 border: none;
106+ border-radius: 0;
106107 }
107108
108109 code {
109110 font-size: 90%;
110111 border-radius: 0.3rem;
111- padding: 0.1rem 0.3rem;
112+ padding: 0.025rem 0.3rem;
112113 }
113114
114115 pre {
115- font-size: 14px;
116- border-radius: 5px;
117- padding: 1rem;
118- margin: 1rem 0;
116+ font-size: 0.8rem;
117+ border-radius: 1px;
118+ padding: var(--line-height);
119119 overflow-x: auto;
120120 background-color: var(--pre) !important;
121121 }
......@@ -124,6 +124,16 @@ small {
124124 font-size: 0.8rem;
125125 }
126126
127+details {
128+ border: 2px solid var(--grey-light);
129+ padding: calc(var(--line-height) - 2px) 1ch;
130+ margin-bottom: var(--line-height);
131+}
132+
133+details[open] summary {
134+ margin-bottom: var(--line-height);
135+}
136+
127137 summary {
128138 display: list-item;
129139 cursor: pointer;
......@@ -134,7 +144,7 @@ h2,
134144 h3,
135145 h4 {
136146 margin: 0;
137- padding: 0.5rem 0 0 0;
147+ padding: 0;
138148 border: 0;
139149 font-style: normal;
140150 font-weight: inherit;
......@@ -149,11 +159,9 @@ path {
149159 hr {
150160 color: inherit;
151161 border: 0;
152- margin: 0;
153162 height: 2px;
154163 background: var(--grey);
155- margin: 1rem auto;
156- text-align: center;
164+ margin: calc(var(--grid-height) - 2px) auto;
157165 }
158166
159167 a {
......@@ -164,22 +172,12 @@ a {
164172 a:hover,
165173 a:visited:hover {
166174 text-decoration: underline;
167- color: var(--hover);
168175 }
169176
170177 a:visited {
171178 color: var(--visited);
172179 }
173180
174-a.link-grey {
175- text-decoration: underline;
176- color: var(--white);
177-}
178-
179-a.link-grey:visited {
180- color: var(--white);
181-}
182-
183181 section {
184182 margin-bottom: 1.4rem;
185183 }
......@@ -193,7 +191,8 @@ header {
193191 }
194192
195193 p {
196- margin: 0.5rem 0;
194+ margin-top: var(--line-height);
195+ margin-bottom: var(--line-height);
197196 }
198197
199198 article {
......@@ -203,8 +202,8 @@ article {
203202 blockquote {
204203 border-left: 5px solid var(--blockquote);
205204 background-color: var(--blockquote-bg);
206- padding: 0.5rem 0.75rem;
207- margin: 0.5rem 0;
205+ padding: var(--grid-height);
206+ margin: var(--line-height) 0;
208207 }
209208
210209 blockquote > p {
......@@ -217,16 +216,28 @@ blockquote code {
217216
218217 ul,
219218 ol {
220- padding: 0 0 0 1rem;
221- list-style-position: outside;
219+ padding: 0 0 0 var(--line-height);
220+ list-style-position: inside;
221+ list-style-type: square;
222+ margin: var(--line-height) 0;
222223 }
223224
224225 ul[style*="list-style-type: none;"] {
225226 padding: 0;
226227 }
227228
229+ol ul, ol ol, ul ol, ul ul {
230+ padding: 0 0 0 3ch;
231+ margin: 0;
232+}
233+
228234 li {
229- margin: 0.5rem 0;
235+ margin: 0;
236+ padding: 0;
237+}
238+
239+li::marker {
240+ line-height: 0;
230241 }
231242
232243 li > pre {
......@@ -235,7 +246,7 @@ li > pre {
235246
236247 footer {
237248 text-align: center;
238- margin-bottom: 4rem;
249+ margin-bottom: calc(var(--line-height) * 3);
239250 }
240251
241252 dt {
......@@ -254,6 +265,10 @@ figure {
254265 margin: 0;
255266 }
256267
268+#toc {
269+ margin-top: var(--line-height);
270+}
271+
257272 .container {
258273 max-width: 50em;
259274 width: 100%;
......@@ -272,21 +287,7 @@ figure {
272287 }
273288
274289 .mono {
275- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
276- monospace;
277-}
278-
279-.link-alt-adj,
280-.link-alt-adj:visited,
281-.link-alt-adj:visited:hover,
282-.link-alt-adj:hover {
283- color: var(--link-color);
284- text-decoration: none;
285-}
286-
287-.link-alt-adj:visited:hover,
288-.link-alt-adj:hover {
289- text-decoration: underline;
290+ font-family: monospace;
290291 }
291292
292293 .link-alt-hover,
......@@ -315,36 +316,28 @@ figure {
315316 text-decoration: underline;
316317 }
317318
318-.text-3xl {
319- font-size: 2.5rem;
319+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
320+ text-transform: none;
320321 }
321322
322323 .text-2xl {
323- font-size: 1.9rem;
324- line-height: 1.15;
325-}
326-
327-.text-xl {
328- font-size: 1.55rem;
329- line-height: 1.15;
330-}
331-
332-.text-lg {
333- font-size: 1.35rem;
334- line-height: 1.15;
324+ font-size: var(--line-height);
325+ font-weight: bold;
326+ line-height: var(--line-height);
327+ margin-bottom: var(--grid-height);
328+ text-transform: uppercase;
335329 }
336330
337-.text-md {
338- font-size: 1.15rem;
339- line-height: 1.15;
331+.text-xl, .text-lg, .text-md {
332+ font-size: 1rem;
333+ font-weight: bold;
334+ line-height: var(--line-height);
335+ margin-bottom: var(--grid-height);
336+ text-transform: uppercase;
340337 }
341338
342339 .text-sm {
343- font-size: 0.875rem;
344-}
345-
346-.text-xs {
347- font-size: 0.775rem;
340+ font-size: 0.8rem;
348341 }
349342
350343 .cursor-pointer {
......@@ -372,19 +365,14 @@ figure {
372365 }
373366
374367 .text-underline {
375- border-bottom: 3px solid var(--text-color);
376- padding-bottom: 3px;
368+ text-decoration: underline;
369+ text-decoration-thickness: 2px;
377370 }
378371
379372 .text-hdr {
380373 color: var(--hover);
381374 }
382375
383-.text-underline-hdr {
384- border-bottom: 3px solid var(--hover);
385- padding-bottom: 3px;
386-}
387-
388376 .font-bold {
389377 font-weight: bold;
390378 }
......@@ -429,40 +417,32 @@ figure {
429417 margin: 0;
430418 }
431419
420+.mt-0 {
421+ margin-top: 0;
422+}
423+
432424 .mt {
433- margin-top: 0.5rem;
425+ margin-top: var(--grid-height);
434426 }
435427
436428 .mt-2 {
437- margin-top: 1rem;
429+ margin-top: var(--line-height);
438430 }
439431
440432 .mt-4 {
441- margin-top: 2rem;
442-}
443-
444-.mt-8 {
445- margin-top: 4rem;
433+ margin-top: calc(var(--line-height) * 2);
446434 }
447435
448436 .mb {
449- margin-bottom: 0.5rem;
437+ margin-bottom: var(--grid-height);
450438 }
451439
452440 .mb-2 {
453- margin-bottom: 1rem;
441+ margin-bottom: var(--line-height);
454442 }
455443
456444 .mb-4 {
457- margin-bottom: 2rem;
458-}
459-
460-.mb-8 {
461- margin-bottom: 4rem;
462-}
463-
464-.mb-16 {
465- margin-bottom: 8rem;
445+ margin-bottom: calc(var(--line-height) * 2);
466446 }
467447
468448 .mr {
......@@ -482,23 +462,18 @@ figure {
482462 }
483463
484464 .my {
485- margin-top: 0.5rem;
486- margin-bottom: 0.5rem;
465+ margin-top: var(--grid-height);
466+ margin-bottom: var(--grid-height);
487467 }
488468
489469 .my-2 {
490- margin-top: 1rem;
491- margin-bottom: 1rem;
470+ margin-top: var(--line-height);
471+ margin-bottom: var(--line-height);
492472 }
493473
494474 .my-4 {
495- margin-top: 2rem;
496- margin-bottom: 2rem;
497-}
498-
499-.my-8 {
500- margin-top: 4rem;
501- margin-bottom: 4rem;
475+ margin-top: calc(var(--line-height) * 2);
476+ margin-bottom: calc(var(--line-height) * 2);
502477 }
503478
504479 .mx {
......@@ -512,11 +487,11 @@ figure {
512487 }
513488
514489 .m-1 {
515- margin: 0.5rem;
490+ margin: var(--grid-height);
516491 }
517492
518493 .p-1 {
519- padding: 0.5rem;
494+ padding: var(--grid-height);
520495 }
521496
522497 .p-0 {
......@@ -534,23 +509,18 @@ figure {
534509 }
535510
536511 .py {
537- padding-top: 0.5rem;
538- padding-bottom: 0.5rem;
512+ padding-top: var(--grid-height);
513+ padding-bottom: var(--grid-height);
539514 }
540515
541516 .py-2 {
542- padding-top: 1rem;
543- padding-bottom: 1rem;
517+ padding-top: var(--line-height);
518+ padding-bottom: var(--line-height);
544519 }
545520
546521 .py-4 {
547- padding-top: 2rem;
548- padding-bottom: 2rem;
549-}
550-
551-.py-8 {
552- padding-top: 4rem;
553- padding-bottom: 4rem;
522+ padding-top: calc(var(--line-height) * 2);
523+ padding-bottom: calc(var(--line-height) * 2);
554524 }
555525
556526 .justify-between {
......@@ -562,28 +532,28 @@ figure {
562532 }
563533
564534 .gap {
565- gap: 0.5rem;
535+ gap: var(--grid-height);
566536 }
567537
568538 .gap-2 {
569- gap: 1rem;
539+ gap: var(--line-height);
570540 }
571541
572542 .group {
573543 display: flex;
574544 flex-direction: column;
575- gap: 0.5rem;
545+ gap: var(--grid-height);
576546 }
577547
578548 .group-2 {
579549 display: flex;
580550 flex-direction: column;
581- gap: 1rem;
551+ gap: var(--line-height);
582552 }
583553
584554 .group-h {
585555 display: flex;
586- gap: 0.5rem;
556+ gap: var(--grid-height);
587557 align-items: center;
588558 }
589559
......@@ -622,7 +592,8 @@ figure {
622592 .md h3,
623593 .md h4 {
624594 padding: 0;
625- margin: 1.5rem 0 0.9rem 0;
595+ margin: 0;
596+ /* margin: 1.5rem 0 0.9rem 0; */
626597 font-weight: bold;
627598 }
628599
......@@ -634,26 +605,24 @@ figure {
634605 text-decoration: none;
635606 }
636607
637-.md h1 {
638- font-size: 1.6rem;
639- line-height: 1.15;
640- border-bottom: 2px solid var(--grey);
641- padding-bottom: 0.7rem;
642-}
643-
644-.md h2 {
645- font-size: 1.3rem;
646- line-height: 1.15;
647- color: var(--white-dark);
608+h1 code, h2 code, h3 code, h4 code {
609+ text-transform: none;
648610 }
649611
650-.md h3 {
651- font-size: 1.2rem;
652- color: var(--white-dark);
612+.md h1 {
613+ font-size: 1rem;
614+ line-height: var(--line-height);
615+ margin-top: calc(var(--line-height) * 2);
616+ margin-bottom: var(--grid-height);
617+ text-transform: uppercase;
653618 }
654619
655-.md h4 {
620+.md h2, .md h3, .md h4 {
656621 font-size: 1rem;
622+ line-height: var(--line-height);
623+ margin-top: calc(var(--line-height) * 2);
624+ margin-bottom: var(--line-height);
625+ text-transform: uppercase;
657626 color: var(--white-dark);
658627 }
659628
......@@ -669,8 +638,8 @@ figure {
669638 border: 3px solid #FF79C6;
670639 padding: 8px 10px 10px 10px;
671640 border-radius: 10px;
672- box-shadow: 0px 5px 0px 0px var(--shadow);
673641 background-size: 100%;
642+ margin: 0:
674643 -webkit-background-clip: text;
675644 -moz-background-clip: text;
676645 -webkit-text-fill-color: transparent;
......@@ -689,47 +658,40 @@ figure {
689658 .btn-link:visited {
690659 border: 2px solid var(--link-color);
691660 color: var(--link-color);
692- padding: 0.4rem 1rem;
661+ padding: var(--grid-height) 1rem;
693662 text-decoration: none;
694663 font-weight: bold;
695664 display: inline-block;
696665 }
697666
698-.btn-link:visited:hover,
699-.btn-link:hover {
700- border: 2px solid var(--hover);
701-}
702-
703-.btn-link-alt,
704-.btn-link-alt:visited {
705- border: 2px solid var(--white);
706- color: var(--white);
707-}
708-
709667 .box {
710668 border: 2px solid var(--grey-light);
711- padding: 0.5rem 0.75rem;
669+ padding: var(--line-height);
712670 }
713671
714672 .box-sm {
715673 border: 2px solid var(--grey-light);
716- padding: 0.15rem 0.35rem;
674+ padding: var(--grid-height);
717675 }
718676
719677 .box-alert {
720678 border: 2px solid var(--hover);
721- padding: 0.5rem 0.75rem;
679+ padding: var(--line-height);
722680 }
723681
724682 .box-sm-alert {
725683 border: 2px solid var(--hover);
726- padding: 0.15rem 0.35rem;
684+ padding: var(--grid-height);
727685 }
728686
729687 .list-none {
730688 list-style-type: none;
731689 }
732690
691+.list-square {
692+ list-style-type: square;
693+}
694+
733695 .list-disc {
734696 list-style-type: disc;
735697 }
......@@ -766,3 +728,23 @@ figure {
766728 flex-direction: column;
767729 }
768730 }
731+
732+#debug {
733+ position: relative;
734+}
735+
736+#debug .debug-grid {
737+ width: 100%;
738+ height: 100%;
739+ position: absolute;
740+ top: 0;
741+ left: 0;
742+ right: 0;
743+ bottom: 0;
744+ z-index: -1;
745+ background-image:
746+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
747+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
748+ background-size: 1ch var(--grid-height);
749+ margin: 0;
750+}
Back to top