diff --git a/src/public_training.css b/src/public_training.css index 70fbdc6..af1b5dc 100644 --- a/src/public_training.css +++ b/src/public_training.css @@ -976,7 +976,7 @@ button { align-items: center; flex-direction: row; gap: 8px; - padding: 6px 2px 12px; + padding: 4px 2px 8px; } .profile-brand { @@ -986,8 +986,8 @@ button { .profile-brand img, .profile-brand-mark { - width: 38px; - height: 38px; + width: 32px; + height: 32px; border-radius: 10px; } @@ -1006,7 +1006,7 @@ button { } .profile-hero { - padding: 14px; + padding: 10px; border-radius: 14px; } @@ -1022,7 +1022,8 @@ button { .profile-hero h1 { margin: 5px 0; - font-size: clamp(1.45rem, 8vw, 2.1rem); + font-size: clamp(1.25rem, 5.6vw, 1.65rem); + overflow-wrap: anywhere; } .profile-meta { @@ -1046,8 +1047,8 @@ button { .profile-motivation-grid, .profile-growth-grid, .profile-grid { - gap: 7px; - margin-top: 8px; + gap: 6px; + margin-top: 6px; } .profile-card { @@ -1055,7 +1056,7 @@ button { } .profile-stat { - padding: 9px 10px; + padding: 7px 9px; } .profile-stat span, @@ -1072,7 +1073,7 @@ button { .profile-credit-card, .profile-challenge-card, .profile-growth-card { - padding: 11px; + padding: 9px; } .profile-credit-card > p, @@ -1125,15 +1126,15 @@ button { .profile-card-head { gap: 8px; - padding: 10px 11px; + padding: 8px 9px; } .profile-card-head h2 { - font-size: 0.82rem; + font-size: 0.78rem; } .profile-card-body { - padding: 11px; + padding: 9px; } .profile-level-row { @@ -1165,7 +1166,7 @@ button { .profile-timer { margin: 8px 0; - font-size: clamp(2rem, 11vw, 3rem); + font-size: clamp(1.8rem, 8vw, 2.4rem); } .profile-timer-phase, @@ -1190,7 +1191,7 @@ button { .profile-performance, .profile-goals, .profile-disclosure { - margin-top: 8px !important; + margin-top: 6px !important; } .profile-chart-card .profile-card-head p { @@ -1203,7 +1204,7 @@ button { } .profile-pace-chart svg { - max-height: 115px; + max-height: 100px; } .profile-chart-labels { @@ -1275,6 +1276,40 @@ button { padding: 7px 8px; font-size: 0.65rem; } + .profile-goals { + gap: 6px; + } + + .profile-goal { + padding: 9px; + } + + .profile-goal h3 { + font-size: 0.85rem; + } + + .profile-goal h3, + .profile-goal p, + .profile-goal-row { + margin-bottom: 6px; + } + + .profile-progress { + height: 5px; + } + + .profile-disclosure > summary { + min-height: 44px; + } + + .profile-timer-setup input, + .profile-marker-form input, + .profile-marker-form select, + .profile-class-select select { + min-height: 40px; + font-size: 1rem; + } + } @media (max-width: 360px) { @@ -1292,3 +1327,25 @@ button { grid-template-columns: 1fr; } } + +@media (min-width: 380px) and (max-width: 620px) { + .profile-achievements { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .profile-achievement { + align-items: flex-start; + gap: 5px; + padding: 6px; + } + + .profile-achievement > span { + width: 23px; + height: 23px; + } + + .profile-achievement > div { + min-width: 0; + overflow-wrap: anywhere; + } +}