[OCaml] High Intensity Training Online
feat harmonize UI corner radii
Introduce a single --radius token and apply it to every button, card, field, and surface. The circular exercise-index badge keeps its 50% radius. Corners now read as uniform across the interface.
Changed files
ENHANCEMENTS.org
@@ -36,7 +36,7 @@
36
36
Do not show the sign-out button on mobile.
37
37
** DONE Show an in-progress workout card on Home
38
38
When the user is logging a current workout, show a Home card that indicates the workout is in progress and links to the Current Workout tab.
39
Removed:
** TODO Harmonize UI corner radii
39
Added:
** DONE Harmonize UI corner radii
40
40
Use uniformly rounded corners for all buttons, cards, and other UI elements.
41
41
** TODO Make workout cancellation unconditional
42
42
When cancelling a workout, always leave the current workout view without showing an invalid-form response. Save the workout log as-is for later editing, then redirect the user to Home.
@@ -46,3 +46,5 @@
46
46
When logging a workout, show a sticky bar at the top of the screen with a workout timer.
47
47
** TODO Replace the exercise button group with a dropdown
48
48
Use a dropdown menu to select the exercise instead of the exercise button group.
49
Added:
** TODO Remove the boulder top border from exercise logging cards
50
Added:
Do not show a boulder top fieldset border on the exercise logging fieldset card.
lib/web/assets/hito.css
@@ -20,6 +20,7 @@
20
20
--font-size-base: 1rem;
21
21
--font-size-lead: 1.125rem;
22
22
--font-size-heading: 2rem;
23
Added:
--radius: 0.3rem;
23
24
--sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
24
25
--mono: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
25
26
}
@@ -161,7 +162,7 @@
161
162
border: 1px solid var(--rule-strong);
162
163
border-top: 6px solid var(--oxblood);
163
164
background: var(--paper-raised);
164
Removed:
border-radius: 0.45rem;
165
Added:
border-radius: var(--radius);
165
166
box-shadow: 0 0.4rem 1.5rem rgba(26, 26, 22, 0.09);
166
167
padding: clamp(1.25rem, 3vw, 2rem);
167
168
}
@@ -193,7 +194,7 @@
193
194
border: 1px solid var(--rule);
194
195
border-top: 3px solid var(--ink);
195
196
background: var(--paper);
196
Removed:
border-radius: 0.3rem;
197
Added:
border-radius: var(--radius);
197
198
}
198
199
199
200
legend {
@@ -226,7 +227,7 @@
226
227
width: 100%;
227
228
min-height: 3rem;
228
229
border: 1px solid var(--rule-strong);
229
Removed:
border-radius: 0.25rem;
230
Added:
border-radius: var(--radius);
230
231
color: var(--ink);
231
232
background: var(--paper-raised);
232
233
font: 500 1rem/1.3 var(--sans);
@@ -245,7 +246,7 @@
245
246
min-height: 3rem;
246
247
margin-top: 1rem;
247
248
border: 2px solid var(--oxblood-dark);
248
Removed:
border-radius: 0.3rem;
249
Added:
border-radius: var(--radius);
249
250
color: var(--paper-raised);
250
251
background: var(--oxblood);
251
252
cursor: pointer;
@@ -299,7 +300,7 @@
299
300
border: 1px solid var(--rule-strong);
300
301
border-left: 4px solid var(--oxblood);
301
302
background: var(--paper);
302
Removed:
border-radius: 0.3rem;
303
Added:
border-radius: var(--radius);
303
304
padding: 1rem 1.1rem;
304
305
color: var(--ink);
305
306
text-decoration: none;
@@ -329,7 +330,7 @@
329
330
min-height: 2.75rem;
330
331
padding: 0.6rem 0.85rem;
331
332
border: 1px solid var(--rule-strong);
332
Removed:
border-radius: 0.3rem;
333
Added:
border-radius: var(--radius);
333
334
color: var(--ink);
334
335
background: var(--paper);
335
336
font-size: 0.95rem;
@@ -426,7 +427,7 @@
426
427
border: 1px solid var(--rule-strong);
427
428
border-left: 4px solid var(--oxblood);
428
429
background: var(--paper);
429
Removed:
border-radius: 0.3rem;
430
Added:
border-radius: var(--radius);
430
431
}
431
432
432
433
.routine-accordion > summary {
@@ -504,7 +505,7 @@
504
505
left: 0.75rem;
505
506
transform: translateY(-200%);
506
507
border: 2px solid var(--focus);
507
Removed:
border-radius: 0.25rem;
508
Added:
border-radius: var(--radius);
508
509
color: var(--ink);
509
510
background: var(--paper-raised);
510
511
padding: 0.65rem 0.85rem;