Commit 8014989

Eric Bower  ·  2024-12-18 14:21:38 -0500 EST
parent a9efb6d 
style: tweaks
6 files changed,  +354, -133
M html/commit.page.tmpl
M html/file.page.tmpl
M html/header.partial.tmpl
M html/log.page.tmpl
M static/main.css
M static/smol.css
M html/commit.page.tmpl
+1, -1
......@@ -39,7 +39,7 @@
3939 </div>
4040
4141 {{range .Diff.Files}}
42- <div id="diff-{{.Name}}" class="flex justify-between mono">
42+ <div id="diff-{{.Name}}" class="flex justify-between mono py diff-file">
4343 <div>
4444 <span>{{.FileType}} {{if eq .FileType "R"}}{{.OldName}} => {{end}}</span>
4545 <a href="#diff-{{.Name}}">{{.Name}}</a>
M html/file.page.tmpl
+4, -4
......@@ -18,20 +18,20 @@
1818 <div class="flex-1">
1919 <a href="{{.Item.CommitURL}}">{{.Item.Summary}}</a>
2020 </div>
21- <div>
21+ <div class="mono">
2222 <a href="{{.Item.CommitURL}}">{{.Item.CommitID}}</a>
2323 </div>
2424 </div>
2525
26- <div class="flex items-center gap-xs">
26+ <div class="flex items-center">
2727 <span>{{.Item.Author.Name}}</span>
28- <span>&centerdot;</span>
28+ <span>&nbsp;&centerdot;&nbsp;</span>
2929 <span>{{.Item.When}}</span>
3030 </div>
3131 </div>
3232 {{end}}
3333
34- <h2 class="text-lg">{{.Item.Name}}</h2>
34+ <h2 class="text-lg text-transform-none">{{.Item.Name}}</h2>
3535
3636 {{.Contents}}
3737 {{end }}
M html/header.partial.tmpl
+1, -1
......@@ -1,5 +1,5 @@
11 {{define "header"}}
2-<div class="flex flex-col gap-2">
2+<div class="flex flex-col">
33 <h1 class="text-xl flex gap p-0">
44 {{if .SiteURLs.HomeURL}}
55 <a href="{{.SiteURLs.HomeURL}}">repos</a>
M html/log.page.tmpl
+23, -25
......@@ -4,36 +4,34 @@
44 {{define "meta"}}{{end}}
55
66 {{define "content"}}
7- <div>
8- <div><span class="font-bold">({{.NumCommits}})</span> commits</div>
9- {{range .Logs}}
10- <div class="box">
11- <div class="flex justify-between items-center">
12- <a href="{{.URL}}" class="text-md">{{.SummaryStr}}</a>
13-
14- <div class="flex gap">
15- {{.ShortID}}
7+ <div class="group">
8+ <div><span class="font-bold">({{.NumCommits}})</span> commits</div>
9+ {{range .Logs}}
10+ <div>
11+ <div class="flex justify-between items-center">
12+ <a href="{{.URL}}" class="mono">{{.ShortID}}</a>
1613
17- {{range .Refs}}
18- {{if .URL}}
19- <a href="{{.URL}}">({{.Refspec}})</a>
20- {{else}}
21- ({{.Refspec}})
14+ <div class="mono">
15+ {{range .Refs}}
16+ {{if .URL}}
17+ <a href="{{.URL}}">({{.Refspec}})</a>
18+ {{else}}
19+ ({{.Refspec}})
20+ {{end}}
2221 {{end}}
23- {{end}}
22+ </div>
2423 </div>
25- </div>
2624
27- <div class="flex items-center gap-xs">
28- <span>{{.AuthorStr}}</span>
29- <span>&nbsp;&centerdot;&nbsp;</span>
30- <span>{{.WhenStr}}</span>
31- </div>
25+ <div class="flex items-center gap-xs text-sm">
26+ <span>{{.AuthorStr}}</span>
27+ <span>&nbsp;&centerdot;&nbsp;</span>
28+ <span>{{.WhenStr}}</span>
29+ </div>
3230
33- <div>
34- <pre class="m-0">{{.Message}}</pre>
31+ <div>
32+ <pre class="m-0">{{.Message}}</pre>
33+ </div>
3534 </div>
36- </div>
37- {{end}}
35+ {{end}}
3836 </div>
3937 {{end}}
M static/main.css
+8, -2
......@@ -1,5 +1,6 @@
11 pre {
22 border: 1px solid var(--border);
3+ padding: var(--grid-height);
34 }
45
56 body {
......@@ -16,6 +17,8 @@ body {
1617
1718 .box {
1819 margin: 1rem 0;
20+ padding: var(--grid-height);
21+ border: 1px solid var(--border);
1922 }
2023
2124 .tree-size {
......@@ -27,8 +30,11 @@ body {
2730 text-wrap: wrap;
2831 }
2932
30-.tree-row:hover {
31- background-color: var(--border);
33+.diff-file {
34+ position: sticky;
35+ top: 0;
36+ left: 0;
37+ background-color: var(--bg-color);
3238 }
3339
3440 @media only screen and (max-width: 900px) {
M static/smol.css
+317, -100
......@@ -15,11 +15,16 @@
1515 box-shadow: none;
1616 }
1717
18+:root {
19+ --line-height: 1.3rem;
20+ --grid-height: 0.65rem;
21+}
22+
1823 html {
1924 background-color: var(--bg-color);
2025 color: var(--text-color);
21- font-size: 18px;
22- line-height: 1.5;
26+ font-size: 16px;
27+ line-height: var(--line-height);
2328 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
2429 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
2530 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
......@@ -47,8 +52,7 @@ code,
4752 kbd,
4853 samp,
4954 pre {
50- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
51- monospace;
55+ font-family: monospace;
5256 }
5357
5458 code,
......@@ -61,35 +65,48 @@ pre > code {
6165 background-color: inherit;
6266 padding: 0;
6367 border: none;
68+ border-radius: 0;
6469 }
6570
6671 code {
6772 font-size: 90%;
6873 border-radius: 0.3rem;
69- padding: 0.15rem 0.3rem 0.05rem;
74+ padding: 0.025rem 0.3rem;
7075 }
7176
7277 pre {
73- font-size: 14px;
74- border-radius: 5px;
75- padding: 1rem;
76- margin: 1rem 0;
78+ font-size: 0.8rem;
79+ border-radius: 1px;
80+ padding: var(--line-height);
7781 overflow-x: auto;
82+ background-color: var(--pre) !important;
7883 }
7984
8085 small {
8186 font-size: 0.8rem;
8287 }
8388
89+details {
90+ border: 2px solid var(--grey-light);
91+ padding: calc(var(--grid-height) - 2px) 1ch;
92+ margin-bottom: var(--grid-height);
93+}
94+
95+details[open] summary {
96+ margin-bottom: var(--grid-height);
97+}
98+
8499 summary {
85100 display: list-item;
101+ cursor: pointer;
86102 }
87103
88104 h1,
89105 h2,
90-h3 {
106+h3,
107+h4 {
91108 margin: 0;
92- padding: 0.6rem 0 0 0;
109+ padding: 0;
93110 border: 0;
94111 font-style: normal;
95112 font-weight: inherit;
......@@ -104,11 +121,9 @@ path {
104121 hr {
105122 color: inherit;
106123 border: 0;
107- margin: 0;
108124 height: 2px;
109125 background: var(--grey);
110- margin: 1rem auto;
111- text-align: center;
126+ margin: calc(var(--grid-height) - 2px) auto;
112127 }
113128
114129 a {
......@@ -119,7 +134,6 @@ a {
119134 a:hover,
120135 a:visited:hover {
121136 text-decoration: underline;
122- color: var(--hover);
123137 }
124138
125139 a:visited {
......@@ -139,34 +153,67 @@ header {
139153 }
140154
141155 p {
142- margin: 0.8rem 0;
156+ margin-top: var(--line-height);
157+ margin-bottom: var(--line-height);
143158 }
144159
145160 article {
146161 overflow-wrap: break-word;
147162 }
148163
149-ul,
150-ol {
151- padding: 0 0 0 2rem;
152- list-style-position: outside;
164+blockquote {
165+ border-left: 5px solid var(--blockquote);
166+ background-color: var(--blockquote-bg);
167+ padding: var(--grid-height);
168+ margin: var(--line-height) 0;
169+}
170+
171+blockquote > p {
172+ margin: 0;
173+}
174+
175+blockquote code {
176+ border: 1px solid var(--blockquote);
177+}
178+
179+ul {
180+ padding: 0 0 0 var(--line-height);
181+ list-style-position: inside;
182+ list-style-type: square;
183+ margin: var(--line-height) 0;
153184 }
154185
155186 ul[style*="list-style-type: none;"] {
156187 padding: 0;
157188 }
158189
159-li {
160- margin: 0.5rem 0;
190+ol {
191+ padding: 0 0 0 var(--line-height);
192+ list-style-type: decimal;
193+ margin: var(--line-height) 0;
194+}
195+
196+ol[style*="list-style-type: none;"] {
197+ padding: 0;
161198 }
162199
163-li > pre {
200+ol ul, ol ol, ul ol, ul ul {
201+ padding: 0 0 0 3ch;
202+ margin: 0;
203+}
204+
205+li {
206+ margin: 0;
164207 padding: 0;
165208 }
166209
210+li::marker {
211+ line-height: 0;
212+}
213+
167214 footer {
168215 text-align: center;
169- margin-bottom: 4rem;
216+ margin-bottom: calc(var(--line-height) * 3);
170217 }
171218
172219 dt {
......@@ -185,6 +232,14 @@ figure {
185232 margin: 0;
186233 }
187234
235+sup {
236+ line-height: 0;
237+}
238+
239+#toc {
240+ margin-top: var(--line-height);
241+}
242+
188243 .container {
189244 max-width: 50em;
190245 width: 100%;
......@@ -203,40 +258,57 @@ figure {
203258 }
204259
205260 .mono {
206- font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
207- monospace;
261+ font-family: monospace;
208262 }
209263
210-.text-3xl {
211- font-size: 2.5rem;
264+.link-alt-hover,
265+.link-alt-hover:visited,
266+.link-alt-hover:visited:hover,
267+.link-alt-hover:hover {
268+ color: var(--hover);
269+ text-decoration: none;
212270 }
213271
214-.text-2xl {
215- font-size: 1.9rem;
216- line-height: 1.15;
272+.link-alt-hover:visited:hover,
273+.link-alt-hover:hover {
274+ text-decoration: underline;
217275 }
218276
219-.text-xl {
220- font-size: 1.55rem;
221- line-height: 1.15;
277+.link-alt,
278+.link-alt:visited,
279+.link-alt:visited:hover,
280+.link-alt:hover {
281+ color: var(--white);
282+ text-decoration: none;
222283 }
223284
224-.text-lg {
225- font-size: 1.35rem;
226- line-height: 1.15;
285+.link-alt:visited:hover,
286+.link-alt:hover {
287+ text-decoration: underline;
227288 }
228289
229-.text-md {
230- font-size: 1.15rem;
231- line-height: 1.15;
290+.text-2xl code, .text-xl code, .text-lg code, .text-md code {
291+ text-transform: none;
232292 }
233293
234-.text-sm {
235- font-size: 0.875rem;
294+.text-2xl {
295+ font-size: var(--line-height);
296+ font-weight: bold;
297+ line-height: var(--line-height);
298+ margin-bottom: var(--grid-height);
299+ text-transform: uppercase;
236300 }
237301
238-.text-xs {
239- font-size: 0.775rem;
302+.text-xl, .text-lg, .text-md {
303+ font-size: 1rem;
304+ font-weight: bold;
305+ line-height: var(--line-height);
306+ margin-bottom: var(--grid-height);
307+ text-transform: uppercase;
308+}
309+
310+.text-sm {
311+ font-size: 0.8rem;
240312 }
241313
242314 .cursor-pointer {
......@@ -252,7 +324,7 @@ figure {
252324 }
253325
254326 .border {
255- border: 2px solid var(--border);
327+ border: 2px solid var(--grey-light);
256328 }
257329
258330 .text-left {
......@@ -264,19 +336,14 @@ figure {
264336 }
265337
266338 .text-underline {
267- border-bottom: 3px solid var(--text-color);
268- padding-bottom: 3px;
339+ text-decoration: underline;
340+ text-decoration-thickness: 2px;
269341 }
270342
271343 .text-hdr {
272344 color: var(--hover);
273345 }
274346
275-.text-underline-hdr {
276- border-bottom: 3px solid var(--hover);
277- padding-bottom: 3px;
278-}
279-
280347 .font-bold {
281348 font-weight: bold;
282349 }
......@@ -313,6 +380,10 @@ figure {
313380 flex-direction: column;
314381 }
315382
383+.flex-wrap {
384+ flex-wrap: wrap;
385+}
386+
316387 .items-center {
317388 align-items: center;
318389 }
......@@ -321,40 +392,32 @@ figure {
321392 margin: 0;
322393 }
323394
395+.mt-0 {
396+ margin-top: 0;
397+}
398+
324399 .mt {
325- margin-top: 0.5rem;
400+ margin-top: var(--grid-height);
326401 }
327402
328403 .mt-2 {
329- margin-top: 1rem;
404+ margin-top: var(--line-height);
330405 }
331406
332407 .mt-4 {
333- margin-top: 2rem;
334-}
335-
336-.mt-8 {
337- margin-top: 4rem;
408+ margin-top: calc(var(--line-height) * 2);
338409 }
339410
340411 .mb {
341- margin-bottom: 0.5rem;
412+ margin-bottom: var(--grid-height);
342413 }
343414
344415 .mb-2 {
345- margin-bottom: 1rem;
416+ margin-bottom: var(--line-height);
346417 }
347418
348419 .mb-4 {
349- margin-bottom: 2rem;
350-}
351-
352-.mb-8 {
353- margin-bottom: 4rem;
354-}
355-
356-.mb-16 {
357- margin-bottom: 8rem;
420+ margin-bottom: calc(var(--line-height) * 2);
358421 }
359422
360423 .mr {
......@@ -374,23 +437,18 @@ figure {
374437 }
375438
376439 .my {
377- margin-top: 0.5rem;
378- margin-bottom: 0.5rem;
440+ margin-top: var(--grid-height);
441+ margin-bottom: var(--grid-height);
379442 }
380443
381444 .my-2 {
382- margin-top: 1rem;
383- margin-bottom: 1rem;
445+ margin-top: var(--line-height);
446+ margin-bottom: var(--line-height);
384447 }
385448
386449 .my-4 {
387- margin-top: 2rem;
388- margin-bottom: 2rem;
389-}
390-
391-.my-8 {
392- margin-top: 4rem;
393- margin-bottom: 4rem;
450+ margin-top: calc(var(--line-height) * 2);
451+ margin-bottom: calc(var(--line-height) * 2);
394452 }
395453
396454 .mx {
......@@ -404,35 +462,45 @@ figure {
404462 }
405463
406464 .m-1 {
407- margin: 0.5rem;
465+ margin: var(--grid-height);
408466 }
409467
410468 .p-1 {
411- padding: 0.5rem;
469+ padding: var(--grid-height);
412470 }
413471
414472 .p-0 {
415473 padding: 0;
416474 }
417475
476+.px {
477+ padding-left: 0.5rem;
478+ padding-right: 0.5rem;
479+}
480+
481+.px-2 {
482+ padding-left: 1rem;
483+ padding-right: 1rem;
484+}
485+
486+.px-4 {
487+ padding-left: 2rem;
488+ padding-right: 2rem;
489+}
490+
418491 .py {
419- padding-top: 0.5rem;
420- padding-bottom: 0.5rem;
492+ padding-top: var(--grid-height);
493+ padding-bottom: var(--grid-height);
421494 }
422495
423496 .py-2 {
424- padding-top: 1rem;
425- padding-bottom: 1rem;
497+ padding-top: var(--line-height);
498+ padding-bottom: var(--line-height);
426499 }
427500
428501 .py-4 {
429- padding-top: 2rem;
430- padding-bottom: 2rem;
431-}
432-
433-.py-8 {
434- padding-top: 4rem;
435- padding-bottom: 4rem;
502+ padding-top: calc(var(--line-height) * 2);
503+ padding-bottom: calc(var(--line-height) * 2);
436504 }
437505
438506 .justify-between {
......@@ -444,28 +512,28 @@ figure {
444512 }
445513
446514 .gap {
447- gap: 0.5rem;
515+ gap: var(--grid-height);
448516 }
449517
450518 .gap-2 {
451- gap: 1rem;
519+ gap: var(--line-height);
452520 }
453521
454522 .group {
455523 display: flex;
456524 flex-direction: column;
457- gap: 0.5rem;
525+ gap: var(--grid-height);
458526 }
459527
460528 .group-2 {
461529 display: flex;
462530 flex-direction: column;
463- gap: 1rem;
531+ gap: var(--line-height);
464532 }
465533
466534 .group-h {
467535 display: flex;
468- gap: 0.5rem;
536+ gap: var(--grid-height);
469537 align-items: center;
470538 }
471539
......@@ -497,9 +565,138 @@ figure {
497565 text-align: right;
498566 }
499567
568+.text-transform-none {
569+ text-transform: none;
570+}
571+
572+/* ==== MARKDOWN ==== */
573+
574+.md h1,
575+.md h2,
576+.md h3,
577+.md h4 {
578+ padding: 0;
579+ margin: 0;
580+ /* margin: 1.5rem 0 0.9rem 0; */
581+ font-weight: bold;
582+}
583+
584+.md h1 a,
585+.md h2 a,
586+.md h3 a,
587+.md h4 a {
588+ color: var(--grey-light);
589+ text-decoration: none;
590+}
591+
592+h1 code, h2 code, h3 code, h4 code {
593+ text-transform: none;
594+}
595+
596+.md h1 {
597+ font-size: 1rem;
598+ line-height: var(--line-height);
599+ margin-top: calc(var(--line-height) * 2);
600+ margin-bottom: var(--grid-height);
601+ text-transform: uppercase;
602+}
603+
604+.md h2, .md h3, .md h4 {
605+ font-size: 1rem;
606+ line-height: var(--line-height);
607+ margin-top: calc(var(--line-height) * 2);
608+ margin-bottom: var(--line-height);
609+ text-transform: uppercase;
610+ color: var(--white-dark);
611+}
612+
613+/* ==== HELPERS ==== */
614+
615+.logo-header {
616+ line-height: 1;
617+ display: inline-block;
618+ background-color: #FF79C6;
619+ background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
620+ color: transparent;
621+ background-clip: text;
622+ border: 3px solid #FF79C6;
623+ padding: 8px 10px 10px 10px;
624+ border-radius: 10px;
625+ background-size: 100%;
626+ margin: 0;
627+ -webkit-background-clip: text;
628+ -moz-background-clip: text;
629+ -webkit-text-fill-color: transparent;
630+ -moz-text-fill-color: transparent;
631+}
632+
633+.btn {
634+ border: 2px solid var(--link-color);
635+ color: var(--link-color);
636+ padding: 0.4rem 1rem;
637+ font-weight: bold;
638+ display: inline-block;
639+}
640+
641+.btn-link,
642+.btn-link:visited {
643+ border: 2px solid var(--link-color);
644+ color: var(--link-color);
645+ padding: var(--grid-height);
646+ text-decoration: none;
647+ font-weight: bold;
648+ display: inline-block;
649+}
650+
500651 .box {
501652 border: 2px solid var(--grey-light);
502- padding: 0.5rem 0.75rem;
653+ padding: var(--grid-height);
654+}
655+
656+.box-sm {
657+ border: 2px solid var(--grey-light);
658+ padding: var(--grid-height);
659+}
660+
661+.box-alert {
662+ border: 2px solid var(--hover);
663+ padding: var(--line-height);
664+}
665+
666+.box-sm-alert {
667+ border: 2px solid var(--hover);
668+ padding: var(--grid-height);
669+}
670+
671+.list-none {
672+ list-style-type: none;
673+}
674+
675+.list-square {
676+ list-style-type: square;
677+}
678+
679+.list-disc {
680+ list-style-type: disc;
681+}
682+
683+.list-decimal {
684+ list-style-type: decimal;
685+}
686+
687+.pill {
688+ border: 1px solid var(--link-color);
689+ color: var(--link-color);
690+}
691+
692+.pill-alert {
693+ border: 1px solid var(--hover);
694+ color: var(--hover);
695+}
696+
697+.pill-info {
698+ border: 1px solid var(--visited);
699+ color: var(--visited);
503700 }
504701
505702 @media only screen and (max-width: 40em) {
......@@ -515,3 +712,23 @@ figure {
515712 flex-direction: column;
516713 }
517714 }
715+
716+#debug {
717+ position: relative;
718+}
719+
720+#debug .debug-grid {
721+ width: 100%;
722+ height: 100%;
723+ position: absolute;
724+ top: 0;
725+ left: 0;
726+ right: 0;
727+ bottom: 0;
728+ z-index: -1;
729+ background-image:
730+ repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
731+ repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
732+ background-size: 1ch var(--grid-height);
733+ margin: 0;
734+}