klammertext/sks/block/css/block.css

p {
    margin: .5rem 0 .5rem 0;
}

.quote {
    margin-left: 2em;
}

.box {
    border: solid black 1px;
    padding: 0.5em 1em;
    clear: both;
    margin: 1.0em 0;
    overflow: auto;
}

.centered {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.indent {
    margin-left: 2rem;
}

/* @vfill: LaTeX's \vfill glue as flex-grow.  The :has() rule turns the
   text column into a flex column ONLY in documents that use @vfill (flex
   containers do not collapse vertical margins, so paragraph spacing
   shifts slightly there); several vfills share the free space equally,
   like \vfill.  The min-height ties the fill to the window: with a title
   or status bar the column overshoots by their height (a small scroll);
   content taller than the window collapses the glue, as on a full LaTeX
   page.  Fills the window, not a browser-printed page. */
#text:has(.vfill) {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 1lh);
}

/* One line of whitespace below the filled content, so the last block
   does not touch the bottom of the window.  A margin on the last flex
   item, not #text padding: #middle's overflow clips the padding. */
#text:has(.vfill) > :last-child {
    margin-bottom: 1lh;
}

.vfill {
    flex-grow: 1;
}