diff --git a/src/public_training.css b/src/public_training.css index 7d70b19..70fbdc6 100644 --- a/src/public_training.css +++ b/src/public_training.css @@ -962,97 +962,333 @@ button { } } -.profile-marker-form { - display: grid; - grid-template-columns: minmax(130px, 0.55fr) minmax(190px, 1.45fr) auto; - gap: 10px; - align-items: end; - padding: 16px; - border-bottom: 1px solid var(--line); -} - -.profile-marker-form > div, -.profile-marker-form > small { - grid-column: 1 / -1; -} - -.profile-marker-form h3, -.profile-pace-blocks h3 { - margin: 0; - font-family: Orbitron, sans-serif; - font-size: 0.9rem; -} - -.profile-marker-form p, -.profile-pace-blocks > p { - margin: 5px 0 0; - color: var(--muted); - font-size: 0.76rem; -} - -.profile-marker-form label { - display: grid; - gap: 5px; - color: var(--muted); - font-size: 0.7rem; - font-weight: 700; -} - -.profile-marker-form input, -.profile-marker-form select { - width: 100%; - min-height: 42px; - padding: 9px 10px; - border: 1px solid var(--line); - border-radius: 10px; - background: var(--surface-2); - color: var(--text); - font: inherit; -} - -.profile-marker-form > small { - min-height: 1em; - color: var(--green); -} - -.profile-pace-blocks { - padding: 16px; - border-top: 1px solid var(--line); -} - -.profile-pace-blocks > div { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); - gap: 8px; - margin-top: 10px; -} - -.profile-pace-blocks article { - display: grid; - gap: 4px; - padding: 11px; - border: 1px solid var(--line); - border-radius: 11px; - background: rgba(255, 255, 255, 0.025); -} - -.profile-pace-blocks article span, -.profile-pace-blocks article small { - color: var(--muted); - font-size: 0.68rem; -} - -.profile-pace-blocks article strong { - font-family: Orbitron, sans-serif; -} @media (max-width: 620px) { + body { + font-size: 13px; + } + + .public-training-root { + padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); + } + + .profile-header { + align-items: center; + flex-direction: row; + gap: 8px; + padding: 6px 2px 12px; + } + + .profile-brand { + min-width: 0; + gap: 8px; + } + + .profile-brand img, + .profile-brand-mark { + width: 38px; + height: 38px; + border-radius: 10px; + } + + .profile-brand strong { + font-size: 0.76rem; + } + + .profile-brand span, + .profile-updated { + font-size: 0.62rem; + } + + .profile-updated { + margin: 0 0 0 auto; + text-align: right; + } + + .profile-hero { + padding: 14px; + border-radius: 14px; + } + + .profile-hero::after { + right: -8px; + bottom: -28px; + font-size: 7rem; + } + + .profile-eyebrow { + font-size: 0.62rem; + } + + .profile-hero h1 { + margin: 5px 0; + font-size: clamp(1.45rem, 8vw, 2.1rem); + } + + .profile-meta { + gap: 5px; + } + + .profile-pill, + .profile-class-select { + padding-top: 3px; + padding-bottom: 3px; + font-size: 0.68rem; + } + + .profile-class-select select { + min-width: 92px; + padding-top: 3px; + padding-bottom: 3px; + } + + .profile-stat-grid, + .profile-motivation-grid, + .profile-growth-grid, + .profile-grid { + gap: 7px; + margin-top: 8px; + } + + .profile-card { + border-radius: 12px; + } + + .profile-stat { + padding: 9px 10px; + } + + .profile-stat span, + .profile-mini-label { + font-size: 0.61rem; + letter-spacing: 0.05em; + } + + .profile-stat strong { + margin-top: 4px; + font-size: clamp(0.9rem, 4.4vw, 1.1rem); + } + + .profile-credit-card, + .profile-challenge-card, + .profile-growth-card { + padding: 11px; + } + + .profile-credit-card > p, + .profile-challenge-card > p { + margin: 4px 0 8px; + line-height: 1.3; + } + + .profile-credit-card ul { + gap: 5px; + } + + .profile-credit-card li { + gap: 6px; + } + + .profile-credit-card li > span { + width: 21px; + height: 21px; + font-size: 0.58rem; + } + + .profile-challenges, + .profile-achievements { + gap: 5px; + } + + .profile-challenge, + .profile-achievement { + padding: 7px; + } + + .profile-challenge > span, + .profile-achievement > span { + width: 27px; + height: 27px; + } + + .profile-growth-head { + margin-bottom: 6px; + } + + .profile-growth-card > strong { + margin-top: 5px; + } + + .profile-growth-card > p { + margin-top: 3px; + } + + .profile-card-head { + gap: 8px; + padding: 10px 11px; + } + + .profile-card-head h2 { + font-size: 0.82rem; + } + + .profile-card-body { + padding: 11px; + } + + .profile-level-row { + flex-direction: row; + align-items: end; + gap: 8px; + margin-bottom: 8px; + } + + .profile-level-row h3 { + margin-top: 3px; + font-size: 1rem; + } + + .profile-plan-copy { + margin: 6px 0; + line-height: 1.35; + } + + .profile-timer-setup { + gap: 6px; + margin: 10px 0 2px; + padding: 8px; + } + + .profile-timer-setup input { + padding: 7px 8px; + } + + .profile-timer { + margin: 8px 0; + font-size: clamp(2rem, 11vw, 3rem); + } + + .profile-timer-phase, + .profile-session-stats { + margin-bottom: 8px; + } + + .profile-session-heading { + margin: 10px 0 5px; + } + + .profile-session-stats > div { + padding: 7px 4px; + } + + .profile-button { + min-height: 40px; + padding: 7px 11px; + } + + .profile-chart-card, + .profile-performance, + .profile-goals, + .profile-disclosure { + margin-top: 8px !important; + } + + .profile-chart-card .profile-card-head p { + margin-top: 3px; + font-size: 0.67rem; + } + + .profile-pace-chart { + padding: 5px 8px 9px; + } + + .profile-pace-chart svg { + max-height: 115px; + } + + .profile-chart-labels { + margin-top: 4px; + font-size: 0.61rem; + } + + .profile-performance-stats > div { + gap: 3px; + padding: 9px; + } + + .profile-performance-stats span { + font-size: 0.59rem; + letter-spacing: 0.04em; + } + + .profile-performance-stats strong { + font-size: 0.78rem; + } + .profile-marker-form { - grid-template-columns: 1fr; + grid-template-columns: minmax(95px, 0.65fr) minmax(0, 1.35fr); + gap: 7px; + padding: 10px; } .profile-marker-form > div, - .profile-marker-form > small { - grid-column: auto; + .profile-marker-form > small, + .profile-marker-form > button { + grid-column: 1 / -1; + } + + .profile-marker-form h3, + .profile-pace-blocks h3 { + font-size: 0.78rem; + } + + .profile-marker-form p, + .profile-pace-blocks > p { + margin-top: 3px; + font-size: 0.66rem; + } + + .profile-marker-form input, + .profile-marker-form select { + min-height: 40px; + padding: 7px 8px; + } + + .profile-pace-blocks, + .profile-stint-table-wrap { + padding: 10px; + } + + .profile-pace-blocks > div { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 6px; + margin-top: 7px; + } + + .profile-pace-blocks article { + gap: 2px; + padding: 8px; + } + + .profile-history th, + .profile-history td { + padding: 7px 8px; + font-size: 0.65rem; + } +} + +@media (max-width: 360px) { + .profile-brand span { + display: none; + } + + .profile-level-row { + align-items: flex-start; + flex-direction: column; + } + + .profile-marker-form, + .profile-pace-blocks > div { + grid-template-columns: 1fr; } }