Feature 21: Home Dashboard (#181)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
2026-10-10 20:07:53 -04:00
parent ecf7c6be89
commit fd087e0ba3
59 changed files with 3923 additions and 87 deletions
@@ -0,0 +1,193 @@
+/* Home, handoff mock 1g. */
+.page {
+  box-sizing: border-box;
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 6px;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.date {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-neutral-700);
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1.1;
+}
+
+/* The bell's 8 px grape unread dot sits on the 40 px face, which is
+   centred in the IconButton's 44 px hit box. */
+.bell {
+  position: relative;
+}
+
+.bell .bellIcon {
+  width: 19px;
+  height: 19px;
+}
+
+.dot {
+  position: absolute;
+  top: 10px;
+  right: 11px;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 32px;
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.photo {
+  height: 150px;
+}
+
+.cardFoot {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 2px 18px 16px;
+}
+
+.cardText {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.name {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 1.1;
+}
+
+.meta {
+  font-family: var(--font-body);
+  font-size: 12px;
+  color: var(--color-neutral-700);
+}
+
+/* The dark "Recipe" pill: the mock's 38 px pill at the 44 px tap minimum. */
+.recipe {
+  flex: none;
+  min-height: 44px;
+  padding: 0 16px;
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.tiles {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.tile {
+  box-sizing: border-box;
+  height: 104px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 26px;
+  text-decoration: none;
+}
+
+.quick {
+  background: var(--color-accent);
+  color: var(--on-accent);
+}
+
+.pantry {
+  background: var(--color-accent-2-300);
+  color: var(--color-accent-2-900);
+}
+
+.tileLabel {
+  font-family: var(--font-heading);
+  font-size: 16px;
+  line-height: 1.1;
+}
+
+.statuses {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.status {
+  box-sizing: border-box;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 20px;
+  background: var(--color-neutral-100);
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.status .statusIcon {
+  width: 18px;
+  height: 18px;
+  color: var(--color-accent-700);
+}
+
+.statusText {
+  flex: 1;
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.tile:focus-visible,
+.status:focus-visible {
+  outline: 3px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.skeletonDate {
+  width: 96px;
+  height: 14px;
+  margin-bottom: 2px;
+}
+
+.skeletonCard {
+  height: 238px;
+  border-radius: 32px;
+}
+
+.skeletonStatus {
+  height: 44px;
+  border-radius: 20px;
+}