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 10:11:48 +01:00
parent 49a1ec323f
commit 503a8b3e07
1 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
html/style.css
View File

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