- commit
- 1664761
- parent
- a8a568a
- author
- Eric Bower
- date
- 2024-09-02 21:19:34 -0400 EDT
style: update smol
2 files changed,
+741,
-198
+616,
-44
1@@ -1,53 +1,625 @@
2+diff --git a/patches/smol.diff b/patches/smol.diff
3+index ae2df55..e69de29 100644
4+--- a/patches/smol.diff
5++++ b/patches/smol.diff
6+@@ -1,53 +0,0 @@
7+-diff --git a/static/smol.css b/static/smol.css
8+-index e9b59ec..9e9d925 100644
9+---- a/static/smol.css
10+-+++ b/static/smol.css
11+-@@ -15,48 +15,6 @@
12+- box-shadow: none;
13+- }
14+-
15+--@media (prefers-color-scheme: light) {
16+-- :root {
17+-- --main-hue: 250;
18+-- --white: #2e3f53;
19+-- --white-light: #cfe0f4;
20+-- --white-dark: #6c6a6a;
21+-- --code: #52576f;
22+-- --pre: #e1e7ee;
23+-- --bg-color: #f4f4f4;
24+-- --text-color: #24292f;
25+-- --link-color: #005cc5;
26+-- --visited: #6f42c1;
27+-- --blockquote: #005cc5;
28+-- --blockquote-bg: #cfe0f4;
29+-- --hover: #c11e7a;
30+-- --grey: #ccc;
31+-- --grey-light: #6a708e;
32+-- --shadow: #e8e8e8;
33+-- }
34+--}
35+--
36+--@media (prefers-color-scheme: dark) {
37+-- :root {
38+-- --main-hue: 250;
39+-- --white: #f2f2f2;
40+-- --white-light: #f2f2f2;
41+-- --white-dark: #e8e8e8;
42+-- --code: #414558;
43+-- --pre: #252525;
44+-- --bg-color: #282a36;
45+-- --text-color: #f2f2f2;
46+-- --link-color: #8be9fd;
47+-- --visited: #bd93f9;
48+-- --blockquote: #bd93f9;
49+-- --blockquote-bg: #353548;
50+-- --hover: #ff80bf;
51+-- --grey: #414558;
52+-- --grey-light: #6a708e;
53+-- --shadow: #252525;
54+-- }
55+--}
56+--
57+- html {
58+- background-color: var(--bg-color);
59+- color: var(--text-color);
60 diff --git a/static/smol.css b/static/smol.css
61-index e9b59ec..9e9d925 100644
62+index 9e9d925..2ea9e0d 100644
63 --- a/static/smol.css
64 +++ b/static/smol.css
65-@@ -15,48 +15,6 @@
66+@@ -15,11 +15,16 @@
67 box-shadow: none;
68 }
69
70--@media (prefers-color-scheme: light) {
71-- :root {
72-- --main-hue: 250;
73-- --white: #2e3f53;
74-- --white-light: #cfe0f4;
75-- --white-dark: #6c6a6a;
76-- --code: #52576f;
77-- --pre: #e1e7ee;
78-- --bg-color: #f4f4f4;
79-- --text-color: #24292f;
80-- --link-color: #005cc5;
81-- --visited: #6f42c1;
82-- --blockquote: #005cc5;
83-- --blockquote-bg: #cfe0f4;
84-- --hover: #c11e7a;
85-- --grey: #ccc;
86-- --grey-light: #6a708e;
87-- --shadow: #e8e8e8;
88-- }
89--}
90--
91--@media (prefers-color-scheme: dark) {
92-- :root {
93-- --main-hue: 250;
94-- --white: #f2f2f2;
95-- --white-light: #f2f2f2;
96-- --white-dark: #e8e8e8;
97-- --code: #414558;
98-- --pre: #252525;
99-- --bg-color: #282a36;
100-- --text-color: #f2f2f2;
101-- --link-color: #8be9fd;
102-- --visited: #bd93f9;
103-- --blockquote: #bd93f9;
104-- --blockquote-bg: #353548;
105-- --hover: #ff80bf;
106-- --grey: #414558;
107-- --grey-light: #6a708e;
108-- --shadow: #252525;
109-- }
110--}
111--
112++:root {
113++ --line-height: 1.3rem;
114++ --grid-height: 0.65rem;
115++}
116++
117 html {
118 background-color: var(--bg-color);
119 color: var(--text-color);
120+- font-size: 18px;
121+- line-height: 1.5;
122++ font-size: 16px;
123++ line-height: var(--line-height);
124+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
125+ Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
126+ sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
127+@@ -47,8 +52,7 @@ code,
128+ kbd,
129+ samp,
130+ pre {
131+- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
132+- monospace;
133++ font-family: monospace;
134+ }
135+
136+ code,
137+@@ -61,19 +65,19 @@ pre > code {
138+ background-color: inherit;
139+ padding: 0;
140+ border: none;
141++ border-radius: 0;
142+ }
143+
144+ code {
145+ font-size: 90%;
146+ border-radius: 0.3rem;
147+- padding: 0.1rem 0.3rem;
148++ padding: 0.025rem 0.3rem;
149+ }
150+
151+ pre {
152+- font-size: 14px;
153+- border-radius: 5px;
154+- padding: 1rem;
155+- margin: 1rem 0;
156++ font-size: 0.8rem;
157++ border-radius: 1px;
158++ padding: var(--line-height);
159+ overflow-x: auto;
160+ background-color: var(--pre) !important;
161+ }
162+@@ -92,7 +96,7 @@ h2,
163+ h3,
164+ h4 {
165+ margin: 0;
166+- padding: 0.5rem 0 0 0;
167++ padding: 0;
168+ border: 0;
169+ font-style: normal;
170+ font-weight: inherit;
171+@@ -107,11 +111,9 @@ path {
172+ hr {
173+ color: inherit;
174+ border: 0;
175+- margin: 0;
176+ height: 2px;
177+ background: var(--grey);
178+- margin: 1rem auto;
179+- text-align: center;
180++ margin: calc(var(--grid-height) - 2px) auto;
181+ }
182+
183+ a {
184+@@ -122,22 +124,12 @@ a {
185+ a:hover,
186+ a:visited:hover {
187+ text-decoration: underline;
188+- color: var(--hover);
189+ }
190+
191+ a:visited {
192+ color: var(--visited);
193+ }
194+
195+-a.link-grey {
196+- text-decoration: underline;
197+- color: var(--white);
198+-}
199+-
200+-a.link-grey:visited {
201+- color: var(--white);
202+-}
203+-
204+ section {
205+ margin-bottom: 1.4rem;
206+ }
207+@@ -151,7 +143,8 @@ header {
208+ }
209+
210+ p {
211+- margin: 0.5rem 0;
212++ margin-top: var(--line-height);
213++ margin-bottom: var(--line-height);
214+ }
215+
216+ article {
217+@@ -161,8 +154,8 @@ article {
218+ blockquote {
219+ border-left: 5px solid var(--blockquote);
220+ background-color: var(--blockquote-bg);
221+- padding: 0.5rem 0.75rem;
222+- margin: 0.5rem 0;
223++ padding: var(--grid-height);
224++ margin: var(--line-height) 0;
225+ }
226+
227+ blockquote > p {
228+@@ -175,8 +168,10 @@ blockquote code {
229+
230+ ul,
231+ ol {
232+- padding: 0 0 0 1rem;
233+- list-style-position: outside;
234++ padding: 0 0 0 var(--line-height);
235++ list-style-position: inside;
236++ list-style-type: square;
237++ margin: 0;
238+ }
239+
240+ ul[style*="list-style-type: none;"] {
241+@@ -184,7 +179,12 @@ ul[style*="list-style-type: none;"] {
242+ }
243+
244+ li {
245+- margin: 0.5rem 0;
246++ margin: 0;
247++ padding: 0;
248++}
249++
250++li::marker {
251++ line-height: 0;
252+ }
253+
254+ li > pre {
255+@@ -193,7 +193,7 @@ li > pre {
256+
257+ footer {
258+ text-align: center;
259+- margin-bottom: 4rem;
260++ margin-bottom: calc(var(--line-height) * 3);
261+ }
262+
263+ dt {
264+@@ -212,6 +212,10 @@ figure {
265+ margin: 0;
266+ }
267+
268++#toc {
269++ margin-top: var(--line-height);
270++}
271++
272+ .container {
273+ max-width: 50em;
274+ width: 100%;
275+@@ -230,21 +234,7 @@ figure {
276+ }
277+
278+ .mono {
279+- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
280+- monospace;
281+-}
282+-
283+-.link-alt-adj,
284+-.link-alt-adj:visited,
285+-.link-alt-adj:visited:hover,
286+-.link-alt-adj:hover {
287+- color: var(--link-color);
288+- text-decoration: none;
289+-}
290+-
291+-.link-alt-adj:visited:hover,
292+-.link-alt-adj:hover {
293+- text-decoration: underline;
294++ font-family: monospace;
295+ }
296+
297+ .link-alt-hover,
298+@@ -273,36 +263,28 @@ figure {
299+ text-decoration: underline;
300+ }
301+
302+-.text-3xl {
303+- font-size: 2.5rem;
304++.text-2xl code, .text-xl code, .text-lg code, .text-md code {
305++ text-transform: none;
306+ }
307+
308+ .text-2xl {
309+- font-size: 1.9rem;
310+- line-height: 1.15;
311+-}
312+-
313+-.text-xl {
314+- font-size: 1.55rem;
315+- line-height: 1.15;
316+-}
317+-
318+-.text-lg {
319+- font-size: 1.35rem;
320+- line-height: 1.15;
321++ font-size: var(--line-height);
322++ font-weight: bold;
323++ line-height: var(--line-height);
324++ margin-bottom: var(--grid-height);
325++ text-transform: uppercase;
326+ }
327+
328+-.text-md {
329+- font-size: 1.15rem;
330+- 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;
337+ }
338+
339+ .text-sm {
340+- font-size: 0.875rem;
341+-}
342+-
343+-.text-xs {
344+- font-size: 0.775rem;
345++ font-size: 0.8rem;
346+ }
347+
348+ .cursor-pointer {
349+@@ -330,19 +312,14 @@ figure {
350+ }
351+
352+ .text-underline {
353+- border-bottom: 3px solid var(--text-color);
354+- padding-bottom: 3px;
355++ text-decoration: underline;
356++ text-decoration-thickness: 2px;
357+ }
358+
359+ .text-hdr {
360+ color: var(--hover);
361+ }
362+
363+-.text-underline-hdr {
364+- border-bottom: 3px solid var(--hover);
365+- padding-bottom: 3px;
366+-}
367+-
368+ .font-bold {
369+ font-weight: bold;
370+ }
371+@@ -387,40 +364,32 @@ figure {
372+ margin: 0;
373+ }
374+
375++.mt-0 {
376++ margin-top: 0;
377++}
378++
379+ .mt {
380+- margin-top: 0.5rem;
381++ margin-top: var(--grid-height);
382+ }
383+
384+ .mt-2 {
385+- margin-top: 1rem;
386++ margin-top: var(--line-height);
387+ }
388+
389+ .mt-4 {
390+- margin-top: 2rem;
391+-}
392+-
393+-.mt-8 {
394+- margin-top: 4rem;
395++ margin-top: calc(var(--line-height) * 2);
396+ }
397+
398+ .mb {
399+- margin-bottom: 0.5rem;
400++ margin-bottom: var(--grid-height);
401+ }
402+
403+ .mb-2 {
404+- margin-bottom: 1rem;
405++ margin-bottom: var(--line-height);
406+ }
407+
408+ .mb-4 {
409+- margin-bottom: 2rem;
410+-}
411+-
412+-.mb-8 {
413+- margin-bottom: 4rem;
414+-}
415+-
416+-.mb-16 {
417+- margin-bottom: 8rem;
418++ margin-bottom: calc(var(--line-height) * 2);
419+ }
420+
421+ .mr {
422+@@ -440,23 +409,18 @@ figure {
423+ }
424+
425+ .my {
426+- margin-top: 0.5rem;
427+- margin-bottom: 0.5rem;
428++ margin-top: var(--grid-height);
429++ margin-bottom: var(--grid-height);
430+ }
431+
432+ .my-2 {
433+- margin-top: 1rem;
434+- margin-bottom: 1rem;
435++ margin-top: var(--line-height);
436++ margin-bottom: var(--line-height);
437+ }
438+
439+ .my-4 {
440+- margin-top: 2rem;
441+- margin-bottom: 2rem;
442+-}
443+-
444+-.my-8 {
445+- margin-top: 4rem;
446+- margin-bottom: 4rem;
447++ margin-top: calc(var(--line-height) * 2);
448++ margin-bottom: calc(var(--line-height) * 2);
449+ }
450+
451+ .mx {
452+@@ -470,11 +434,11 @@ figure {
453+ }
454+
455+ .m-1 {
456+- margin: 0.5rem;
457++ margin: var(--grid-height);
458+ }
459+
460+ .p-1 {
461+- padding: 0.5rem;
462++ padding: var(--grid-height);
463+ }
464+
465+ .p-0 {
466+@@ -492,23 +456,18 @@ figure {
467+ }
468+
469+ .py {
470+- padding-top: 0.5rem;
471+- padding-bottom: 0.5rem;
472++ padding-top: var(--grid-height);
473++ padding-bottom: var(--grid-height);
474+ }
475+
476+ .py-2 {
477+- padding-top: 1rem;
478+- padding-bottom: 1rem;
479++ padding-top: var(--line-height);
480++ padding-bottom: var(--line-height);
481+ }
482+
483+ .py-4 {
484+- padding-top: 2rem;
485+- padding-bottom: 2rem;
486+-}
487+-
488+-.py-8 {
489+- padding-top: 4rem;
490+- padding-bottom: 4rem;
491++ padding-top: calc(var(--line-height) * 2);
492++ padding-bottom: calc(var(--line-height) * 2);
493+ }
494+
495+ .justify-between {
496+@@ -520,28 +479,28 @@ figure {
497+ }
498+
499+ .gap {
500+- gap: 0.5rem;
501++ gap: var(--grid-height);
502+ }
503+
504+ .gap-2 {
505+- gap: 1rem;
506++ gap: var(--line-height);
507+ }
508+
509+ .group {
510+ display: flex;
511+ flex-direction: column;
512+- gap: 0.5rem;
513++ gap: var(--grid-height);
514+ }
515+
516+ .group-2 {
517+ display: flex;
518+ flex-direction: column;
519+- gap: 1rem;
520++ gap: var(--line-height);
521+ }
522+
523+ .group-h {
524+ display: flex;
525+- gap: 0.5rem;
526++ gap: var(--grid-height);
527+ align-items: center;
528+ }
529+
530+@@ -580,7 +539,8 @@ figure {
531+ .md h3,
532+ .md h4 {
533+ padding: 0;
534+- margin: 1.5rem 0 0.9rem 0;
535++ margin: 0;
536++ /* margin: 1.5rem 0 0.9rem 0; */
537+ font-weight: bold;
538+ }
539+
540+@@ -592,26 +552,24 @@ figure {
541+ text-decoration: none;
542+ }
543+
544+-.md h1 {
545+- font-size: 1.6rem;
546+- line-height: 1.15;
547+- border-bottom: 2px solid var(--grey);
548+- padding-bottom: 0.7rem;
549+-}
550+-
551+-.md h2 {
552+- font-size: 1.3rem;
553+- line-height: 1.15;
554+- color: var(--white-dark);
555++h1 code, h2 code, h3 code, h4 code {
556++ text-transform: none;
557+ }
558+
559+-.md h3 {
560+- font-size: 1.2rem;
561+- color: var(--white-dark);
562++.md h1 {
563++ font-size: 1rem;
564++ line-height: var(--line-height);
565++ margin-top: calc(var(--line-height) * 2);
566++ margin-bottom: var(--grid-height);
567++ text-transform: uppercase;
568+ }
569+
570+-.md h4 {
571++.md h2, .md h3, .md h4 {
572+ font-size: 1rem;
573++ line-height: var(--line-height);
574++ margin-top: calc(var(--line-height) * 2);
575++ margin-bottom: var(--line-height);
576++ text-transform: uppercase;
577+ color: var(--white-dark);
578+ }
579+
580+@@ -627,8 +585,8 @@ figure {
581+ border: 3px solid #FF79C6;
582+ padding: 8px 10px 10px 10px;
583+ border-radius: 10px;
584+- box-shadow: 0px 5px 0px 0px var(--shadow);
585+ background-size: 100%;
586++ margin: 0:
587+ -webkit-background-clip: text;
588+ -moz-background-clip: text;
589+ -webkit-text-fill-color: transparent;
590+@@ -647,47 +605,40 @@ figure {
591+ .btn-link:visited {
592+ border: 2px solid var(--link-color);
593+ color: var(--link-color);
594+- padding: 0.4rem 1rem;
595++ padding: var(--grid-height) 1rem;
596+ text-decoration: none;
597+ font-weight: bold;
598+ display: inline-block;
599+ }
600+
601+-.btn-link:visited:hover,
602+-.btn-link:hover {
603+- border: 2px solid var(--hover);
604+-}
605+-
606+-.btn-link-alt,
607+-.btn-link-alt:visited {
608+- border: 2px solid var(--white);
609+- color: var(--white);
610+-}
611+-
612+ .box {
613+ border: 2px solid var(--grey-light);
614+- padding: 0.5rem 0.75rem;
615++ padding: var(--line-height);
616+ }
617+
618+ .box-sm {
619+ border: 2px solid var(--grey-light);
620+- padding: 0.15rem 0.35rem;
621++ padding: var(--grid-height);
622+ }
623+
624+ .box-alert {
625+ border: 2px solid var(--hover);
626+- padding: 0.5rem 0.75rem;
627++ padding: var(--line-height);
628+ }
629+
630+ .box-sm-alert {
631+ border: 2px solid var(--hover);
632+- padding: 0.15rem 0.35rem;
633++ padding: var(--grid-height);
634+ }
635+
636+ .list-none {
637+ list-style-type: none;
638+ }
639+
640++.list-square {
641++ list-style-type: square;
642++}
643++
644+ .list-disc {
645+ list-style-type: disc;
646+ }
647+@@ -724,3 +675,23 @@ figure {
648+ flex-direction: column;
649+ }
650+ }
651++
652++#debug {
653++ position: relative;
654++}
655++
656++#debug .debug-grid {
657++ width: 100%;
658++ height: 100%;
659++ position: absolute;
660++ top: 0;
661++ left: 0;
662++ right: 0;
663++ bottom: 0;
664++ z-index: -1;
665++ background-image:
666++ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
667++ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
668++ background-size: 1ch var(--grid-height);
669++ margin: 0;
670++}
+125,
-154
1@@ -15,11 +15,16 @@
2 box-shadow: none;
3 }
4
5+:root {
6+ --line-height: 1.3rem;
7+ --grid-height: 0.65rem;
8+}
9+
10 html {
11 background-color: var(--bg-color);
12 color: var(--text-color);
13- font-size: 18px;
14- line-height: 1.5;
15+ font-size: 16px;
16+ line-height: var(--line-height);
17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
18 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
19 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
20@@ -47,8 +52,7 @@ code,
21 kbd,
22 samp,
23 pre {
24- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
25- monospace;
26+ font-family: monospace;
27 }
28
29 code,
30@@ -61,19 +65,19 @@ pre > code {
31 background-color: inherit;
32 padding: 0;
33 border: none;
34+ border-radius: 0;
35 }
36
37 code {
38 font-size: 90%;
39 border-radius: 0.3rem;
40- padding: 0.1rem 0.3rem;
41+ padding: 0.025rem 0.3rem;
42 }
43
44 pre {
45- font-size: 14px;
46- border-radius: 5px;
47- padding: 1rem;
48- margin: 1rem 0;
49+ font-size: 0.8rem;
50+ border-radius: 1px;
51+ padding: var(--line-height);
52 overflow-x: auto;
53 background-color: var(--pre) !important;
54 }
55@@ -92,7 +96,7 @@ h2,
56 h3,
57 h4 {
58 margin: 0;
59- padding: 0.5rem 0 0 0;
60+ padding: 0;
61 border: 0;
62 font-style: normal;
63 font-weight: inherit;
64@@ -107,11 +111,9 @@ path {
65 hr {
66 color: inherit;
67 border: 0;
68- margin: 0;
69 height: 2px;
70 background: var(--grey);
71- margin: 1rem auto;
72- text-align: center;
73+ margin: calc(var(--grid-height) - 2px) auto;
74 }
75
76 a {
77@@ -122,22 +124,12 @@ a {
78 a:hover,
79 a:visited:hover {
80 text-decoration: underline;
81- color: var(--hover);
82 }
83
84 a:visited {
85 color: var(--visited);
86 }
87
88-a.link-grey {
89- text-decoration: underline;
90- color: var(--white);
91-}
92-
93-a.link-grey:visited {
94- color: var(--white);
95-}
96-
97 section {
98 margin-bottom: 1.4rem;
99 }
100@@ -151,7 +143,8 @@ header {
101 }
102
103 p {
104- margin: 0.5rem 0;
105+ margin-top: var(--line-height);
106+ margin-bottom: var(--line-height);
107 }
108
109 article {
110@@ -161,8 +154,8 @@ article {
111 blockquote {
112 border-left: 5px solid var(--blockquote);
113 background-color: var(--blockquote-bg);
114- padding: 0.5rem 0.75rem;
115- margin: 0.5rem 0;
116+ padding: var(--grid-height);
117+ margin: var(--line-height) 0;
118 }
119
120 blockquote > p {
121@@ -175,8 +168,10 @@ blockquote code {
122
123 ul,
124 ol {
125- padding: 0 0 0 1rem;
126- list-style-position: outside;
127+ padding: 0 0 0 var(--line-height);
128+ list-style-position: inside;
129+ list-style-type: square;
130+ margin: 0;
131 }
132
133 ul[style*="list-style-type: none;"] {
134@@ -184,7 +179,12 @@ ul[style*="list-style-type: none;"] {
135 }
136
137 li {
138- margin: 0.5rem 0;
139+ margin: 0;
140+ padding: 0;
141+}
142+
143+li::marker {
144+ line-height: 0;
145 }
146
147 li > pre {
148@@ -193,7 +193,7 @@ li > pre {
149
150 footer {
151 text-align: center;
152- margin-bottom: 4rem;
153+ margin-bottom: calc(var(--line-height) * 3);
154 }
155
156 dt {
157@@ -212,6 +212,10 @@ figure {
158 margin: 0;
159 }
160
161+#toc {
162+ margin-top: var(--line-height);
163+}
164+
165 .container {
166 max-width: 50em;
167 width: 100%;
168@@ -230,21 +234,7 @@ figure {
169 }
170
171 .mono {
172- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
173- monospace;
174-}
175-
176-.link-alt-adj,
177-.link-alt-adj:visited,
178-.link-alt-adj:visited:hover,
179-.link-alt-adj:hover {
180- color: var(--link-color);
181- text-decoration: none;
182-}
183-
184-.link-alt-adj:visited:hover,
185-.link-alt-adj:hover {
186- text-decoration: underline;
187+ font-family: monospace;
188 }
189
190 .link-alt-hover,
191@@ -273,36 +263,28 @@ figure {
192 text-decoration: underline;
193 }
194
195-.text-3xl {
196- font-size: 2.5rem;
197+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
198+ text-transform: none;
199 }
200
201 .text-2xl {
202- font-size: 1.9rem;
203- line-height: 1.15;
204-}
205-
206-.text-xl {
207- font-size: 1.55rem;
208- line-height: 1.15;
209-}
210-
211-.text-lg {
212- font-size: 1.35rem;
213- line-height: 1.15;
214+ font-size: var(--line-height);
215+ font-weight: bold;
216+ line-height: var(--line-height);
217+ margin-bottom: var(--grid-height);
218+ text-transform: uppercase;
219 }
220
221-.text-md {
222- font-size: 1.15rem;
223- line-height: 1.15;
224+.text-xl, .text-lg, .text-md {
225+ font-size: 1rem;
226+ font-weight: bold;
227+ line-height: var(--line-height);
228+ margin-bottom: var(--grid-height);
229+ text-transform: uppercase;
230 }
231
232 .text-sm {
233- font-size: 0.875rem;
234-}
235-
236-.text-xs {
237- font-size: 0.775rem;
238+ font-size: 0.8rem;
239 }
240
241 .cursor-pointer {
242@@ -330,19 +312,14 @@ figure {
243 }
244
245 .text-underline {
246- border-bottom: 3px solid var(--text-color);
247- padding-bottom: 3px;
248+ text-decoration: underline;
249+ text-decoration-thickness: 2px;
250 }
251
252 .text-hdr {
253 color: var(--hover);
254 }
255
256-.text-underline-hdr {
257- border-bottom: 3px solid var(--hover);
258- padding-bottom: 3px;
259-}
260-
261 .font-bold {
262 font-weight: bold;
263 }
264@@ -387,40 +364,32 @@ figure {
265 margin: 0;
266 }
267
268+.mt-0 {
269+ margin-top: 0;
270+}
271+
272 .mt {
273- margin-top: 0.5rem;
274+ margin-top: var(--grid-height);
275 }
276
277 .mt-2 {
278- margin-top: 1rem;
279+ margin-top: var(--line-height);
280 }
281
282 .mt-4 {
283- margin-top: 2rem;
284-}
285-
286-.mt-8 {
287- margin-top: 4rem;
288+ margin-top: calc(var(--line-height) * 2);
289 }
290
291 .mb {
292- margin-bottom: 0.5rem;
293+ margin-bottom: var(--grid-height);
294 }
295
296 .mb-2 {
297- margin-bottom: 1rem;
298+ margin-bottom: var(--line-height);
299 }
300
301 .mb-4 {
302- margin-bottom: 2rem;
303-}
304-
305-.mb-8 {
306- margin-bottom: 4rem;
307-}
308-
309-.mb-16 {
310- margin-bottom: 8rem;
311+ margin-bottom: calc(var(--line-height) * 2);
312 }
313
314 .mr {
315@@ -440,23 +409,18 @@ figure {
316 }
317
318 .my {
319- margin-top: 0.5rem;
320- margin-bottom: 0.5rem;
321+ margin-top: var(--grid-height);
322+ margin-bottom: var(--grid-height);
323 }
324
325 .my-2 {
326- margin-top: 1rem;
327- margin-bottom: 1rem;
328+ margin-top: var(--line-height);
329+ margin-bottom: var(--line-height);
330 }
331
332 .my-4 {
333- margin-top: 2rem;
334- margin-bottom: 2rem;
335-}
336-
337-.my-8 {
338- margin-top: 4rem;
339- margin-bottom: 4rem;
340+ margin-top: calc(var(--line-height) * 2);
341+ margin-bottom: calc(var(--line-height) * 2);
342 }
343
344 .mx {
345@@ -470,11 +434,11 @@ figure {
346 }
347
348 .m-1 {
349- margin: 0.5rem;
350+ margin: var(--grid-height);
351 }
352
353 .p-1 {
354- padding: 0.5rem;
355+ padding: var(--grid-height);
356 }
357
358 .p-0 {
359@@ -492,23 +456,18 @@ figure {
360 }
361
362 .py {
363- padding-top: 0.5rem;
364- padding-bottom: 0.5rem;
365+ padding-top: var(--grid-height);
366+ padding-bottom: var(--grid-height);
367 }
368
369 .py-2 {
370- padding-top: 1rem;
371- padding-bottom: 1rem;
372+ padding-top: var(--line-height);
373+ padding-bottom: var(--line-height);
374 }
375
376 .py-4 {
377- padding-top: 2rem;
378- padding-bottom: 2rem;
379-}
380-
381-.py-8 {
382- padding-top: 4rem;
383- padding-bottom: 4rem;
384+ padding-top: calc(var(--line-height) * 2);
385+ padding-bottom: calc(var(--line-height) * 2);
386 }
387
388 .justify-between {
389@@ -520,28 +479,28 @@ figure {
390 }
391
392 .gap {
393- gap: 0.5rem;
394+ gap: var(--grid-height);
395 }
396
397 .gap-2 {
398- gap: 1rem;
399+ gap: var(--line-height);
400 }
401
402 .group {
403 display: flex;
404 flex-direction: column;
405- gap: 0.5rem;
406+ gap: var(--grid-height);
407 }
408
409 .group-2 {
410 display: flex;
411 flex-direction: column;
412- gap: 1rem;
413+ gap: var(--line-height);
414 }
415
416 .group-h {
417 display: flex;
418- gap: 0.5rem;
419+ gap: var(--grid-height);
420 align-items: center;
421 }
422
423@@ -580,7 +539,8 @@ figure {
424 .md h3,
425 .md h4 {
426 padding: 0;
427- margin: 1.5rem 0 0.9rem 0;
428+ margin: 0;
429+ /* margin: 1.5rem 0 0.9rem 0; */
430 font-weight: bold;
431 }
432
433@@ -592,26 +552,24 @@ figure {
434 text-decoration: none;
435 }
436
437-.md h1 {
438- font-size: 1.6rem;
439- line-height: 1.15;
440- border-bottom: 2px solid var(--grey);
441- padding-bottom: 0.7rem;
442-}
443-
444-.md h2 {
445- font-size: 1.3rem;
446- line-height: 1.15;
447- color: var(--white-dark);
448+h1 code, h2 code, h3 code, h4 code {
449+ text-transform: none;
450 }
451
452-.md h3 {
453- font-size: 1.2rem;
454- color: var(--white-dark);
455+.md h1 {
456+ font-size: 1rem;
457+ line-height: var(--line-height);
458+ margin-top: calc(var(--line-height) * 2);
459+ margin-bottom: var(--grid-height);
460+ text-transform: uppercase;
461 }
462
463-.md h4 {
464+.md h2, .md h3, .md h4 {
465 font-size: 1rem;
466+ line-height: var(--line-height);
467+ margin-top: calc(var(--line-height) * 2);
468+ margin-bottom: var(--line-height);
469+ text-transform: uppercase;
470 color: var(--white-dark);
471 }
472
473@@ -627,8 +585,8 @@ figure {
474 border: 3px solid #FF79C6;
475 padding: 8px 10px 10px 10px;
476 border-radius: 10px;
477- box-shadow: 0px 5px 0px 0px var(--shadow);
478 background-size: 100%;
479+ margin: 0:
480 -webkit-background-clip: text;
481 -moz-background-clip: text;
482 -webkit-text-fill-color: transparent;
483@@ -647,47 +605,40 @@ figure {
484 .btn-link:visited {
485 border: 2px solid var(--link-color);
486 color: var(--link-color);
487- padding: 0.4rem 1rem;
488+ padding: var(--grid-height) 1rem;
489 text-decoration: none;
490 font-weight: bold;
491 display: inline-block;
492 }
493
494-.btn-link:visited:hover,
495-.btn-link:hover {
496- border: 2px solid var(--hover);
497-}
498-
499-.btn-link-alt,
500-.btn-link-alt:visited {
501- border: 2px solid var(--white);
502- color: var(--white);
503-}
504-
505 .box {
506 border: 2px solid var(--grey-light);
507- padding: 0.5rem 0.75rem;
508+ padding: var(--line-height);
509 }
510
511 .box-sm {
512 border: 2px solid var(--grey-light);
513- padding: 0.15rem 0.35rem;
514+ padding: var(--grid-height);
515 }
516
517 .box-alert {
518 border: 2px solid var(--hover);
519- padding: 0.5rem 0.75rem;
520+ padding: var(--line-height);
521 }
522
523 .box-sm-alert {
524 border: 2px solid var(--hover);
525- padding: 0.15rem 0.35rem;
526+ padding: var(--grid-height);
527 }
528
529 .list-none {
530 list-style-type: none;
531 }
532
533+.list-square {
534+ list-style-type: square;
535+}
536+
537 .list-disc {
538 list-style-type: disc;
539 }
540@@ -724,3 +675,23 @@ figure {
541 flex-direction: column;
542 }
543 }
544+
545+#debug {
546+ position: relative;
547+}
548+
549+#debug .debug-grid {
550+ width: 100%;
551+ height: 100%;
552+ position: absolute;
553+ top: 0;
554+ left: 0;
555+ right: 0;
556+ bottom: 0;
557+ z-index: -1;
558+ background-image:
559+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
560+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
561+ background-size: 1ch var(--grid-height);
562+ margin: 0;
563+}