/** * GSE Theme – Vertretungsplan Display Mode * Fullscreen/kiosk view of the substitution-schedule page * (/schulbetrieb/vertretungsplan), toggled by adding `display` (generic * kiosk mode) and `vertretungsplan` (this page's own table styling) * classes to ``/`` — not present in a plain page load, so * don't mistake this file for dead code just because a normal fetch of * the page doesn't show it triggered. * * `html.display`/`body.display` scale the whole page down and hide * nav/metadata/etc. — generic enough that another page could reuse the * same mechanism later, even though only this one does today. * * The table itself is real markup (`

`, already * styled by document-page.css's `table` rules) in the normal view; in * display mode a *different*, div-based fake table (`.table .thead * .td`, `.table .tbody .tr`) is used instead so the substitution list * can flow across `columns: 6` — real `` elements can't do CSS * multi-column layout, hence the parallel markup/CSS. */ @import url("variables.css"); html.display { transform: scale(0.75); transform-origin: 0 0; width: 133.3333333333vw; height: 133.3333333333vh; } body.display { nav { display: none; } main { height: 133.3333333333vh; section#body { margin-top: 0; .metadata, .divider, .content-container { display: none; } } } .page-content { height: calc(133.3333333333vh - 80px); } &.vertretungsplan { background-color: var(--color-white); .spalten { column-fill: auto; column-width: 600px; height: calc(90% - 220px); } .table { .thead { color: var(--color-light); background-color: var(--color-yellow); .td { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lg); font-weight: var(--fw-light); } } .tbody .tr { &:nth-child(odd) { background-color: var(--color-stripe-teal); } &:nth-child(even) { background-color: var(--color-stripe-green); } } .tr { break-inside: avoid; columns: 6; &.newline { border-top: 3px solid var(--color-white); } .td { padding: 15px; &.colspan { column-span: all; } } } } } }