/* ============================================================ crt.css :: the whole site on an old monitor ------------------------------------------------------------ A fixed overlay that sits above everything and takes no clicks, so the site underneath behaves exactly as it did. ------------------------------------------------------------ WHAT ACTUALLY MAKES SOMETHING LOOK LOW RESOLUTION ------------------------------------------------------------ Not blur. Blurring a page makes it look broken and unreadable, and it is the first thing everybody reaches for. Three things, in order of how much they matter: 1. SCANLINES. A dark line every third pixel. A CRT drew the picture in horizontal passes with gaps between them, and the gaps are the single most recognisable artefact. 2. THE SHADOW MASK. Under the scanlines, a vertical red, green, blue stripe repeating every 3px. That is the phosphor triad: the actual thing a colour CRT was made of. At normal viewing distance it reads as texture rather than colour, and it is what separates "scanline filter" from "this is a tube". 3. A VIGNETTE plus a glass sheen. The corners of a curved tube were dimmer, and the front was glass, so it caught the room. Chunky pixels come from image-rendering, further down, which turns off smoothing so scaled images go blocky instead of soft. That is the honest way to look lower resolution: show the pixels, do not smear them. ------------------------------------------------------------ WHY IT IS NOT ON THE PRIVATE WING ------------------------------------------------------------ pages/private.html already has its own, tuned much heavier for a monochrome terminal: harder scanlines, a green bloom, a sweep band, a flicker. Running both would double every layer. js/crt.js skips any page whose carries logon-root. ------------------------------------------------------------ Safari 7 rules: no grid, no flexbox gap, no :has(), prefixes on every gradient. ============================================================ */ .crt { position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* Above the site, above the wallpaper, above the boot curtain and the operating system menu. A monitor is in front of everything the monitor is showing. */ z-index: 9999; /* Never eats a click, a hover, a text selection or a drag. */ pointer-events: none; /* Nothing here is content. */ -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* The whole effect off in one class, set by js/crt.js and remembered. Display rather than opacity so an old machine stops compositing the layers entirely. */ html.crt-off .crt { display: none; } /* ---------- 1. scanlines -------------------------------------- 1px dark, 2px clear. At 3px pitch this reads as a coarse, older display; tighten it to 2px and it reads as a modern high density panel pretending, which is the opposite of the point. */ .crt__scan { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -webkit-repeating-linear-gradient(top, rgba(0,0,0,.20) 0px, rgba(0,0,0,.20) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px); background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.20) 0px, rgba(0,0,0,.20) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px); } /* ---------- 2. the shadow mask -------------------------------- The phosphor triad. Vertical stripes of red, green and blue, 3px across, at very low alpha. Kept faint on purpose. Push these past about .06 and the whole site takes on a colour cast and text stops being black. The effect is meant to be felt rather than seen. */ .crt__mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -webkit-repeating-linear-gradient(left, rgba(255,0,0,.045) 0px, rgba(255,0,0,.045) 1px, rgba(0,255,0,.045) 1px, rgba(0,255,0,.045) 2px, rgba(0,0,255,.045) 2px, rgba(0,0,255,.045) 3px); background-image: repeating-linear-gradient(to right, rgba(255,0,0,.045) 0px, rgba(255,0,0,.045) 1px, rgba(0,255,0,.045) 1px, rgba(0,255,0,.045) 2px, rgba(0,0,255,.045) 2px, rgba(0,0,255,.045) 3px); } /* ---------- 3. the tube and the glass ------------------------- Corners dimmer than the middle, plus a soft diagonal sheen off the top left the way a glass front catches a window. */ .crt__glass { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -webkit-radial-gradient(50% 45%, ellipse, rgba(0,0,0,0) 55%, rgba(0,0,0,.30) 100%), -webkit-linear-gradient(315deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%); background-image: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.30) 100%), linear-gradient(315deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%); } /* ---------- 4. chunky pixels ----------------------------------- Turn off smoothing so anything the browser scales goes blocky rather than soft. This is what actually reads as low resolution, and unlike a blur it costs no legibility: text is untouched because text is not an image. Three spellings for three eras. -webkit-optimize-contrast is the one Safari 7 understands; pixelated is the modern keyword. A browser ignores the ones it does not know, so the last one it recognises wins. Deliberately NOT applied to the wallpaper. A 1920x1200 photo being downscaled with smoothing off looks like a mistake rather than a monitor, and it is the one image on screen big enough for the difference to be ugly. */ html:not(.crt-off) .badge img, html:not(.crt-off) .btn31, html:not(.crt-off) .ico-img, html:not(.crt-off) .sticker img, html:not(.crt-off) .orb { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; } /* ---------- the switch ----------------------------------------- It moved. A monitor effect you cannot turn off is a reason to close the tab, so there has always been a switch for it; it just used to be one anonymous button appended to the bottom of the wallpaper widget by js/crt.js. It is a row in the Settings panel now, styled as .setpanel__btn in css/style.css, beside the four other settings on this machine. .crt-toggle had one job, which was to make that one appended button look deliberate, and there is no appended button any more. */