diff --git a/.claude/launch.json b/.claude/launch.json index 65b40a7..1d748f3 100644 --- a/.claude/launch.json +++ b/.claude/launch.json @@ -5,7 +5,8 @@ "name": "siteforge", "runtimeExecutable": "node", "runtimeArgs": ["--env-file=.env", "server.js"], - "port": 4173 + "port": 4173, + "autoPort": false } ] } diff --git a/data/study-reminders.json b/data/study-reminders.json index f997697..51bfa77 100644 --- a/data/study-reminders.json +++ b/data/study-reminders.json @@ -1,4 +1,4 @@ { "users": {}, - "updatedAt": "2026-06-09T13:41:20.565Z" + "updatedAt": "2026-06-09T15:26:49.777Z" } \ No newline at end of file diff --git a/src/App.css b/src/App.css index 36d3fd8..41dff07 100644 --- a/src/App.css +++ b/src/App.css @@ -5727,102 +5727,341 @@ } @media (max-width: 768px) { + /* ── Page wrapper override (QuestionsPage uses thanks-page/thanks-card) ── */ + .thanks-page:has(.section-qa) { + padding: 0; + align-items: stretch; + } + + .thanks-card:has(.section-qa) { + width: 100%; + max-width: 100% !important; + border-radius: 0; + border-left: none; + border-right: none; + padding: 0; + box-shadow: none; + } + + /* ── Container ── */ + .section-qa .section-inner { + padding: 0; + } + + .section-qa { + border-top: none; + } + + /* ── Top nav ── */ + .qa-top-nav { + margin: 0.9rem 1rem 0.7rem; + } + + .qa-back-to-site { + font-size: 0.74rem; + padding: 0.38rem 0.75rem; + min-height: 38px; + } + + /* ── Heading ── */ + .section-qa .section-heading { + font-size: 1.55rem; + margin: 0 1rem 1.5rem; + } + + /* ── Toolbar ── */ + .qa-toolbar { + margin: 0 1rem 0.6rem; + } + + .qa-view-toggle { + min-height: 38px; + padding: 0.38rem 0.88rem; + } + + /* ── Filters ── */ .qa-filters { - gap: 0.65rem; - margin-bottom: 1rem; + gap: 0; + margin-bottom: 0; + border-top: 1px solid rgba(201, 168, 76, 0.14); + border-bottom: 1px solid rgba(201, 168, 76, 0.14); + background: rgba(14, 13, 10, 0.7); } .qa-topics { - gap: 0.4rem; + gap: 0; + padding: 0.6rem 1rem; + border-bottom: 1px solid rgba(201, 168, 76, 0.1); } .qa-topic-btn { flex: 0 0 auto; white-space: nowrap; + font-size: 0.82rem; + padding: 0.42rem 0.88rem; + min-height: 38px; + border-radius: 999px; + margin-right: 0.4rem; + } + + .qa-tags { + padding: 0.55rem 1rem; + gap: 0; + border-bottom: 1px solid rgba(201, 168, 76, 0.1); + } + + .qa-tag-btn { + flex: 0 0 auto; + min-height: 36px; + padding: 0.38rem 0.75rem; + margin-right: 0.38rem; font-size: 0.8rem; - padding: 0.32rem 0.72rem; + } + + .qa-search { + padding: 0.65rem 1rem; } .qa-search input { - padding: 0.68rem 0.82rem; - font-size: 0.95rem; + padding: 0.82rem 1rem; + font-size: 1rem; + border-radius: 0.5rem; } + /* ── Filter chips ── */ + .qa-filter-chips { + margin: 0.6rem 1rem 0; + } + + .qa-chip { + min-height: 34px; + padding: 0.3rem 0.7rem; + font-size: 0.78rem; + } + + /* ── Meta row ── */ .qa-meta-row { - flex-direction: column; - align-items: flex-start; + flex-direction: row; + align-items: center; + justify-content: space-between; gap: 0.5rem; + padding: 0.8rem 1rem 0.5rem; + margin: 0; } + .qa-result-count { + font-size: 0.84rem; + color: #b0a07a; + white-space: nowrap; + flex-shrink: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + } + + .qa-sort-select { + gap: 0.3rem; + font-size: 0.78rem; + } + + .qa-sort-select select { + font-size: 0.84rem; + padding: 0.36rem 0.5rem; + min-height: 36px; + border-radius: 0.4rem; + } + + /* ── Layout ── */ .qa-layout { grid-template-columns: 1fr; + gap: 0; } .qa-sidebar { - position: static; - padding: 0.65rem; - max-height: 220px; - overflow-y: auto; + display: none; } + .qa-cards { + gap: 0; + min-width: 0; + overflow: hidden; + } + + /* ── Cards ── */ + .qa-card-scene { + border-radius: 0; + border-left: none; + border-right: none; + border-top: none; + border-bottom: 1px solid rgba(201, 168, 76, 0.18); + background: transparent; + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + .qa-card-scene:hover { + border-color: rgba(201, 168, 76, 0.18); + } + + .qa-card-scene--focused { + background: rgba(201, 168, 76, 0.04); + box-shadow: none; + } + + .qa-card-scene--pinned { + border-color: rgba(201, 168, 76, 0.3) !important; + box-shadow: none; + } + + /* ── Question header ── */ .qa-question-header { - padding: 0.86rem 0.82rem; - gap: 0.62rem; + padding: 1.1rem 1rem 0.6rem; + gap: 0.7rem; + align-items: flex-start; } - .qa-top-nav { - margin-top: 0.65rem; - margin-bottom: 0.72rem; - } - - .qa-back-to-site { - font-size: 0.73rem; - padding: 0.3rem 0.62rem; - } - - .qa-card-face { - padding: 0.15rem 0.82rem 0.86rem; - } - - .qa-card-actions { - padding: 0 0.82rem 0.62rem; - } - - .qa-share-feedback { - margin: -0.38rem 0.82rem 0.62rem; - font-size: 0.74rem; + .qa-face-label { + font-size: 0.9rem; + font-weight: 800; + flex: 0 0 1.2rem; + color: rgba(201, 168, 76, 0.7); + margin-top: 0.18rem; } .qa-question-text { - font-size: 0.97rem; + font-size: 1.05rem; line-height: 1.45; + font-weight: 600; + word-break: break-word; + overflow-wrap: break-word; + } + + .qa-question-main { + min-width: 0; + max-width: 100%; + } + + .qa-question-meta { + gap: 0.4rem; + font-size: 0.75rem; + margin-top: 0.1rem; + } + + .qa-topic-pill { + padding: 0.12rem 0.45rem; + font-size: 0.72rem; + } + + /* ── Actions ── */ + .qa-card-actions { + padding: 0.1rem 1rem 0.8rem 1rem; + gap: 0.5rem 0.45rem; + justify-content: flex-start; + flex-wrap: wrap; + } + + .qa-upvote-btn, + .qa-social-btn, + .qa-share-btn { + min-height: 40px; + padding: 0.45rem 0.85rem; + font-size: 0.8rem; + } + + .qa-share-feedback { + margin: -0.35rem 1rem 0.7rem; + font-size: 0.75rem; + } + + /* ── Answer ── */ + .qa-card-face { + padding: 0.2rem 1rem 1rem; + min-width: 0; + max-width: 100%; + } + + .qa-card-back { + column-gap: 0.7rem; + background: transparent; + border-top: 1px solid rgba(201, 168, 76, 0.1); + min-width: 0; + max-width: 100%; + overflow: hidden; } .qa-answer-text { - font-size: 0.95rem; - line-height: 1.6; + font-size: 0.97rem; + line-height: 1.65; + min-width: 0; + max-width: 100%; + overflow-wrap: break-word; + word-break: break-word; } + .qa-answer-byline { + margin-top: 0.7rem; + font-size: 0.78rem; + } + + .qa-read-more-btn { + min-height: 36px; + padding: 0.3rem 0.72rem; + font-size: 0.78rem; + margin-top: 0.65rem; + } + + /* ── Related questions ── */ + .qa-related-wrap { + margin-top: 0.9rem; + } + + .qa-related-label { + font-size: 0.72rem; + letter-spacing: 0.07em; + margin-bottom: 0.45rem; + } + + .qa-related-list { + display: flex; + flex-direction: column; + gap: 0.3rem; + } + + .qa-related-btn { + font-size: 0.84rem; + padding: 0.55rem 0.75rem; + min-height: 44px; + border-radius: 0.5rem; + text-align: left; + line-height: 1.35; + } + + /* ── No results ── */ + .qa-no-results { + margin: 0 1rem; + padding: 1.5rem 1rem; + border-radius: 0.6rem; + } + + /* ── Pagination ── */ .qa-pagination { gap: 0.5rem; - margin-top: 1.25rem; + margin: 1.25rem 1rem 1.5rem; } .qa-page-btn { flex: 1; - min-height: 42px; - padding: 0.45rem 0.7rem; - font-size: 0.88rem; + min-height: 48px; + padding: 0.55rem 0.7rem; + font-size: 0.9rem; + border-radius: 0.5rem; } .qa-page-info { - min-width: 3rem; - font-size: 0.82rem; - } - - .qa-related-btn { - font-size: 0.78rem; - padding: 0.3rem 0.62rem; + min-width: 3.5rem; + font-size: 0.84rem; + text-align: center; } }