xbl/hardbrugg.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: style.css

Browse Source
This commit is contained in:
root
2026-03-08 11:12:20 +01:00
parent 503a8b3e07
commit ca096b62e8
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
html/style.css
View File

@ -43,11 +43,12 @@ body {
background-color: var(--bg); background-color: var(--bg);
color: var(--text); color: var(--text);
height: 100vh; height: 100vh;
height: 100dvh;
display: grid; display: grid;
overflow: hidden;
font-size: 16px; font-size: 16px;
grid-template-rows: auto auto; grid-template-rows: 1fr auto;
padding: 0.5vh; padding: 0.5vh;
overflow: hidden;
} }
/* ─── .main ─────────────────────────────────────────────────── */ /* ─── .main ─────────────────────────────────────────────────── */
@ -77,6 +78,8 @@ body {
box-shadow: var(--glow-soft); box-shadow: var(--glow-soft);
overflow: hidden; overflow: hidden;
align-self: start; align-self: start;
max-height: 100%;
min-height: 0;
} }
/* ─── .conditions ───────────────────────────────────────────── */ /* ─── .conditions ───────────────────────────────────────────── */
@ -276,17 +279,16 @@ img.logo {
min-height: 0; min-height: 0;
position: relative; position: relative;
z-index: 0; z-index: 0;
min-height: 0;
overflow: hidden; overflow: hidden;
} }
.video img { .video img {
width: 100%; width: 100%;
height: auto; height: 100%;
object-fit: contain; object-fit: contain;
object-position: top;
display: block; display: block;
padding: 4px; padding: 4px;
max-height: 100%;
} }
/* ─── Footer ────────────────────────────────────────────────── */ /* ─── Footer ────────────────────────────────────────────────── */
@ -313,6 +315,9 @@ img.logo {
Switch .conditions to a single-column stacked list Switch .conditions to a single-column stacked list
════════════════════════════════════════════════════════════════ */ ════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) { @media (orientation: landscape) {
body {
grid-template-rows: 1fr auto;
}
.main { .main {
grid-template-rows: 1fr; grid-template-rows: 1fr;
@ -320,6 +325,7 @@ img.logo {
grid-template-areas: "conditions video"; grid-template-areas: "conditions video";
border-radius: var(--r-lg) 0 0 var(--r-lg); border-radius: var(--r-lg) 0 0 var(--r-lg);
justify-content: center; justify-content: center;
height: 100%;
} }
/* Single column — everything stacks top-to-bottom */ /* Single column — everything stacks top-to-bottom */
@ -346,11 +352,13 @@ img.logo {
} }
.video { .video {
display: block; height: min(100%, calc((100vw - 180px) * 9 / 16));
align-items: unset; #height: 100%;
justify-content: unset; max-width: calc(100vw - 180px);
height: 100%; overflow: hidden;
width: 100%; display: flex;
align-items: center;
align-self: center;
} }
.video img { .video img {