fix: remove CRT scanline effect from article images
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
9be3af5e28
commit
9adf10a9d6
1 changed files with 1 additions and 12 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue