[OCaml] Mobile-friendly clone of cgit.

refactor extract repeated colors into :root custom properties

Define 8 color tokens in :root and replace all 40+ hardcoded occurrences: --color-muted, --color-link-hover, --color-hover-bg, --color-surface-raised, --color-border, --color-border-subtle, --color-accent, --color-accent-hover.

Commit
87428d69bf2f253d36a1da33c09c4c22a52ba478
Author
Claude Sonnet 4 <claude@anthropic.invalid>
Author date
Committer
Marius Peter <dev@marius-peter.com>
Committer date
lib/static/styles.css
index a122d19e..7b79c6dd 100644..100644
@@ -4,6 +4,16 @@
4 4 --nav-height: 48px;
5 5 --toolbar-height: 52px;
6 6 --target-size: 44px;
7 Added:
8 Added: /* Color tokens */
9 Added: --color-muted: #b0b0b0;
10 Added: --color-link-hover: skyblue;
11 Added: --color-hover-bg: #252525;
12 Added: --color-surface-raised: #2a2a2a;
13 Added: --color-border: #303030;
14 Added: --color-border-subtle: #3a3a3a;
15 Added: --color-accent: rgb(194, 79, 30);
16 Added: --color-accent-hover: rgb(132, 40, 0);
7 17 }
8 18
9 19 body {
@@ -25,7 +35,7 @@
25 35 }
26 36
27 37 a:hover {
28 Removed: color: skyblue;
38 Added: color: var(--color-link-hover);
29 39 text-decoration: underline;
30 40 }
31 41
@@ -33,7 +43,7 @@
33 43 li:has(> a:hover),
34 44 span:has(> a:hover),
35 45 dd:has(> a:hover) {
36 Removed: background-color: #252525;
46 Added: background-color: var(--color-hover-bg);
37 47 border-radius: 0.25rem;
38 48 }
39 49
@@ -56,12 +66,12 @@
56 66
57 67 #page-header p {
58 68 margin: 0;
59 Removed: color: #b0b0b0;
69 Added: color: var(--color-muted);
60 70 }
61 71
62 72 #page-header .subtitle {
63 73 margin: 0;
64 Removed: color: #b0b0b0;
74 Added: color: var(--color-muted);
65 75 }
66 76
67 77 .skip-link {
@@ -85,7 +95,7 @@
85 95 }
86 96
87 97 :focus-visible {
88 Removed: outline: 2px solid skyblue;
98 Added: outline: 2px solid var(--color-link-hover);
89 99 outline-offset: 2px;
90 100 }
91 101
@@ -230,12 +240,12 @@
230 240
231 241 nav#top ul li[aria-current="page"] {
232 242 border-radius: 0.5rem;
233 Removed: background-color: rgb(194, 79, 30);
243 Added: background-color: var(--color-accent);
234 244 }
235 245
236 246 nav#top ul li[aria-current="page"] a:hover {
237 247 border-radius: 0.5rem;
238 Removed: background-color: rgb(132, 40, 0);
248 Added: background-color: var(--color-accent-hover);
239 249 color: white;
240 250 text-decoration: none;
241 251 }
@@ -250,12 +260,12 @@
250 260 }
251 261
252 262 #main ul li {
253 Removed: border: 1px solid #303030;
263 Added: border: 1px solid var(--color-border);
254 264 }
255 265
256 266 #main .tree-nested li {
257 267 border: none;
258 Removed: border-top: 1px solid #252525;
268 Added: border-top: 1px solid var(--color-hover-bg);
259 269 }
260 270
261 271 #main .tree-nested li:first-child {
@@ -278,7 +288,7 @@
278 288 }
279 289
280 290 #main ul li:has(> a:hover) {
281 Removed: background-color: #252525;
291 Added: background-color: var(--color-hover-bg);
282 292 }
283 293
284 294 /* Root page layout */
@@ -364,7 +374,7 @@
364 374 text-overflow: ellipsis;
365 375 white-space: nowrap;
366 376 min-width: 0;
367 Removed: color: #b0b0b0;
377 Added: color: var(--color-muted);
368 378 font-size: 0.85em;
369 379 }
370 380
@@ -381,7 +391,7 @@
381 391 }
382 392
383 393 #main ul li:has(.commit-title):hover {
384 Removed: background-color: #252525;
394 Added: background-color: var(--color-hover-bg);
385 395 }
386 396
387 397 .commit-ago {
@@ -389,7 +399,7 @@
389 399 align-items: center;
390 400 flex-shrink: 0;
391 401 font-size: 0.85em;
392 Removed: color: #b0b0b0;
402 Added: color: var(--color-muted);
393 403 white-space: nowrap;
394 404 padding-right: 0.75em;
395 405 }
@@ -400,7 +410,7 @@
400 410 flex-shrink: 0;
401 411 font-family: monospace;
402 412 font-size: 0.85em;
403 Removed: color: #b0b0b0;
413 Added: color: var(--color-muted);
404 414 white-space: nowrap;
405 415 padding-right: 0.75em;
406 416 }
@@ -562,7 +572,7 @@
562 572 padding: 0.25em 1em;
563 573 overflow: hidden;
564 574 background-color: #111;
565 Removed: border-bottom: 1px solid #303030;
575 Added: border-bottom: 1px solid var(--color-border);
566 576 flex-shrink: 0;
567 577 }
568 578
@@ -575,7 +585,7 @@
575 585 padding: 0.35em 0.9em;
576 586 border: 1px solid #444;
577 587 border-radius: 0.35rem;
578 Removed: background-color: #2a2a2a;
588 Added: background-color: var(--color-surface-raised);
579 589 font-weight: 600;
580 590 box-sizing: border-box;
581 591 }
@@ -615,8 +625,8 @@
615 625 width: 1.2em;
616 626 height: 1.2em;
617 627 padding: 0;
618 Removed: color: #b0b0b0;
619 Removed: background-color: #3a3a3a;
628 Added: color: var(--color-muted);
629 Added: background-color: var(--color-border-subtle);
620 630 text-decoration: none;
621 631 font-size: 0.8em;
622 632 line-height: 1;
@@ -680,7 +690,7 @@
680 690 font-size: 1.1em;
681 691 font-weight: 600;
682 692 color: white;
683 Removed: background-color: #2a2a2a;
693 Added: background-color: var(--color-surface-raised);
684 694 box-sizing: border-box;
685 695 }
686 696
@@ -714,7 +724,7 @@
714 724
715 725 .timestamp {
716 726 font-family: monospace;
717 Removed: color: #b0b0b0;
727 Added: color: var(--color-muted);
718 728 font-size: 0.85em;
719 729 }
720 730
@@ -730,7 +740,7 @@
730 740
731 741 #blob a.line-anchor,
732 742 .blob a.line-anchor {
733 Removed: color: #b0b0b0;
743 Added: color: var(--color-muted);
734 744 text-align: right;
735 745 }
736 746
@@ -742,7 +752,7 @@
742 752
743 753 #blob a.line-anchor:hover,
744 754 .blob a.line-anchor:hover {
745 Removed: color: skyblue;
755 Added: color: var(--color-link-hover);
746 756 background-color: inherit;
747 757 text-decoration: none;
748 758 }
@@ -759,7 +769,7 @@
759 769 }
760 770
761 771 .commit-meta dt {
762 Removed: color: #b0b0b0;
772 Added: color: var(--color-muted);
763 773 }
764 774
765 775 .commit-meta dd {
@@ -774,7 +784,7 @@
774 784 background: #1e1e1e;
775 785 padding: 0.75em 1em;
776 786 border-radius: 0.25rem;
777 Removed: border: 1px solid #303030;
787 Added: border: 1px solid var(--color-border);
778 788 }
779 789
780 790 /* Path pill — breadcrumb trail as a single rounded pill */
@@ -872,8 +882,8 @@
872 882 height: 1.6em;
873 883 font-size: 1.1em;
874 884 font-style: normal;
875 Removed: color: #b0b0b0;
876 Removed: background-color: #2a2a2a;
885 Added: color: var(--color-muted);
886 Added: background-color: var(--color-surface-raised);
877 887 border-radius: 50%;
878 888 flex-shrink: 0;
879 889 margin-right: 0.5em;
@@ -920,7 +930,7 @@
920 930 }
921 931
922 932 .tree-overflow a {
923 Removed: color: #b0b0b0;
933 Added: color: var(--color-muted);
924 934 font-style: italic;
925 935 }
926 936
@@ -932,7 +942,7 @@
932 942
933 943 .readme-inline {
934 944 margin-top: 1.5em;
935 Removed: border: 1px solid #3a3a3a;
945 Added: border: 1px solid var(--color-border-subtle);
936 946 border-radius: 0.25rem;
937 947 overflow-x: auto;
938 948 }
@@ -942,8 +952,8 @@
942 952 padding: 0.6em 1em;
943 953 background-color: #242424;
944 954 font-size: 0.9em;
945 Removed: color: #b0b0b0;
946 Removed: border-bottom: 1px solid #3a3a3a;
955 Added: color: var(--color-muted);
956 Added: border-bottom: 1px solid var(--color-border-subtle);
947 957 }
948 958
949 959 .readme-inline .blob {
@@ -952,13 +962,13 @@
952 962
953 963 .diff-file {
954 964 margin: 1.5em 0;
955 Removed: border: 1px solid #3a3a3a;
965 Added: border: 1px solid var(--color-border-subtle);
956 966 border-radius: 0.25rem;
957 967 overflow: hidden;
958 968 }
959 969
960 970 .diff-hunk {
961 Removed: border-top: 1px solid #3a3a3a;
971 Added: border-top: 1px solid var(--color-border-subtle);
962 972 }
963 973
964 974 .diff-file-header,
@@ -984,8 +994,8 @@
984 994 }
985 995
986 996 .diff-meta {
987 Removed: color: #b0b0b0;
988 Removed: border-top: 1px solid #3a3a3a;
997 Added: color: var(--color-muted);
998 Added: border-top: 1px solid var(--color-border-subtle);
989 999 }
990 1000
991 1001 .hunk-header {
@@ -1024,10 +1034,10 @@
1024 1034
1025 1035 .diff-line .line-number {
1026 1036 padding-right: 0.6em;
1027 Removed: color: #b0b0b0;
1037 Added: color: var(--color-muted);
1028 1038 text-align: right;
1029 1039 user-select: none;
1030 Removed: border-right: 1px solid #3a3a3a;
1040 Added: border-right: 1px solid var(--color-border-subtle);
1031 1041 }
1032 1042
1033 1043 .diff-marker {
@@ -1163,7 +1173,7 @@
1163 1173 right: 0;
1164 1174 z-index: 20;
1165 1175 background-color: black;
1166 Removed: border-top: 1px solid #303030;
1176 Added: border-top: 1px solid var(--color-border);
1167 1177 }
1168 1178
1169 1179 #bottom-nav ul {
@@ -1192,17 +1202,17 @@
1192 1202 }
1193 1203
1194 1204 #bottom-nav ul li a:hover {
1195 Removed: background-color: #252525;
1205 Added: background-color: var(--color-hover-bg);
1196 1206 text-decoration: none;
1197 1207 }
1198 1208
1199 1209 #bottom-nav ul li[aria-current="page"] {
1200 Removed: background-color: rgb(194, 79, 30);
1210 Added: background-color: var(--color-accent);
1201 1211 border-radius: 0.5rem;
1202 1212 }
1203 1213
1204 1214 #bottom-nav ul li[aria-current="page"] a:hover {
1205 Removed: background-color: rgb(132, 40, 0);
1215 Added: background-color: var(--color-accent-hover);
1206 1216 color: white;
1207 1217 text-decoration: none;
1208 1218 }