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