made tarot section more mobile friendly

2026-03-28 17:31:45 -07:00
parent 60887b68a6
commit d47e63df6d
5 changed files with 918 additions and 65 deletions
--- a/app/styles.css
+++ b/app/styles.css
@@ -2882,6 +2882,103 @@
      gap: 14px;
    }

+    @media (max-width: 900px) {
+      #tarot-house-view {
+        padding: 10px;
+      }
+
+      #tarot-house-view .tarot-house-card {
+        gap: 10px;
+      }
+
+      .tarot-house-card-head {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .tarot-house-card-actions {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        align-items: stretch;
+        gap: 8px;
+      }
+
+      .tarot-house-toggle,
+      .tarot-house-filter-group,
+      .tarot-house-action-btn {
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tarot-house-filter-group {
+        justify-content: flex-start;
+      }
+
+      .tarot-house-layout {
+        --tarot-house-card-gap: 2px;
+        --tarot-house-row-gap: 4px;
+        --tarot-house-section-gap: 8px;
+        --tarot-house-card-width: clamp(28px, calc((100vw - 56px) / 11), 42px);
+        --tarot-house-card-height: calc(var(--tarot-house-card-width) * 1.5);
+        width: 100%;
+        max-width: 100%;
+      }
+
+      .tarot-house-trumps {
+        overflow-x: visible;
+      }
+
+      .tarot-house-trump-row,
+      .tarot-house-bottom-grid {
+        width: 100%;
+      }
+
+      .tarot-house-bottom-grid {
+        justify-content: center;
+      }
+
+      .tarot-house-card-btn.is-selected {
+        transform: scale(1.08);
+      }
+
+      .tarot-house-card-label {
+        left: 2px;
+        right: 2px;
+        bottom: 2px;
+        padding: 2px 3px;
+        font-size: 6.5px;
+        line-height: 1.1;
+      }
+
+      .tarot-house-card-label-secondary {
+        margin-top: 1px;
+        font-size: 6px;
+      }
+
+      .tarot-house-card-text-face {
+        gap: 3px;
+        padding: 5px 4px;
+      }
+
+      .tarot-house-card-text-face.is-dense {
+        gap: 2px;
+        padding: 4px 3px;
+      }
+
+      .tarot-house-card-text-face.is-top-hebrew .tarot-house-card-text-primary {
+        font-size: 14px;
+      }
+
+      .tarot-house-card-text-primary {
+        font-size: 8px;
+      }
+
+      .tarot-house-card-text-secondary,
+      .tarot-house-card-fallback {
+        font-size: 6px;
+      }
+    }
+
    /* ── Tarot Spread View ─────────────────────────────── */
    #tarot-spread-view {
      display: flex;