[OCaml] Mobile-friendly clone of cgit.

Merge branch 'claude/style/harmonize-anchor-links'

Commit
5219bc785055f9144e72428fdaed629e91e81e31
Author
Marius Peter <dev@marius-peter.com>
Author date
Committer
Marius Peter <dev@marius-peter.com>
Committer date
Changed files
lib/static/styles.css
index 35d210fc..4c08546f 100644..100644
@@ -9,6 +9,28 @@
9 9 color: white;
10 10 }
11 11
12 Added: /* --- Harmonized anchor defaults (cgit-inspired) ---
13 Added: * Links appear as ordinary text; on hover they turn blue + underlined,
14 Added: * and the parent element gets a subtle highlight. */
15 Added:
16 Added: a {
17 Added: color: inherit;
18 Added: text-decoration: none;
19 Added: }
20 Added:
21 Added: a:hover {
22 Added: color: skyblue;
23 Added: text-decoration: underline;
24 Added: }
25 Added:
26 Added: /* Parent-highlight on hover — the wrapping element gets a subtle glow */
27 Added: li:has(> a:hover),
28 Added: span:has(> a:hover),
29 Added: dd:has(> a:hover) {
30 Added: background-color: #252525;
31 Added: border-radius: 0.25rem;
32 Added: }
33 Added:
12 34 #page-header {
13 35 display: flex;
14 36 align-items: center;
@@ -44,7 +66,6 @@
44 66 background: white;
45 67 color: black;
46 68 z-index: 100;
47 Removed: text-decoration: none;
48 69 font-weight: bold;
49 70 }
50 71
@@ -52,6 +73,11 @@
52 73 top: 0;
53 74 }
54 75
76 Added: .skip-link:hover {
77 Added: color: black;
78 Added: text-decoration: none;
79 Added: }
80 Added:
55 81 :focus-visible {
56 82 outline: 2px solid skyblue;
57 83 outline-offset: 2px;
@@ -94,8 +120,6 @@
94 120 .nav-home {
95 121 display: flex;
96 122 align-items: center;
97 Removed: color: white;
98 Removed: text-decoration: none;
99 123 padding: 0.5em 1em;
100 124 min-height: 44px;
101 125 border-radius: 0.25rem;
@@ -106,6 +130,7 @@
106 130 .nav-home:hover {
107 131 background-color: white;
108 132 color: black;
133 Added: text-decoration: none;
109 134 }
110 135
111 136 .nav-logo {
@@ -119,6 +144,7 @@
119 144
120 145 .nav-logo:hover {
121 146 background-color: #333;
147 Added: text-decoration: none;
122 148 }
123 149
124 150 .nav-logo .site-logo {
@@ -142,8 +168,6 @@
142 168 nav#top ul li a {
143 169 display: flex;
144 170 align-items: center;
145 Removed: color: white;
146 Removed: text-decoration: none;
147 171 padding: 0.5em 1em;
148 172 min-height: 44px;
149 173 border-radius: 0.25rem;
@@ -153,6 +177,7 @@
153 177 nav#top ul li a:hover {
154 178 background-color: white;
155 179 color: black;
180 Added: text-decoration: none;
156 181 }
157 182
158 183 nav#top ul li[aria-current="page"] {
@@ -164,6 +189,7 @@
164 189 border-radius: 0.25rem;
165 190 background-color: rgb(132, 40, 0);
166 191 color: white;
192 Added: text-decoration: none;
167 193 }
168 194
169 195 div#main {
@@ -195,32 +221,35 @@
195 221 align-items: center;
196 222 justify-content: space-between;
197 223 gap: 1em;
198 Removed: color: white;
199 Removed: text-decoration: none;
200 224 padding: 0.75em;
201 225 min-height: 44px;
202 226 box-sizing: border-box;
203 227 }
204 228
205 229 div#main ul li > a:hover {
206 Removed: background-color: white;
207 Removed: color: black;
208 Removed: text-decoration: revert;
230 Added: text-decoration: underline;
209 231 }
210 232
211 Removed: /* Commit list items — anchors live inside pill and title spans */
233 Added: div#main ul li:has(> a:hover) {
234 Added: background-color: #252525;
235 Added: }
212 236
237 Added: /* Commit list items — aligned with directory list items: anchors fill the row height */
238 Added:
213 239 div#main ul li:has(.commit-left) {
214 240 display: flex;
215 Removed: align-items: center;
241 Added: align-items: stretch;
216 242 justify-content: space-between;
217 243 line-height: 1.5rem;
218 Removed: padding: 0.5em 0.75em;
219 244 min-height: 44px;
220 245 box-sizing: border-box;
221 246 gap: 1em;
222 247 }
223 248
249 Added: div#main ul li:has(.commit-left):has(a:hover) {
250 Added: background-color: #252525;
251 Added: }
252 Added:
224 253 .commit-left {
225 254 display: flex;
226 255 align-items: center;
@@ -228,50 +257,48 @@
228 257 flex: 1;
229 258 min-width: 0;
230 259 overflow: hidden;
260 Added: padding: 0.5em 0.75em;
231 261 }
232 262
233 263 .commit-left a {
234 Removed: color: white;
235 Removed: text-decoration: none;
236 264 border-radius: 0.25rem;
237 265 line-height: 1.5rem;
238 266 }
239 267
240 268 .commit-left a:hover {
241 Removed: background-color: white;
242 Removed: color: black;
243 269 text-decoration: underline;
244 270 }
245 271
246 272 .commit-ago {
273 Added: display: flex;
274 Added: align-items: center;
247 275 flex-shrink: 0;
248 276 font-size: 0.85em;
249 277 color: #b0b0b0;
250 278 white-space: nowrap;
279 Added: padding-right: 0.75em;
251 280 }
252 281
253 282 .commit-author {
283 Added: display: flex;
284 Added: align-items: center;
254 285 flex-shrink: 0;
255 286 font-family: monospace;
256 287 font-size: 0.85em;
257 288 color: #b0b0b0;
258 289 white-space: nowrap;
290 Added: padding-right: 0.75em;
259 291 }
260 292
261 293 .commit-identity {
262 Removed: color: skyblue;
263 Removed: text-decoration: underline;
294 Added: display: flex;
295 Added: align-items: center;
264 296 text-underline-offset: 0.15em;
265 297 border-radius: 0.2rem;
266 298 }
267 299
268 Removed: .commit-identity:visited {
269 Removed: color: skyblue;
270 Removed: }
271 Removed:
272 300 .commit-identity:hover {
273 Removed: color: black;
274 Removed: background-color: white;
301 Added: text-decoration: underline;
275 302 }
276 303
277 304 .commit-meta .commit-identity,
@@ -284,6 +311,7 @@
284 311 align-items: center;
285 312 flex-shrink: 0;
286 313 padding: 0.4em 0.9em;
314 Added: margin: 0.3em 0;
287 315 border-radius: 9999px;
288 316 font-size: 0.8em;
289 317 font-weight: 600;
@@ -292,26 +320,31 @@
292 320 }
293 321
294 322 .commit-pill a {
295 Removed: color: inherit;
296 323 padding: 0.1em 0;
297 324 }
298 325
299 326 .commit-pill a:hover {
300 Removed: background-color: transparent;
301 327 color: inherit;
302 328 text-decoration: underline;
329 Added: background-color: transparent;
303 330 }
304 331
305 332 .commit-title {
333 Added: display: flex;
334 Added: align-items: center;
306 335 flex: 1;
307 336 min-width: 0;
308 337 overflow: hidden;
309 Removed: text-overflow: ellipsis;
310 Removed: white-space: nowrap;
311 338 }
312 339
313 340 .commit-title a {
314 Removed: display: inline;
341 Added: display: flex;
342 Added: align-items: center;
343 Added: flex: 1;
344 Added: min-width: 0;
345 Added: overflow: hidden;
346 Added: text-overflow: ellipsis;
347 Added: white-space: nowrap;
315 348 }
316 349
317 350 /* Pill color variants — WCAG AA contrast against their backgrounds */
@@ -439,28 +472,9 @@
439 472 .toolbar-dismiss:hover {
440 473 background-color: #555;
441 474 color: white;
442 Removed: }
443 Removed:
444 Removed: .toolbar-raw-link {
445 Removed: display: inline-flex;
446 Removed: align-items: center;
447 Removed: justify-content: center;
448 Removed: min-width: 44px;
449 Removed: min-height: 44px;
450 Removed: padding: 0.4em 0.75em;
451 Removed: border-radius: 0.25rem;
452 Removed: font-family: monospace;
453 Removed: font-size: 0.85em;
454 Removed: color: white;
455 Removed: background-color: #2a2a2a;
456 475 text-decoration: none;
457 Removed: box-sizing: border-box;
458 476 }
459 477
460 Removed: .toolbar-raw-link:hover {
461 Removed: background-color: white;
462 Removed: color: black;
463 Removed: }
464 478
465 479 /* Pagination controls */
466 480
@@ -482,7 +496,6 @@
482 496 border-radius: 0.25rem;
483 497 font-size: 1.1em;
484 498 font-weight: 600;
485 Removed: text-decoration: none;
486 499 color: white;
487 500 background-color: #2a2a2a;
488 501 box-sizing: border-box;
@@ -491,6 +504,7 @@
491 504 .pagination-btn:hover {
492 505 background-color: white;
493 506 color: black;
507 Added: text-decoration: none;
494 508 }
495 509
496 510 .pagination-disabled {
@@ -534,7 +548,6 @@
534 548 #blob a.line-anchor,
535 549 .blob a.line-anchor {
536 550 color: #b0b0b0;
537 Removed: text-decoration: none;
538 551 text-align: right;
539 552 }
540 553
@@ -595,18 +608,11 @@
595 608 color: #93dbfd;
596 609 }
597 610
598 Removed: .path-pill a {
599 Removed: color: inherit;
600 Removed: text-decoration: none;
601 Removed: }
602 Removed:
603 611 .path-pill a:hover {
604 612 text-decoration: underline;
605 613 }
606 614
607 615 .path-pill-link {
608 Removed: color: inherit;
609 Removed: text-decoration: none;
610 616 padding: 0.1em 0.2em;
611 617 border-radius: 0.25rem;
612 618 }
@@ -682,15 +688,11 @@
682 688 }
683 689
684 690 .tree-link {
685 Removed: color: white;
686 Removed: text-decoration: none;
687 691 padding: 0.2em 0.4em;
688 692 border-radius: 0.25rem;
689 693 }
690 694
691 695 .tree-link:hover {
692 Removed: background-color: white;
693 Removed: color: black;
694 696 text-decoration: underline;
695 697 }
696 698
@@ -717,12 +719,10 @@
717 719
718 720 .tree-overflow a {
719 721 color: #b0b0b0;
720 Removed: text-decoration: none;
721 722 font-style: italic;
722 723 }
723 724
724 725 .tree-overflow a:hover {
725 Removed: color: white;
726 726 text-decoration: underline;
727 727 }
728 728
lib/views/repo.ml
index 91b2bcb7..38bc0399 100644..100644
@@ -722,16 +722,15 @@
722 722 match List.rev trail with
723 723 | (_, hash) :: _ ->
724 724 HTML.(
725 Removed: Routes.link_to
726 Removed: (Raw_file (context.repo, hash))
727 Removed: ~other_attrs:[ class_ "toolbar-raw-link" ]
728 Removed: (txt "raw"))
725 Added: p []
726 Added: [ Routes.link_to (Raw_file (context.repo, hash)) (txt "View raw") ])
729 727 | [] -> HTML.null []
730 728 in
731 729 render_page context ~active
732 730 HTML.
733 731 [
734 Removed: toolbar [ breadcrumb_pill context.repo trail; raw_link ];
732 Added: toolbar [ breadcrumb_pill context.repo trail ];
733 Added: raw_link;
735 734 div blob_attrs formatted_blob;
736 735 ]
737 736