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 border-radius: var(--border-radius);
521}
522
523.diff-stat {
524 padding: 1rem 0;
525 font-size: 0.9rem;
526 color: var(--dark);
527}
528
529.diff-stat div:first-child {
530 font-weight: 600;
531 padding-bottom: 0.5rem;
532}
533
534.diff-stat strong {
535 display: block;
536 font-size: 0.8rem;
537 text-transform: uppercase;
538 letter-spacing: 0.06em;
539 color: var(--gray);
540 padding: 0.5rem 0 0.25rem;
541}
542
543.diff-stat ul {
544 list-style: none;
545}
546
547.diff-stat ul li {
548 padding-left: 0.5em;
549 font-size: 0.85rem;
550 line-height: 1.6;
551}
552
553.diff-stat ul li a {
554 font-weight: 400;
555}
556
557.commit-hash {
558 font-family: var(--mono-font);
559}
560
561.commit-email {
562 font-family: var(--mono-font);
563 font-size: 0.85em;
564 color: var(--gray);
565}
566
567.commit-email:before {
568 content: "<";
569}
570
571.commit-email:after {
572 content: ">";
573}
574
575.commit {
576 margin-bottom: 1.5rem;
577}
578
579.commit pre {
580 font-family: var(--sans-font);
581 font-weight: 600;
582 font-size: 1.1rem;
583 padding-bottom: 0.75rem;
584 white-space: pre-wrap;
585}
586
587.commit-info {
588 color: var(--gray);
589 padding-bottom: 1.5rem;
590 font-size: 0.85rem;
591 line-height: 1.6;
592}
593
594.commit .commit-info {
595 padding-bottom: 0;
596}
597
598.commit strong {
599 display: inline-block;
600 font-size: 0.75rem;
601 text-transform: uppercase;
602 letter-spacing: 0.08em;
603 color: var(--gray);
604 min-width: 5rem;
605}
606
607.commit p {
608 display: inline;
609 font-family: var(--mono-font);
610 font-size: 0.85rem;
611 word-break: break-all;
612}
613
614.commit p a {
615 font-weight: 400;
616}
617
618.diff-add {
619 color: var(--diff-add);
620}
621
622.diff-del {
623 color: var(--diff-del);
624}
625
626.diff-noop {
627 color: var(--gray);
628}
629
630.diff-type {
631 display: inline-block;
632 font-family: var(--mono-font);
633 font-weight: 700;
634 font-size: 0.8rem;
635 padding: 0.1rem 0.4rem;
636 border-radius: 3px;
637 background: var(--light-gray);
638 color: var(--dark);
639 margin-right: 0.5rem;
640}
641
642/* ── Refs (branches & tags) ── */
643
644.refs {
645 margin-bottom: 1rem;
646}
647
648.refs > div {
649 padding: 0.6rem 0.75rem;
650 border-bottom: 1px solid var(--light-gray);
651 display: flex;
652 align-items: center;
653 gap: 1rem;
654 flex-wrap: wrap;
655}
656
657.refs > div:hover {
658 background: var(--light);
659}
660
661.refs strong {
662 font-family: var(--mono-font);
663 font-size: 0.9rem;
664 font-weight: 600;
665 min-width: 12rem;
666}
667
668.refs a {
669 font-size: 0.85rem;
670 font-weight: 500;
671 color: var(--gray);
672}
673
674.refs a:hover {
675 color: var(--red);
676}
677
678.refs pre {
679 width: 100%;
680 font-size: 0.85rem;
681 white-space: pre-wrap;
682 color: var(--gray);
683 padding: 0.5rem 0 0;
684}
685
686/* ── File View ── */
687
688.line-numbers {
689 white-space: pre-line;
690 -moz-user-select: -moz-none;
691 -khtml-user-select: none;
692 -webkit-user-select: none;
693 -o-user-select: none;
694 user-select: none;
695 display: flex;
696 float: left;
697 flex-direction: column;
698 margin-right: 1ch;
699 font-size: 0.8rem;
700 color: var(--gray);
701 text-align: right;
702 padding-right: 0.75rem;
703 border-right: 2px solid var(--light-gray);
704 min-width: 3.5rem;
705}
706
707.line-numbers a {
708 color: var(--gray);
709 font-weight: 400;
710}
711
712.line-numbers a:hover {
713 color: var(--red);
714 border: none;
715}
716
717.file-wrapper {
718 display: flex;
719 flex-direction: row;
720 grid-template-columns: 1rem minmax(0, 1fr);
721 gap: 1rem;
722 padding: 0.5rem;
723 background: var(--light);
724 border-radius: var(--border-radius);
725 border: 1px solid var(--light-gray);
726 overflow-x: auto;
727}
728
729.chroma-file-wrapper {
730 display: flex;
731 flex-direction: row;
732 grid-template-columns: 1rem minmax(0, 1fr);
733 overflow-x: auto;
734 padding: 0.5rem;
735 background: var(--light);
736 border-radius: var(--border-radius);
737 border: 1px solid var(--light-gray);
738}
739
740.file-content {
741 background: var(--light);
742 overflow-y: hidden;
743 overflow-x: auto;
744 font-size: 0.85rem;
745}
746
747.file-content pre {
748 white-space: pre;
749}
750
751main > p:first-child {
752 font-size: 0.9rem;
753 color: var(--gray);
754 padding-bottom: 1rem;
755 border-bottom: 1px solid var(--light-gray);
756 margin-bottom: 1rem;
757}
758
759main > p:first-child a {
760 color: var(--red);
761 font-weight: 500;
762}
763
764/* ── Error Pages ── */
765
766main h3:only-child {
767 text-align: center;
768 padding: 3rem 0;
769 font-size: 1.3rem;
770 color: var(--gray);
771 text-transform: none;
772 letter-spacing: 0;
773}
774
775/* ── Responsive ── */
776
777@media (max-width: 600px) {
778 body {
779 padding: 0 12px;
780 }
781
782 h1 {
783 font-size: 1.5rem;
784 }
785
786 .index {
787 grid-template-columns: 1fr;
788 }
789
790 .index-name {
791 border-bottom: 1px solid var(--light-gray);
792 }
793
794 .index .desc {
795 padding-bottom: 0.6rem;
796 margin-bottom: 0;
797 }
798
799 .index-idle {
800 grid-column: 1;
801 text-align: left;
802 padding: 0 0 0.5rem 1rem;
803 border-bottom: 1px solid var(--light-gray);
804 }
805
806 .index > div:nth-child(3n),
807 .index > div:nth-child(3n-1),
808 .index > div:nth-child(1),
809 .index > div:nth-child(2) {
810 grid-column: 1;
811 }
812
813 .log {
814 grid-template-columns: 1fr;
815 }
816
817 .log > div:nth-child(4n+3) {
818 grid-column: 1;
819 }
820
821 .log > div:nth-child(4n+4) {
822 grid-column: 1;
823 }
824
825 .tree {
826 grid-template-columns: 1fr;
827 }
828
829 .tree > div:nth-child(3n+1),
830 .tree > div:nth-child(3n+2) {
831 display: none;
832 }
833
834 pre {
835 font-size: 0.8rem;
836 }
837
838 nav ul {
839 gap: 0.2rem;
840 }
841
842 nav ul li a {
843 font-size: 0.78rem;
844 padding: 0.2rem 0.6rem;
845 }
846
847 .refs strong {
848 min-width: 8rem;
849 font-size: 0.85rem;
850 }
851
852 .commit {
853 font-size: 0.9rem;
854 }
855
856 header h1 {
857 font-size: 1.6rem;
858 }
859
860 header h2 {
861 font-size: 1.1rem;
862 }
863}
864
865/* ── Theme Toggle ── */
866
867#theme-toggle {
868 font: inherit;
869 cursor: pointer;
870 background: none;
871 border: 2px solid var(--medium-gray);
872 border-radius: var(--border-radius);
873 padding: 0.3rem 0.8rem;
874 font-size: 0.85rem;
875 font-weight: 600;
876 text-transform: uppercase;
877 letter-spacing: 0.04em;
878 color: var(--darker);
879 transition: all 0.15s ease;
880 line-height: inherit;
881 display: inline-flex;
882 align-items: center;
883 gap: 0.35rem;
884}
885
886#theme-toggle:hover {
887 color: var(--red);
888 border-color: var(--red);
889}
890
891#theme-toggle.theme-system::before { content: "🖥"; }
892#theme-toggle.theme-light::before { content: "☀"; }
893#theme-toggle.theme-dark::before { content: "☾"; }
894
895.theme-label {
896 margin-left: auto;
897 font-size: 0.75rem;
898 font-weight: 600;
899 text-transform: uppercase;
900 letter-spacing: 0.05em;
901 color: var(--gray);
902 display: flex;
903 align-items: center;
904 padding-right: 0.3rem;
905}