[OCaml] Mobile-friendly clone of cgit.
refactor replace magic numbers with custom properties
Define layout dimensions as CSS custom properties in :root: - --nav-height: navbar height (44px) - --toolbar-height: toolbar height (44px) - --target-size: WCAG interactive target minimum (44px) Sticky elements now use calc() with these tokens: - nav#top: top: 0 - .toolbar: top: var(--nav-height) - .tree-toggle: top: calc(var(--nav-height) + var(--toolbar-height)) All min-height/min-width target sizes use var(--target-size).
lib/static/styles.css
@@ -1,5 +1,11 @@
1
1
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
2
2
3
Added:
:root {
4
Added:
--nav-height: 44px;
5
Added:
--toolbar-height: 44px;
6
Added:
--target-size: 44px;
7
Added:
}
8
Added:
3
9
body {
4
10
font-family: Inter, sans-serif;
5
11
max-width: 80rem;
@@ -121,7 +127,7 @@
121
127
display: flex;
122
128
align-items: center;
123
129
padding: 0.5em 1em;
124
Removed:
min-height: 44px;
130
Added:
min-height: var(--target-size);
125
131
border-radius: 0.25rem;
126
132
font-family: monospace;
127
133
box-sizing: border-box;
@@ -137,7 +143,7 @@
137
143
display: flex;
138
144
align-items: center;
139
145
padding: 0.5em;
140
Removed:
min-height: 44px;
146
Added:
min-height: var(--target-size);
141
147
border-radius: 0.25rem;
142
148
box-sizing: border-box;
143
149
}
@@ -169,7 +175,7 @@
169
175
display: flex;
170
176
align-items: center;
171
177
padding: 0.5em 1em;
172
Removed:
min-height: 44px;
178
Added:
min-height: var(--target-size);
173
179
border-radius: 0.25rem;
174
180
box-sizing: border-box;
175
181
}
@@ -222,7 +228,7 @@
222
228
justify-content: space-between;
223
229
gap: 1em;
224
230
padding: 0.75em;
225
Removed:
min-height: 44px;
231
Added:
min-height: var(--target-size);
226
232
box-sizing: border-box;
227
233
}
228
234
@@ -241,7 +247,7 @@
241
247
align-items: stretch;
242
248
justify-content: space-between;
243
249
line-height: 1.5rem;
244
Removed:
min-height: 44px;
250
Added:
min-height: var(--target-size);
245
251
box-sizing: border-box;
246
252
gap: 1em;
247
253
}
@@ -410,10 +416,10 @@
410
416
display: flex;
411
417
align-items: center;
412
418
gap: 0.75em;
413
Removed:
min-height: 44px;
419
Added:
min-height: var(--target-size);
414
420
box-sizing: border-box;
415
421
position: sticky;
416
Removed:
top: 44px;
422
Added:
top: var(--nav-height);
417
423
z-index: 9;
418
424
background-color: #181818;
419
425
padding: 0.5em 0;
@@ -465,8 +471,8 @@
465
471
content: "";
466
472
position: absolute;
467
473
inset: -10px;
468
Removed:
min-width: 44px;
469
Removed:
min-height: 44px;
474
Added:
min-width: var(--target-size);
475
Added:
min-height: var(--target-size);
470
476
}
471
477
472
478
.toolbar-dismiss:hover {
@@ -490,8 +496,8 @@
490
496
display: inline-flex;
491
497
align-items: center;
492
498
justify-content: center;
493
Removed:
min-width: 44px;
494
Removed:
min-height: 44px;
499
Added:
min-width: var(--target-size);
500
Added:
min-height: var(--target-size);
495
501
padding: 0.4em 0.75em;
496
502
border-radius: 0.25rem;
497
503
font-size: 1.1em;
@@ -521,7 +527,7 @@
521
527
.pagination-page {
522
528
font-size: 0.9em;
523
529
color: #ccc;
524
Removed:
min-width: 44px;
530
Added:
min-width: var(--target-size);
525
531
text-align: center;
526
532
}
527
533
@@ -643,14 +649,14 @@
643
649
cursor: pointer;
644
650
list-style: none;
645
651
padding: 0.75em;
646
Removed:
min-height: 44px;
652
Added:
min-height: var(--target-size);
647
653
box-sizing: border-box;
648
654
gap: 0;
649
655
}
650
656
651
657
details[open] > .tree-toggle {
652
658
position: sticky;
653
Removed:
top: 88px;
659
Added:
top: calc(var(--nav-height) + var(--toolbar-height));
654
660
z-index: 8;
655
661
background-color: #181818;
656
662
}
@@ -882,8 +888,8 @@
882
888
display: flex;
883
889
align-items: center;
884
890
justify-content: center;
885
Removed:
width: 44px;
886
Removed:
height: 44px;
891
Added:
width: var(--target-size);
892
Added:
height: var(--target-size);
887
893
cursor: pointer;
888
894
border-radius: 0.25rem;
889
895
font-size: 1.5em;