Responsive app shell, routes and navigation (#38)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com> Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
2026-10-03 18:40:34 -04:00
parent a453a84231
commit 998658b42c
17 changed files with 727 additions and 19 deletions
@@ -0,0 +1,55 @@
+.bar {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: calc(16px + env(safe-area-inset-bottom));
+  height: 62px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: var(--radius-pill);
+  background: var(--color-text);
+}
+
+/* The whole bar height is the tap target; the 42 px pill sits inside it. */
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 62px;
+  min-width: 44px;
+  color: var(--color-neutral-400);
+  text-decoration: none;
+}
+
+.pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 42px;
+  padding: 0 13px;
+  border-radius: var(--radius-pill);
+}
+
+.active {
+  background: var(--color-accent);
+  color: var(--on-accent);
+}
+
+.label {
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+/* Inactive items are icon-only on screen but keep their name for assistive tech. */
+.hiddenLabel {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}