[OCaml] Mobile-friendly clone of cgit.
style harmonize anchor elements with cgit-inspired pattern
Links appear as ordinary text (color:inherit, no decoration) by default. On hover they become blue (skyblue) + underlined, and the parent element (li, span, dd) receives a subtle #252525 background highlight to emphasize the interactive context. Commit list items are aligned with directory list items: the li uses align-items:stretch so child anchors fill the full row height, providing wide click targets. The commit-title anchor is now a flex item that stretches to fill available space. Pills have vertical margins so they don't dictate row height. The 'raw' link on file pages is now an ordinary anchor placed before the blob listing, no longer a button-styled toolbar element. Button-styled elements (nav items, pagination, toolbar buttons) retain their bespoke hover treatments and suppress the global blue+underline. Line-number anchors in the blob view keep their specialized behavior.
Changed files
lib/static/styles.css
@@ -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
@@ -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