diff --git a/html/style.css b/html/style.css index b1b8203..312c590 100644 --- a/html/style.css +++ b/html/style.css @@ -321,7 +321,11 @@ img.logo { .main { grid-template-rows: 1fr; - grid-template-columns: minmax(180px, 1fr) auto; /* ← back to 2 columns */ + #grid-template-columns: minmax(180px, 1fr) auto; + #grid-template-columns: minmax(300px, auto) min(calc(100vw - 360px), calc(100vh * 16 / 9)); + #grid-template-columns: minmax(300px, auto) 1fr; + #grid-template-columns: 1fr auto; + grid-template-columns: minmax(300px, 1fr) auto; grid-template-areas: "conditions video"; border-radius: var(--r-lg) 0 0 var(--r-lg); justify-content: center; @@ -352,13 +356,27 @@ img.logo { } .video { - height: min(100%, calc((100vw - 180px) * 9 / 16)); - #height: 100%; - max-width: calc(100vw - 180px); - overflow: hidden; - display: flex; - align-items: center; + height: 100%; + aspect-ratio: 16 / 9; + max-height: 100%; align-self: center; + justify-self: end; + overflow: hidden; + max-width: calc(100vw - 300px); + #max-width: 100%; + #width: 100%; + #height: min(100%, calc((100vw - 300px) * 9 / 16)); + #overflow: hidden; + #display: flex; + #align-items: center; + #align-self: center; + #justify-self: end; + #height: 100%; + #width: 100%; + #max-width: calc(100vw - 0px); + #aspect-ratio: 16 / 9; + #max-height: 100%; + #width: auto; } .video img { @@ -366,6 +384,7 @@ img.logo { height: 100%; object-fit: contain; display: block; + padding-right: 4px; } p.header { grid-column: 1; grid-row: 1; } @@ -387,8 +406,8 @@ img.logo { .cat { font-size: 1rem; } .cat p { padding-left: 14px; } - .data { font-size: 1.5rem; margin-top: 2px; padding: 2px 0; } - .datapoint { margin-top: 14px; padding: 5px 0 0 8px; font-size: 0.75rem; } + .data { font-size: 1.5rem; margin-top: 2px; padding: 0.5vh 1vw; } + .datapoint { margin-top: 14px; padding: 0.5vh; font-size: 0.75rem; } .popup h5 { font-size: 1rem; } }