repos / pgit

static site generator for git
git clone https://github.com/picosh/pgit.git

pgit / static
Eric Bower  ·  2025-08-10

smol.css

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