fix: remove CRT scanline effect from article images

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
randogoth 2026-10-13 22:42:30 +03:00
parent 9be3af5e28
commit 9adf10a9d6

View file

@ -144,24 +144,13 @@ a:visited { color: var(--lcyan); }
.msgbody ul > li::before { content: "\00B7 "; color: var(--cyan); }
/* Pictures keep the scanlines the page gave up: on a board, an image was a
monitor showing it. See plugins/crtimages.py for the wrapper. */
.msgbody .crt { position: relative; display: block; margin: 1em 0; line-height: 0;
.msgbody .crt { display: block; margin: 1em 0; line-height: 0;
border: 1px solid var(--blue); }
/* Everything fills the column, including images smaller than it. Upscaling is
nearest-neighbour, so a 320 wide DOS screenshot comes out as bigger pixels
rather than a blurred one, which is the right answer for this material. */
.msgbody .crt img { display: block; width: 100%; height: auto; margin: 0;
border: 0; image-rendering: pixelated; }
/* The scanlines are the monitor it is being shown on. Look straight at it and
they go, which is also the only way to see the picture clean. */
.msgbody .crt::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(to bottom,
rgba(0,0,0,0) 0 2px, rgba(0,0,0,.38) 2px 3px);
opacity: 1; transition: opacity .12s linear; }
.msgbody .crt:hover::after,
.msgbody .crt:focus-within::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.msgbody .crt::after { transition: none; }
}
/* Embeds fill the column like everything else. The ratio is injected per
element by plugins/crtimages.py from each embed's own attributes. */
.msgbody iframe { display: block; width: 100%; height: auto; margin: 1em 0;