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