[OCaml] Mobile-friendly clone of cgit.
Improve mobile layout and touch targets
- Widen responsive breakpoint from 400px to 600px - Increase touch targets to 44px minimum (nav items, list items) - Add overflow-x: auto to blob view for long lines - Hide one diff line-number column on mobile to save space - Reduce font size for code views on small screens - Tighten nav and header spacing on mobile
lib/static/styles.css
@@ -85,6 +85,9 @@
85
85
nav#top ul li {
86
86
padding: 0.5em 0;
87
87
border-radius: 0.25rem;
88
Added:
min-height: 44px;
89
Added:
display: flex;
90
Added:
align-items: center;
88
91
}
89
92
90
93
nav#top ul li a {
@@ -122,7 +125,9 @@
122
125
display: block;
123
126
color: white;
124
127
text-decoration: none;
125
Removed:
padding: 0.5em;
128
Added:
padding: 0.75em;
129
Added:
min-height: 44px;
130
Added:
box-sizing: border-box;
126
131
}
127
132
128
133
div#main a:hover {
@@ -145,6 +150,7 @@
145
150
row-gap: 0.2em;
146
151
grid-template-columns: 3em auto;
147
152
font-family: monospace;
153
Added:
overflow-x: auto;
148
154
}
149
155
150
156
#blob a.line-anchor {
@@ -278,18 +284,41 @@
278
284
text-align: center;
279
285
}
280
286
281
Removed:
@media (max-width: 400px) {
287
Added:
@media (max-width: 600px) {
282
288
body {
283
Removed:
padding: 0;
289
Added:
padding: 0 0.5em;
284
290
}
285
291
292
Added:
#page-header {
293
Added:
gap: 0.5em;
294
Added:
}
295
Added:
296
Added:
#page-header .site-logo {
297
Added:
width: 2em;
298
Added:
height: 2em;
299
Added:
}
300
Added:
301
Added:
nav#top ul li a {
302
Added:
padding: 0.5em 0.6em;
303
Added:
font-size: 0.9em;
304
Added:
}
305
Added:
286
306
#blob {
287
Removed:
column-gap: 1em;
288
Removed:
row-gap: 0em;
289
Removed:
grid-template-columns: max-content auto;
307
Added:
column-gap: 0.75em;
308
Added:
row-gap: 0;
309
Added:
grid-template-columns: max-content auto;
310
Added:
font-size: 0.85em;
290
311
}
291
312
292
313
.diff-line {
293
Removed:
grid-template-columns: 3em 3em 1em minmax(max-content, 1fr);
314
Added:
grid-template-columns: 3em 1.25em minmax(max-content, 1fr);
315
Added:
}
316
Added:
317
Added:
.diff-line .line-number:first-child {
318
Added:
display: none;
319
Added:
}
320
Added:
321
Added:
.diff-line {
322
Added:
font-size: 0.85em;
294
323
}
295
324
}