67 lines
2.4 KiB
CSS
67 lines
2.4 KiB
CSS
.pairs {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* A hairline down the gutter between the columns — ONE device of separation (remark 9). Drawn on
|
|
the CONTENT, not on the scroll container: on the container the background is positioned by the
|
|
padding-box, which includes the scrollbar, and on classic Windows scrollbars the centre would
|
|
drift away from the column boundary by half the scrollbar's width. Here the centre is the centre
|
|
of the content, always.
|
|
Exactly 50% lands right because the block's insets are symmetric (--space-3 plus a transparent
|
|
2px border on both sides) — see .pair and .callout.
|
|
|
|
Painted in the SHELL colour: a black groove reads as the same gap that divides the panels,
|
|
rather than as one more grey line inside one. */
|
|
.sheet {
|
|
background-image: linear-gradient(var(--color-shell), var(--color-shell));
|
|
background-position: center top;
|
|
background-size: 1px 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* A block without a note stands on the same grid as a callout: its stripe is transparent. */
|
|
.pair {
|
|
border-inline: 2px solid transparent;
|
|
|
|
/* Padding + the transparent border equal the tab inset, so the text sits under the tab label. */
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
/* The gutter is made up of the columns' own paddings, not of gap: then the line splits it in half
|
|
while the total spacing between the texts stays as it was — the device is exactly one, and the
|
|
width of the columns has not shifted. */
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.source,
|
|
.target {
|
|
font-size: var(--font-size-content);
|
|
line-height: var(--line-height-content);
|
|
white-space: pre-line;
|
|
}
|
|
|
|
/* The muted source column is a decision, not a measurement: in Fleet this place holds highlighted
|
|
code. To be revisited on a real reader (BACKLOG Ф-7).
|
|
We do NOT assign a typeface to the source: the pick by language is done by the browser from the
|
|
`lang` of the pair's data (`STACK_DECISIONS.md` §2). Any named face here is pair-specific — an SC
|
|
stack would render Japanese kanji with Chinese shapes (Han unification), and would not suit
|
|
Korean or Latin at all; a `:lang()` branch would be the same pair specificity, only written in
|
|
CSS. */
|
|
.source {
|
|
color: var(--color-text-secondary);
|
|
padding-right: var(--space-4);
|
|
}
|
|
|
|
.target {
|
|
color: var(--color-text);
|
|
padding-left: var(--space-4);
|
|
}
|
|
|
|
.missing {
|
|
color: var(--color-text-secondary);
|
|
}
|