diff --git a/activity.css b/activity.css index d433d4b..61958eb 100644 --- a/activity.css +++ b/activity.css @@ -4,7 +4,7 @@ .page-activity .intro { text-align: center; - margin-bottom: 1.5em; + margin-bottom: 1.2em; } .page-activity .intro p { @@ -14,12 +14,13 @@ .activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 16px; + gap: 12px; } @media (min-width: 600px) { .activity-grid { grid-template-columns: repeat(3, 1fr); + gap: 16px; } } @@ -29,9 +30,9 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 10px; - min-height: 140px; - padding: 16px 10px; + gap: 8px; + min-height: 115px; + padding: 12px 8px; background: var(--color-white); border: 2px solid transparent; border-radius: var(--radius-md); @@ -46,14 +47,14 @@ } .activity-card .icon { - font-size: 2.6rem; + font-size: 2.2rem; line-height: 1; } .activity-card .label { font-family: var(--font-heading); font-weight: 700; - font-size: 0.95rem; + font-size: 0.9rem; text-align: center; color: var(--color-text); } diff --git a/style.css b/style.css index db9bb2e..c890f20 100644 --- a/style.css +++ b/style.css @@ -35,6 +35,9 @@ html { body { margin: 0; min-height: 100vh; + min-height: 100dvh; + display: flex; + flex-direction: column; font-family: var(--font-body); font-size: clamp(1rem, 3.6vw, 1.15rem); line-height: 1.5; @@ -64,7 +67,8 @@ p { width: 100%; max-width: 480px; margin: 0 auto; - padding: 24px 20px 40px; + padding: 20px 20px 32px; + flex: 1; } /* Buttons -------------------------------------------------------------- */ @@ -160,9 +164,8 @@ p { /* Fixed bottom bar for a primary continue action ------------------------- */ -body.has-continue-bar, -body.has-continue-bar .container { - padding-bottom: calc(130px + env(safe-area-inset-bottom)); +body.has-continue-bar main.container { + padding-bottom: calc(110px + env(safe-area-inset-bottom)); } .continue-bar { @@ -171,8 +174,8 @@ body.has-continue-bar .container { right: 0; bottom: 0; z-index: 100; - padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); - background: linear-gradient(0deg, var(--color-bg) 70%, rgba(255, 245, 247, 0)); + padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); + background: linear-gradient(180deg, rgba(255, 245, 247, 0) 0%, var(--color-bg) 50%); pointer-events: none; }