diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/content/style.css | 29 |
1 files changed, 13 insertions, 16 deletions
diff --git a/src/content/style.css b/src/content/style.css index 220fb43..58db85f 100644 --- a/src/content/style.css +++ b/src/content/style.css @@ -249,30 +249,27 @@ pre.lineno { } /* A line wider than the page scrolls inside the box that frames it. - Saying so on the pre alone is not enough: the line numbers sit in a - table cell beside the code, and a table grows to fit what it holds, - so the pre is never narrower than its longest line and never has - anything to scroll. The box scrolls instead, and the numbers stay - where they are while the code moves under them. */ + Saying so on the pre alone does nothing: the numbers sit in a table + cell beside the code, and a table grows to fit what it holds, so + the pre is never narrower than its longest line and never has + anything to scroll. The box scrolls instead, numbers and all. + + Pinning the numbers so they stay while the code moves was tried + and taken out. Nothing covers them: at rest the cell's background + reaches exactly to where the code begins, but a scroll draws the + two out of step for a frame and the code is seen crossing them. + Constraining the cell instead, so that only the code scrolls, + needs a max-width on a table cell, which is a hint a browser may + ignore --- and Firefox does, whereupon the block stops containing + its own lines again. */ .highlight, .listingblock .content { overflow-x: auto; } -/* Collapsed, so the numbers sit flush against the code. Left - separate, the cells stand two pixels apart: pinning the first to - the left edge moves it by that much, and the gap it leaves is a - strip the code scrolls through in plain view. */ .listingblock table { border-collapse: collapse; } -.listingblock td:first-child { - position: sticky; - left: 0; - z-index: 1; - background-color: var(--color-code-bg); -} - pre { overflow: auto; } |
