static/style.css (view raw)
1:root {
2 --red: #c1272d;
3 --red-dark: #a02026;
4 --red-light: #e8494f;
5 --white: #fff;
6 --light: #f4f4f2;
7 --light-gray: #e8e8e4;
8 --medium-gray: #c8c8c4;
9 --gray: #888;
10 --dark: #444;
11 --darker: #1a1a1a;
12
13 --sans-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
14 --mono-font: "JetBrains Mono", "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", "Roboto Mono", Menlo, Consolas, monospace;
15
16 --border-radius: 4px;
17}
18
19@media (prefers-color-scheme: dark) {
20 :root {
21 color-scheme: dark light;
22 --red: #e8494f;
23 --red-dark: #c1272d;
24 --red-light: #f06a6f;
25 --white: #0d0d0d;
26 --light: #1a1a1a;
27 --light-gray: #2a2a2a;
28 --medium-gray: #3a3a3a;
29 --gray: #888;
30 --dark: #ccc;
31 --darker: #eee;
32 }
33}
34
35html {
36 background: var(--white);
37 -webkit-text-size-adjust: none;
38 font-family: var(--sans-font);
39 font-weight: 400;
40 font-size: 15px;
41 line-height: 1.6;
42}
43
44pre, code, kbd, samp {
45 font-family: var(--mono-font);
46}
47
48::selection {
49 background: var(--red);
50 color: #fff;
51 opacity: 0.85;
52}
53
54* {
55 box-sizing: border-box;
56 padding: 0;
57 margin: 0;
58}
59
60body {
61 max-width: 1000px;
62 padding: 0 20px;
63 margin: 0 auto 60px;
64 border-top: 6px solid var(--red);
65}
66
67/* ── Typography ── */
68
69h1, h2, h3, h4 {
70 font-weight: 700;
71 letter-spacing: -0.02em;
72 line-height: 1.2;
73}
74
75h1 {
76 font-size: 2rem;
77 padding: 1.5rem 0 0.25rem;
78}
79
80h2 {
81 font-size: 1.5rem;
82 padding: 1.25rem 0 0.25rem;
83}
84
85h3 {
86 font-size: 1.1rem;
87 padding: 1.5rem 0 0.5rem;
88 text-transform: uppercase;
89 letter-spacing: 0.05em;
90 color: var(--gray);
91 font-weight: 600;
92}
93
94strong {
95 font-weight: 600;
96}
97
98/* ── Header ── */
99
100header {
101 padding: 1rem 0 0.5rem;
102}
103
104header h1 {
105 font-size: 2.2rem;
106 font-weight: 800;
107 letter-spacing: -0.03em;
108 padding: 0;
109}
110
111header h1 a {
112 color: var(--darker);
113 border: none;
114}
115
116header h1 a:hover {
117 border: none;
118 color: var(--red);
119}
120
121header h2 {
122 font-size: 1.3rem;
123 font-weight: 700;
124 padding: 0.5rem 0 0;
125}
126
127header .ref {
128 font-family: var(--mono-font);
129 font-size: 0.85rem;
130 font-weight: 400;
131 color: var(--gray);
132 display: inline-block;
133 padding-top: 0.2em;
134 letter-spacing: 0;
135}
136
137header .desc {
138 color: var(--gray);
139 font-weight: 400;
140 font-style: italic;
141 font-size: 1rem;
142 padding: 0.25rem 0 0.5rem;
143}
144
145/* ── Navigation ── */
146
147nav {
148 padding: 0.5rem 0 1.5rem;
149 border-bottom: 2px solid var(--light-gray);
150 margin-bottom: 0.5rem;
151}
152
153nav ul {
154 list-style: none;
155 display: flex;
156 gap: 0.25rem;
157 flex-wrap: wrap;
158}
159
160nav ul li {
161 display: inline;
162}
163
164nav ul li a {
165 display: inline-block;
166 padding: 0.3rem 0.8rem;
167 font-size: 0.85rem;
168 font-weight: 600;
169 text-transform: uppercase;
170 letter-spacing: 0.04em;
171 color: var(--darker);
172 border: 2px solid var(--medium-gray);
173 border-radius: var(--border-radius);
174 transition: all 0.15s ease;
175}
176
177nav ul li a:hover {
178 color: var(--red);
179 border-color: var(--red);
180}
181
182nav ul li:first-child a {
183 border-color: var(--red);
184 color: var(--red);
185}
186
187nav ul li:first-child a:hover {
188 background: var(--red);
189 color: #fff;
190}
191
192/* ── Links ── */
193
194a {
195 text-decoration: none;
196 color: var(--darker);
197 word-wrap: break-word;
198 transition: color 0.15s ease;
199}
200
201a:hover {
202 color: var(--red);
203}
204
205main a {
206 font-weight: 500;
207}
208
209main a:hover {
210 border-bottom: 2px solid var(--red);
211}
212
213/* ── Index Page ── */
214
215.index {
216 padding-top: 1.5rem;
217 display: grid;
218 grid-template-columns: 1fr auto;
219 grid-row-gap: 0.15em;
220 min-width: 0;
221}
222
223.index-name {
224 font-weight: 600;
225 font-size: 1.05rem;
226 padding: 0.4rem 0;
227}
228
229.index-name a {
230 border-left: 3px solid var(--red);
231 padding-left: 0.75rem;
232 transition: border-width 0.1s ease;
233}
234
235.index-name a:hover {
236 border-left-width: 6px;
237 color: var(--red);
238 border-bottom: none;
239}
240
241.index-idle {
242 text-align: right;
243 color: var(--gray);
244 font-size: 0.85rem;
245 font-family: var(--mono-font);
246 padding: 0.5rem 0;
247 grid-column: 2;
248}
249
250.index .desc {
251 grid-column: 1 / -1;
252 font-weight: 400;
253 color: var(--gray);
254 font-style: italic;
255 font-size: 0.9rem;
256 padding: 0 0 0.6rem 1rem;
257 border-bottom: 1px solid var(--light-gray);
258 margin-bottom: 0.2rem;
259 min-height: 1.2em;
260}
261
262.index > div:nth-child(3n) {
263 grid-column: 1 / -1;
264}
265
266.index > div:nth-child(3n-1) {
267 grid-column: 2;
268}
269
270.index > div:nth-child(1) {
271 grid-column: 1;
272}
273
274.index > div:nth-child(2) {
275 grid-column: 2;
276}
277
278/* clone url */
279
280.clone-url {
281 padding: 2rem 0 0.5rem;
282}
283
284.clone-url strong {
285 display: block;
286 font-size: 0.8rem;
287 text-transform: uppercase;
288 letter-spacing: 0.08em;
289 color: var(--gray);
290 padding-bottom: 0.4rem;
291}
292
293.clone-url pre {
294 background: var(--light);
295 padding: 0.75rem 1rem;
296 border-radius: var(--border-radius);
297 border-left: 3px solid var(--red);
298 font-size: 0.85rem;
299 color: var(--dark);
300 white-space: pre-wrap;
301 overflow-x: auto;
302}
303
304/* ── File Tree ── */
305
306.tree {
307 display: grid;
308 grid-template-columns: minmax(10ch, auto) 8ch 1fr;
309 grid-row-gap: 0.15em;
310 grid-column-gap: 1em;
311 min-width: 0;
312}
313
314.tree > div {
315 padding: 0.25rem 0;
316 border-bottom: 1px solid var(--light-gray);
317}
318
319.tree > div:nth-child(3n+1) {
320 font-family: var(--mono-font);
321 font-size: 0.8rem;
322 color: var(--gray);
323}
324
325.tree > div:nth-child(3n+2) {
326 font-family: var(--mono-font);
327 font-size: 0.8rem;
328 color: var(--gray);
329 text-align: right;
330}
331
332.tree > div:nth-child(3n) {
333 font-weight: 500;
334}
335
336.tree > div:nth-child(3n) a {
337 border-bottom: 1px solid transparent;
338}
339
340.tree > div:nth-child(3n) a:hover {
341 border-bottom: 1px solid var(--red);
342}
343
344.mode, .size {
345 font-family: var(--mono-font);
346}
347
348.size {
349 text-align: right;
350}
351
352/* ── Commit Log ── */
353
354.log {
355 display: grid;
356 grid-template-columns: 1fr auto;
357 grid-row-gap: 0;
358}
359
360.log > div {
361 padding: 0.6rem 0;
362}
363
364.log > div:nth-child(4n+1),
365.log > div:nth-child(4n+2) {
366 border-bottom: 1px solid var(--light-gray);
367 padding-bottom: 0.8rem;
368}
369
370.log > div:nth-child(4n+3) {
371 grid-column: 1;
372}
373
374.log > div:nth-child(4n+4) {
375 grid-column: 2;
376}
377
378.log > div:nth-child(4n+3),
379.log > div:nth-child(4n+4) {
380 border-bottom: 1px solid var(--light-gray);
381 padding-top: 0;
382}
383
384.log > div:nth-child(1),
385.log > div:nth-child(2) {
386 padding-top: 0;
387}
388
389.commit-hash {
390 font-family: var(--mono-font);
391 font-size: 0.85rem;
392 font-weight: 600;
393 color: var(--red);
394}
395
396.commit-hash:hover {
397 text-decoration: underline;
398}
399
400.log > div:nth-child(4n+1) pre {
401 font-family: var(--sans-font);
402 font-weight: 600;
403 font-size: 1rem;
404 padding-top: 0.2rem;
405 white-space: pre-wrap;
406 overflow: hidden;
407}
408
409.log > div:nth-child(4n+2),
410.log > div:nth-child(4n+4) {
411 text-align: right;
412 font-size: 0.8rem;
413 color: var(--gray);
414 padding-top: 0.1rem;
415 line-height: 1.4;
416 max-width: 22rem;
417 overflow-wrap: break-word;
418}
419
420.log > div:nth-child(4n+2) .commit-email,
421.log > div:nth-child(4n+4) .commit-email {
422 display: none;
423}
424
425
426
427/* ── Readme ── */
428
429.readme {
430 margin: 2rem 0 1rem;
431 padding: 1.5rem;
432 background: var(--light);
433 border-radius: var(--border-radius);
434 border-left: 3px solid var(--red);
435}
436
437.readme h1,
438.readme h2,
439.readme h3 {
440 text-transform: none;
441 letter-spacing: 0;
442 color: var(--darker);
443}
444
445.readme h1 { font-size: 1.5rem; }
446.readme h2 { font-size: 1.25rem; }
447.readme h3 { font-size: 1.1rem; }
448
449.readme pre {
450 white-space: pre-wrap;
451 overflow-x: auto;
452 background: var(--white);
453 padding: 0.75rem;
454 border-radius: 3px;
455 font-size: 0.85rem;
456}
457
458.readme ul {
459 padding: revert;
460}
461
462.readme img {
463 max-width: 100%;
464}
465
466.readme a {
467 color: var(--red);
468 font-weight: 500;
469}
470
471.readme a:hover {
472 border-bottom: 2px solid var(--red);
473}
474
475.readme code {
476 font-size: 0.85em;
477 background: var(--white);
478 padding: 0.15em 0.3em;
479 border-radius: 3px;
480}
481
482/* ── Diff / Commit ── */
483
484.diff {
485 margin: 1.5rem 0;
486 padding: 1rem 0 1rem;
487 border-top: 2px solid var(--light-gray);
488}
489
490.diff:first-child {
491 border-top: none;
492}
493
494.diff pre {
495 overflow-x: auto;
496 font-size: 0.85rem;
497 line-height: 1.5;
498 background: var(--light);
499 padding: 1rem;
500 border-radius: var(--border-radius);
501}
502
503.diff-stat {
504 padding: 1rem 0;
505 font-size: 0.9rem;
506 color: var(--dark);
507}
508
509.diff-stat div:first-child {
510 font-weight: 600;
511 padding-bottom: 0.5rem;
512}
513
514.diff-stat strong {
515 display: block;
516 font-size: 0.8rem;
517 text-transform: uppercase;
518 letter-spacing: 0.06em;
519 color: var(--gray);
520 padding: 0.5rem 0 0.25rem;
521}
522
523.diff-stat ul {
524 list-style: none;
525}
526
527.diff-stat ul li {
528 padding-left: 0.5em;
529 font-size: 0.85rem;
530 line-height: 1.6;
531}
532
533.diff-stat ul li a {
534 font-weight: 400;
535}
536
537.commit-hash {
538 font-family: var(--mono-font);
539}
540
541.commit-email {
542 font-family: var(--mono-font);
543 font-size: 0.85em;
544 color: var(--gray);
545}
546
547.commit-email:before {
548 content: "<";
549}
550
551.commit-email:after {
552 content: ">";
553}
554
555.commit {
556 margin-bottom: 1.5rem;
557}
558
559.commit pre {
560 font-family: var(--sans-font);
561 font-weight: 600;
562 font-size: 1.1rem;
563 padding-bottom: 0.75rem;
564 white-space: pre-wrap;
565}
566
567.commit-info {
568 color: var(--gray);
569 padding-bottom: 1.5rem;
570 font-size: 0.85rem;
571 line-height: 1.6;
572}
573
574.commit .commit-info {
575 padding-bottom: 0;
576}
577
578.commit strong {
579 display: inline-block;
580 font-size: 0.75rem;
581 text-transform: uppercase;
582 letter-spacing: 0.08em;
583 color: var(--gray);
584 min-width: 5rem;
585}
586
587.commit p {
588 display: inline;
589 font-family: var(--mono-font);
590 font-size: 0.85rem;
591 word-break: break-all;
592}
593
594.commit p a {
595 font-weight: 400;
596}
597
598.diff-add {
599 color: #2e7d32;
600}
601
602@media (prefers-color-scheme: dark) {
603 .diff-add {
604 color: #66bb6a;
605 }
606}
607
608.diff-del {
609 color: #c62828;
610}
611
612@media (prefers-color-scheme: dark) {
613 .diff-del {
614 color: #ef5350;
615 }
616}
617
618.diff-noop {
619 color: var(--gray);
620}
621
622.diff-type {
623 display: inline-block;
624 font-family: var(--mono-font);
625 font-weight: 700;
626 font-size: 0.8rem;
627 padding: 0.1rem 0.4rem;
628 border-radius: 3px;
629 background: var(--light-gray);
630 color: var(--dark);
631 margin-right: 0.5rem;
632}
633
634/* ── Refs (branches & tags) ── */
635
636.refs {
637 margin-bottom: 1rem;
638}
639
640.refs > div {
641 padding: 0.6rem 0.75rem;
642 border-bottom: 1px solid var(--light-gray);
643 display: flex;
644 align-items: center;
645 gap: 1rem;
646 flex-wrap: wrap;
647}
648
649.refs > div:hover {
650 background: var(--light);
651}
652
653.refs strong {
654 font-family: var(--mono-font);
655 font-size: 0.9rem;
656 font-weight: 600;
657 min-width: 12rem;
658}
659
660.refs a {
661 font-size: 0.85rem;
662 font-weight: 500;
663 color: var(--gray);
664}
665
666.refs a:hover {
667 color: var(--red);
668}
669
670.refs pre {
671 width: 100%;
672 font-size: 0.85rem;
673 white-space: pre-wrap;
674 color: var(--gray);
675 padding: 0.5rem 0 0;
676}
677
678/* ── File View ── */
679
680.line-numbers {
681 white-space: pre-line;
682 -moz-user-select: -moz-none;
683 -khtml-user-select: none;
684 -webkit-user-select: none;
685 -o-user-select: none;
686 user-select: none;
687 display: flex;
688 float: left;
689 flex-direction: column;
690 margin-right: 1ch;
691 font-size: 0.8rem;
692 color: var(--gray);
693 text-align: right;
694 padding-right: 0.75rem;
695 border-right: 2px solid var(--light-gray);
696 min-width: 3.5rem;
697}
698
699.line-numbers a {
700 color: var(--gray);
701 font-weight: 400;
702}
703
704.line-numbers a:hover {
705 color: var(--red);
706 border: none;
707}
708
709.file-wrapper {
710 display: flex;
711 flex-direction: row;
712 grid-template-columns: 1rem minmax(0, 1fr);
713 gap: 1rem;
714 padding: 0.5rem;
715 background: var(--light);
716 border-radius: var(--border-radius);
717 border: 1px solid var(--light-gray);
718 overflow-x: auto;
719}
720
721.chroma-file-wrapper {
722 display: flex;
723 flex-direction: row;
724 grid-template-columns: 1rem minmax(0, 1fr);
725 overflow-x: auto;
726 padding: 0.5rem;
727 background: var(--light);
728 border-radius: var(--border-radius);
729 border: 1px solid var(--light-gray);
730}
731
732.file-content {
733 background: var(--light);
734 overflow-y: hidden;
735 overflow-x: auto;
736 font-size: 0.85rem;
737}
738
739.file-content pre {
740 white-space: pre;
741}
742
743main > p:first-child {
744 font-size: 0.9rem;
745 color: var(--gray);
746 padding-bottom: 1rem;
747 border-bottom: 1px solid var(--light-gray);
748 margin-bottom: 1rem;
749}
750
751main > p:first-child a {
752 color: var(--red);
753 font-weight: 500;
754}
755
756/* ── Error Pages ── */
757
758main h3:only-child {
759 text-align: center;
760 padding: 3rem 0;
761 font-size: 1.3rem;
762 color: var(--gray);
763 text-transform: none;
764 letter-spacing: 0;
765}
766
767/* ── Responsive ── */
768
769@media (max-width: 600px) {
770 body {
771 padding: 0 12px;
772 }
773
774 h1 {
775 font-size: 1.5rem;
776 }
777
778 .index {
779 grid-template-columns: 1fr;
780 }
781
782 .index-name {
783 border-bottom: 1px solid var(--light-gray);
784 }
785
786 .index .desc {
787 padding-bottom: 0.6rem;
788 margin-bottom: 0;
789 }
790
791 .index-idle {
792 grid-column: 1;
793 text-align: left;
794 padding: 0 0 0.5rem 1rem;
795 border-bottom: 1px solid var(--light-gray);
796 }
797
798 .index > div:nth-child(3n),
799 .index > div:nth-child(3n-1),
800 .index > div:nth-child(1),
801 .index > div:nth-child(2) {
802 grid-column: 1;
803 }
804
805 .log {
806 grid-template-columns: 1fr;
807 }
808
809 .log > div:nth-child(4n+3) {
810 grid-column: 1;
811 }
812
813 .log > div:nth-child(4n+4) {
814 grid-column: 1;
815 }
816
817 .tree {
818 grid-template-columns: 1fr;
819 }
820
821 .tree > div:nth-child(3n+1),
822 .tree > div:nth-child(3n+2) {
823 display: none;
824 }
825
826 pre {
827 font-size: 0.8rem;
828 }
829
830 nav ul {
831 gap: 0.2rem;
832 }
833
834 nav ul li a {
835 font-size: 0.78rem;
836 padding: 0.2rem 0.6rem;
837 }
838
839 .refs strong {
840 min-width: 8rem;
841 font-size: 0.85rem;
842 }
843
844 .commit {
845 font-size: 0.9rem;
846 }
847
848 header h1 {
849 font-size: 1.6rem;
850 }
851
852 header h2 {
853 font-size: 1.1rem;
854 }
855}