[OCaml] High Intensity Training Online
style embed bottom-nav tabs as rounded buttons on a paper bar
Align the mobile activity buttons with the desktop primary nav. The bottom bar is now a slightly larger paper surface with inner padding, and each tab is a round-corner button floating on it -- same radius, hover, and active oxblood fill as the desktop items -- instead of edge-to-edge cells split by 1px rules.
lib/web/assets/hito.css
@@ -1333,18 +1333,22 @@
1333
1333
left: 0;
1334
1334
display: grid;
1335
1335
grid-template-columns: repeat(3, minmax(0, 1fr));
1336
Removed:
gap: 1px;
1336
Added:
gap: 0.4rem;
1337
1337
border-top: 1px solid var(--rule);
1338
Removed:
background: var(--rule);
1338
Added:
background: var(--paper);
1339
1339
box-shadow: 0 -0.35rem 1.2rem rgba(26, 26, 22, 0.15);
1340
Removed:
padding-bottom: env(safe-area-inset-bottom);
1340
Added:
padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom));
1341
1341
}
1342
Added:
/* The tabs are round-corner buttons floating on the paper bar, so mobile and
1343
Added:
desktop activity buttons share one appearance: the same radius, hover, and
1344
Added:
active oxblood fill. The bar is a touch larger than the buttons it holds. */
1342
1345
.bottom-nav > a {
1343
1346
display: grid;
1344
Removed:
min-height: 3.5rem;
1347
Added:
min-height: 3rem;
1345
1348
place-items: center;
1349
Added:
border-radius: var(--radius);
1346
1350
color: var(--ink);
1347
Removed:
background: var(--paper-raised);
1351
Added:
background: transparent;
1348
1352
font: 700 var(--font-size-base)/1.1 var(--sans);
1349
1353
letter-spacing: 0.025em;
1350
1354
text-align: center;