diff --git a/html/style.css b/html/style.css index b3e33c3..0c030dd 100644 --- a/html/style.css +++ b/html/style.css @@ -44,9 +44,10 @@ body { color: var(--text); height: 100vh; display: grid; - grid-template-rows: 1fr var(--footer-h); overflow: hidden; font-size: 16px; + grid-template-rows: auto auto; + padding: 0.5vh; } /* ─── .main ─────────────────────────────────────────────────── */ @@ -75,7 +76,7 @@ body { border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--glow-soft); overflow: hidden; - height: 100%; + align-self: start; } /* ─── .conditions ───────────────────────────────────────────── */ @@ -270,7 +271,7 @@ img.logo { /* ─── Video panel ───────────────────────────────────────────── */ .video { grid-area: video; - height: 100%; + height: auto; overflow: hidden; min-height: 0; position: relative; @@ -281,7 +282,7 @@ img.logo { .video img { width: 100%; - height: 100%; + height: auto; object-fit: contain; display: block; padding: 4px; @@ -290,14 +291,12 @@ img.logo { /* ─── Footer ────────────────────────────────────────────────── */ .footer { - height: var(--footer-h); width: 100%; display: flex; align-items: center; justify-content: center; - flex-shrink: 0; grid-row: -1; - align-self: end; + padding: 1vh; } .footer p, .footer a { @@ -314,9 +313,6 @@ img.logo { Switch .conditions to a single-column stacked list ════════════════════════════════════════════════════════════════ */ @media (orientation: landscape) { - body { - grid-template-rows: 1fr var(--footer-h); /* ← restore stretch in landscape */ - } .main { grid-template-rows: 1fr; @@ -355,7 +351,6 @@ img.logo { justify-content: unset; height: 100%; width: 100%; - aspect-ratio: 16 / 9; } .video img { @@ -397,7 +392,7 @@ img.logo { ════════════════════════════════════════════════════════════════ */ @media (orientation: portrait) { - .main { border-radius: var(--r-sm); } + .main { border-radius: var(--r-sm) var(--r-sm) 0 0; } img.logo { max-height: 56px; }