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 grid-column: 1;
228}
229
230.index-name a {
231 border-left: 3px solid var(--red);
232 padding-left: 0.75rem;
233 transition: border-width 0.1s ease;
234}
235
236.index-name a:hover {
237 border-left-width: 6px;
238 color: var(--red);
239 border-bottom: none;
240}
241
242.index-idle {
243 text-align: right;
244 color: var(--gray);
245 font-size: 0.85rem;
246 font-family: var(--mono-font);
247 padding: 0.5rem 0;
248 grid-column: 2;
249}
250
251.index .desc {
252 grid-column: 1 / -1;
253 font-weight: 400;
254 color: var(--gray);
255 font-style: italic;
256 font-size: 0.9rem;
257 padding: 0 0 0.6rem 1rem;
258 border-bottom: 1px solid var(--light-gray);
259 margin-bottom: 0.2rem;
260 min-height: 1.2em;
261}
262
263.index > div:nth-child(3n) {
264 grid-column: 2;
265}
266
267.index > div:nth-child(3n-1) {
268 grid-column: 1 / -1;
269}
270
271.index > div:nth-child(1) {
272 grid-column: 1;
273}
274
275.index > div:nth-child(2) {
276 grid-column: 1 / -1;
277}
278
279/* clone url */
280
281.clone-url {
282 padding: 2rem 0 0.5rem;
283}
284
285.clone-url strong {
286 display: block;
287 font-size: 0.8rem;
288 text-transform: uppercase;
289 letter-spacing: 0.08em;
290 color: var(--gray);
291 padding-bottom: 0.4rem;
292}
293
294.clone-url pre {
295 background: var(--light);
296 padding: 0.75rem 1rem;
297 border-radius: var(--border-radius);
298 border-left: 3px solid var(--red);
299 font-size: 0.85rem;
300 color: var(--dark);
301 white-space: pre-wrap;
302 overflow-x: auto;
303}
304
305/* ── File Tree ── */
306
307.tree {
308 display: grid;
309 grid-template-columns: minmax(10ch, auto) 8ch 1fr;
310 grid-row-gap: 0.15em;
311 grid-column-gap: 1em;
312 min-width: 0;
313}
314
315.tree > div {
316 padding: 0.25rem 0;
317 border-bottom: 1px solid var(--light-gray);
318}
319
320.tree > div:nth-child(3n+1) {
321 font-family: var(--mono-font);
322 font-size: 0.8rem;
323 color: var(--gray);
324}
325
326.tree > div:nth-child(3n+2) {
327 font-family: var(--mono-font);
328 font-size: 0.8rem;
329 color: var(--gray);
330 text-align: right;
331}
332
333.tree > div:nth-child(3n) {
334 font-weight: 500;
335}
336
337.tree > div:nth-child(3n) a {
338 border-bottom: 1px solid transparent;
339}
340
341.tree > div:nth-child(3n) a:hover {
342 border-bottom: 1px solid var(--red);
343}
344
345.mode, .size {
346 font-family: var(--mono-font);
347}
348
349.size {
350 text-align: right;
351}
352
353/* ── Commit Log ── */
354
355.log {
356 display: grid;
357 grid-template-columns: minmax(0, 1.3fr) minmax(14rem, 1fr);
358 grid-row-gap: 0;
359}
360
361.log > div {
362 padding: 0.6rem 0;
363}
364
365.log > div:nth-child(4n+1),
366.log > div:nth-child(4n+2) {
367 border-bottom: 1px solid var(--light-gray);
368 padding-bottom: 0.8rem;
369}
370
371.log > div:nth-child(4n+3) {
372 grid-column: 1;
373}
374
375.log > div:nth-child(4n+4) {
376 grid-column: 2;
377}
378
379.log > div:nth-child(4n+3),
380.log > div:nth-child(4n+4) {
381 border-bottom: 1px solid var(--light-gray);
382 padding-top: 0;
383}
384
385.log > div:nth-child(1),
386.log > div:nth-child(2) {
387 padding-top: 0;
388}
389
390.log > div:nth-child(4n+1) .commit-hash {
391 font-family: var(--mono-font);
392 font-size: 0.85rem;
393 font-weight: 600;
394 color: var(--red);
395}
396
397.log > div:nth-child(4n+1) .commit-hash:hover {
398 text-decoration: underline;
399}
400
401.log > div:nth-child(4n+1) pre {
402 font-family: var(--sans-font);
403 font-weight: 600;
404 font-size: 1rem;
405 padding-top: 0.2rem;
406 white-space: pre-wrap;
407 overflow: hidden;
408}
409
410.log > div:nth-child(4n+2) {
411 text-align: right;
412 font-size: 0.8rem;
413 color: var(--gray);
414 padding-top: 0.1rem;
415 line-height: 1.4;
416}
417
418.log > div:nth-child(4n+2) .commit-email {
419 display: none;
420}
421
422.log > div:nth-child(4n+4) {
423 font-size: 0.8rem;
424 color: var(--gray);
425 padding-top: 0.2rem;
426 line-height: 1.4;
427}
428
429/* ── Readme ── */
430
431.readme {
432 margin: 2rem 0 1rem;
433 padding: 1.5rem;
434 background: var(--light);
435 border-radius: var(--border-radius);
436 border-left: 3px solid var(--red);
437}
438
439.readme h1,
440.readme h2,
441.readme h3 {
442 text-transform: none;
443 letter-spacing: 0;
444 color: var(--darker);
445}
446
447.readme h1 { font-size: 1.5rem; }
448.readme h2 { font-size: 1.25rem; }
449.readme h3 { font-size: 1.1rem; }
450
451.readme pre {
452 white-space: pre-wrap;
453 overflow-x: auto;
454 background: var(--white);
455 padding: 0.75rem;
456 border-radius: 3px;
457 font-size: 0.85rem;
458}
459
460.readme ul {
461 padding: revert;
462}
463
464.readme img {
465 max-width: 100%;
466}
467
468.readme a {
469 color: var(--red);
470 font-weight: 500;
471}
472
473.readme a:hover {
474 border-bottom: 2px solid var(--red);
475}
476
477.readme code {
478 font-size: 0.85em;
479 background: var(--white);
480 padding: 0.15em 0.3em;
481 border-radius: 3px;
482}
483
484/* ── Diff / Commit ── */
485
486.diff {
487 margin: 1.5rem 0;
488 padding: 1rem 0 1rem;
489 border-top: 2px solid var(--light-gray);
490}
491
492.diff:first-child {
493 border-top: none;
494}
495
496.diff pre {
497 overflow-x: auto;
498 font-size: 0.85rem;
499 line-height: 1.5;
500 background: var(--light);
501 padding: 1rem;
502 border-radius: var(--border-radius);
503}
504
505.diff-stat {
506 padding: 1rem 0;
507 font-size: 0.9rem;
508 color: var(--dark);
509}
510
511.diff-stat div:first-child {
512 font-weight: 600;
513 padding-bottom: 0.5rem;
514}
515
516.diff-stat strong {
517 display: block;
518 font-size: 0.8rem;
519 text-transform: uppercase;
520 letter-spacing: 0.06em;
521 color: var(--gray);
522 padding: 0.5rem 0 0.25rem;
523}
524
525.diff-stat ul {
526 list-style: none;
527}
528
529.diff-stat ul li {
530 padding-left: 0.5em;
531 font-size: 0.85rem;
532 line-height: 1.6;
533}
534
535.diff-stat ul li a {
536 font-weight: 400;
537}
538
539.commit-hash {
540 font-family: var(--mono-font);
541}
542
543.commit-email {
544 font-family: var(--mono-font);
545 font-size: 0.85em;
546 color: var(--gray);
547}
548
549.commit-email:before {
550 content: "<";
551}
552
553.commit-email:after {
554 content: ">";
555}
556
557.commit {
558 margin-bottom: 1.5rem;
559}
560
561.commit pre {
562 font-family: var(--sans-font);
563 font-weight: 600;
564 font-size: 1.1rem;
565 padding-bottom: 0.75rem;
566 white-space: pre-wrap;
567}
568
569.commit-info {
570 color: var(--gray);
571 padding-bottom: 1.5rem;
572 font-size: 0.85rem;
573 line-height: 1.6;
574}
575
576.commit .commit-info {
577 padding-bottom: 0;
578}
579
580.commit strong {
581 display: inline-block;
582 font-size: 0.75rem;
583 text-transform: uppercase;
584 letter-spacing: 0.08em;
585 color: var(--gray);
586 min-width: 5rem;
587}
588
589.commit p {
590 display: inline;
591 font-family: var(--mono-font);
592 font-size: 0.85rem;
593 word-break: break-all;
594}
595
596.commit p a {
597 font-weight: 400;
598}
599
600.diff-add {
601 color: #2e7d32;
602}
603
604@media (prefers-color-scheme: dark) {
605 .diff-add {
606 color: #66bb6a;
607 }
608}
609
610.diff-del {
611 color: #c62828;
612}
613
614@media (prefers-color-scheme: dark) {
615 .diff-del {
616 color: #ef5350;
617 }
618}
619
620.diff-noop {
621 color: var(--gray);
622}
623
624.diff-type {
625 display: inline-block;
626 font-family: var(--mono-font);
627 font-weight: 700;
628 font-size: 0.8rem;
629 padding: 0.1rem 0.4rem;
630 border-radius: 3px;
631 background: var(--light-gray);
632 color: var(--dark);
633 margin-right: 0.5rem;
634}
635
636/* ── Refs (branches & tags) ── */
637
638.refs {
639 margin-bottom: 1rem;
640}
641
642.refs > div {
643 padding: 0.6rem 0.75rem;
644 border-bottom: 1px solid var(--light-gray);
645 display: flex;
646 align-items: center;
647 gap: 1rem;
648 flex-wrap: wrap;
649}
650
651.refs > div:hover {
652 background: var(--light);
653}
654
655.refs strong {
656 font-family: var(--mono-font);
657 font-size: 0.9rem;
658 font-weight: 600;
659 min-width: 12rem;
660}
661
662.refs a {
663 font-size: 0.85rem;
664 font-weight: 500;
665 color: var(--gray);
666}
667
668.refs a:hover {
669 color: var(--red);
670}
671
672.refs pre {
673 width: 100%;
674 font-size: 0.85rem;
675 white-space: pre-wrap;
676 color: var(--gray);
677 padding: 0.5rem 0 0;
678}
679
680/* ── File View ── */
681
682.line-numbers {
683 white-space: pre-line;
684 -moz-user-select: -moz-none;
685 -khtml-user-select: none;
686 -webkit-user-select: none;
687 -o-user-select: none;
688 user-select: none;
689 display: flex;
690 float: left;
691 flex-direction: column;
692 margin-right: 1ch;
693 font-size: 0.8rem;
694 color: var(--gray);
695 text-align: right;
696 padding-right: 0.75rem;
697 border-right: 2px solid var(--light-gray);
698 min-width: 3.5rem;
699}
700
701.line-numbers a {
702 color: var(--gray);
703 font-weight: 400;
704}
705
706.line-numbers a:hover {
707 color: var(--red);
708 border: none;
709}
710
711.file-wrapper {
712 display: flex;
713 flex-direction: row;
714 grid-template-columns: 1rem minmax(0, 1fr);
715 gap: 1rem;
716 padding: 0.5rem;
717 background: var(--light);
718 border-radius: var(--border-radius);
719 border: 1px solid var(--light-gray);
720 overflow-x: auto;
721}
722
723.chroma-file-wrapper {
724 display: flex;
725 flex-direction: row;
726 grid-template-columns: 1rem minmax(0, 1fr);
727 overflow-x: auto;
728 padding: 0.5rem;
729 background: var(--light);
730 border-radius: var(--border-radius);
731 border: 1px solid var(--light-gray);
732}
733
734.file-content {
735 background: var(--light);
736 overflow-y: hidden;
737 overflow-x: auto;
738 font-size: 0.85rem;
739}
740
741.file-content pre {
742 white-space: pre;
743}
744
745main > p:first-child {
746 font-size: 0.9rem;
747 color: var(--gray);
748 padding-bottom: 1rem;
749 border-bottom: 1px solid var(--light-gray);
750 margin-bottom: 1rem;
751}
752
753main > p:first-child a {
754 color: var(--red);
755 font-weight: 500;
756}
757
758/* ── Error Pages ── */
759
760main h3:only-child {
761 text-align: center;
762 padding: 3rem 0;
763 font-size: 1.3rem;
764 color: var(--gray);
765 text-transform: none;
766 letter-spacing: 0;
767}
768
769/* ── Responsive ── */
770
771@media (max-width: 600px) {
772 body {
773 padding: 0 12px;
774 }
775
776 h1 {
777 font-size: 1.5rem;
778 }
779
780 .index {
781 grid-template-columns: 1fr;
782 }
783
784 .index-name {
785 border-bottom: 1px solid var(--light-gray);
786 }
787
788 .index .desc {
789 padding-bottom: 0.6rem;
790 margin-bottom: 0;
791 }
792
793 .index-idle {
794 grid-column: 1;
795 text-align: left;
796 padding: 0 0 0.5rem 1rem;
797 border-bottom: 1px solid var(--light-gray);
798 }
799
800 .index > div:nth-child(3n),
801 .index > div:nth-child(3n-1),
802 .index > div:nth-child(1),
803 .index > div:nth-child(2) {
804 grid-column: 1;
805 }
806
807 .log {
808 grid-template-columns: 1fr;
809 }
810
811 .log > div:nth-child(4n+3) {
812 grid-column: 1;
813 }
814
815 .log > div:nth-child(4n+4) {
816 grid-column: 1;
817 }
818
819 .tree {
820 grid-template-columns: 1fr;
821 }
822
823 .tree > div:nth-child(3n+1),
824 .tree > div:nth-child(3n+2) {
825 display: none;
826 }
827
828 pre {
829 font-size: 0.8rem;
830 }
831
832 nav ul {
833 gap: 0.2rem;
834 }
835
836 nav ul li a {
837 font-size: 0.78rem;
838 padding: 0.2rem 0.6rem;
839 }
840
841 .refs strong {
842 min-width: 8rem;
843 font-size: 0.85rem;
844 }
845
846 .commit {
847 font-size: 0.9rem;
848 }
849
850 header h1 {
851 font-size: 1.6rem;
852 }
853
854 header h2 {
855 font-size: 1.1rem;
856 }
857}