/* ============================================================ boot.css :: the network boot sequence ------------------------------------------------------------ Loaded only by pages/private.html, which uses the bare shell and takes over the whole window. Two phases, each a full screen layer. js/boot.js reveals them in order and then hands over to the terminal in tty.css. 1. PXE black, the network boot: DHCP, then TFTP 2. LOAD black, the logo, and the sweeping green bar The .boot__welcome and .boot__ring rules further down belong to a third phase that no longer runs: a Vista aurora with a spinning ring. They are kept only because tools/logonbg.py can still draw that look if it is ever wanted back. Nothing references them today. ------------------------------------------------------------ THE LOADING BAR ------------------------------------------------------------ Vista's is NOT a bar that fills up, and it is not Windows 7's "Starting Windows" with the four colour flag. Those two get confused constantly. Vista: a narrow dark trough with rounded ends, and a single bright green block that sweeps left to right, leaves the far end, and re-enters from the left. It loops forever and never shows real progress, because it never knew any. The block is a gradient that is transparent at both edges and brightest just past its centre, which is what gives it the comet look rather than a sliding rectangle. PREVIOUS BUG: the reduced motion rule killed the animation AND pinned the block at left:90px, which parked it in the middle of the trough looking broken. Freezing a progress indicator half way is the worst possible "reduced" state. It now becomes a calm full width bar instead, which reads as "working" without moving. ============================================================ */ /* ============================================================ THE FONT ------------------------------------------------------------ Web437_IBM_VGA_9x16, from the Ultimate Oldschool PC Font Pack. (C) 2016 VileR, CC BY-SA 4.0. Licence text is in fonts/VGA-FONT-LICENSE.txt and the credit is in ASSETS.md. This is THE font. Not a monospace stack that looks a bit like it: it is a remake of the actual 9x16 character ROM a VGA card drew text mode with, which is what every BIOS on every beige box was rendered in. Lucida Console is a nice typeface designed in the nineties for reading code. This is a grid of lit pixels. 9x16 rather than 8x16 because 9 is what VGA text mode actually used on screen: the ninth column is the gap the hardware added between cells, and it is why DOS box drawing characters join up. ------------------------------------------------------------ AND WHY THE SELECTOR IS WHAT IT IS ------------------------------------------------------------ .boot__post * , not just .boot__post. css/chrome.css carries a universal rule, * { font-family: Selawik ... }, as a safety net so form controls pick up the site font. A universal selector has specificity zero, but it still targets every element DIRECTLY, and a direct match of any specificity beats an inherited value. So every inside the boot screen, every dim line, every highlighted value and every row of the BIOS panel was being drawn in a PROPORTIONAL FONT while its parent was monospace. That is why the columns in the setup panel did not line up: the text was never monospaced to begin with. Naming the descendants is what fixes it. ============================================================ */ @font-face { font-family: "VGA"; src: url("../fonts/vga-9x16.woff") format("woff"); font-weight: normal; font-style: normal; } /* ============================================================ NO MOUSE BEFORE AN OPERATING SYSTEM IS RUNNING ------------------------------------------------------------ A BIOS from 2003 had no mouse driver. DOS had none unless you loaded one, and a serial console never had one at all. The pointer sitting on top of those screens was the single detail that gave away that this is a web page, and it is also a promise the screens do not keep: there is nothing to point at. So the whole boot chain is keyboard only. The POST, the Setup utility, the boot device menu, the network boot and the MS-DOS partition all hide the cursor and ignore both buttons. cursor: none AND pointer-events: none, because they do different halves of it. The first takes the arrow away. The second is what actually stops a click landing, including a right click, so the browser menu does not open either. THE COST, AND IT IS REAL. The footer of the POST prints DEL and F8 as clickable words, and the boot device rows are clickable, both added deliberately because function keys are awkward on a Mac laptop where F12 usually needs Fn held. Those are inert now. The spans are still in the markup, so restoring them is deleting the pointer-events line below and nothing else. Pages Web and Pages 98 are untouched. They are graphical operating systems and a desktop without a pointer is not authentic, it is broken. ============================================================ */ body.booting { margin: 0; padding: 0; background: #000000; overflow: hidden; cursor: none; } .boot, .boot *, .osmenu, .osmenu * { cursor: none; pointer-events: none; } /* Text selection goes with it. There is no mouse, so there is no dragging out a selection, and a half selected BIOS screen looks like a rendering fault rather than like a selection. */ /* .osmenu is a SIBLING of the .boot layers rather than a child of them, so it needs naming separately. It is NTLDR, which is as pre-operating-system as a screen gets, and it was keyboard only on every machine that ever showed it. Its rows were click to select and click again to boot, which also goes inert. Same one line restores it. */ .boot, .boot__post, .osmenu { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .boot { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; display: none; background: #000000; } .boot.is-active { display: block; } /* ---------- 1. POST ------------------------------------------ The BIOS screen. Plain monospace on black, lines appearing one at a time. Deliberately unstyled beyond that, because it was never styled at all. ----------------------------------------------------------- */ /* A CONSOLE SCROLLS. It does not run off the bottom of the tube. The sequence prints more lines than fit, and without this the later ones were drawn past the edge of the screen where nobody could read them: the PXE block would start, and by the time it reached the interesting part you were looking at a still frame of the first half. overflow: hidden rather than auto, deliberately. A scrollbar on a POST screen is the single most anachronistic thing that could possibly appear on it. Hidden still allows scrollTop to be set from script, which js/boot.js and js/firmware.js both do after every redraw, so the newest line is always the one at the bottom, exactly like a real console scrolling up. */ .boot__post, .boot__post * { font-family: "VGA", "Lucida Console", Consolas, Monaco, monospace; } /* AN 80 COLUMN TEXT SCREEN, FILLING THE MONITOR. A POST screen is not a small block of text in the corner of a big display. It is the whole display, because the machine has no graphics mode yet and 80x25 is all there is. The VGA font advances 9 units for every 16 of height, so one character is 0.5625em wide. Eighty of them is 45em. At font-size 1.75vw that comes to 78.75vw, which fills the screen with a margin down each side, at any window width, without a single media query. line-height is 1 on purpose. VGA text rows touched: the 16 in 9x16 IS the line height, and anything looser stops looking like a character grid and starts looking like a document. */ .boot__post { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 1.8vh 2.4vw; /* SMALLER THAN THE GRID WOULD ALLOW, on purpose. A real POST wrote maybe fifty characters into an eighty column screen and left the rest black, so the text occupied the top left third of the monitor rather than being stretched to fill it. Sizing to fill 80 columns made every line look enormous and nothing like the photograph. This puts an eighty column line at about half the screen width, which is where the reference sits, and is sized so the WHOLE sequence fits without scrolling on a normal window, because the logo lives at the top of the flow and a screen that scrolls takes the badge away with it. It still scrolls if it has to; it just does not have to. vmin, NOT vw, AND THAT IS THE WHOLE TRICK. It was 1.05vw, which sizes the text off the WIDTH while the thing that actually runs out is the HEIGHT. That makes the number of rows that fit depend on the shape of the window: about fifty on a 16:10 laptop, forty five on a 16:9 monitor and closer to thirty four on an ultrawide, where the font is enormous relative to the available height. So a sequence tuned until it just fitted on the machine it was written on scrolled its own logo away on somebody else's, and there was no way to test that by looking. vmin takes the smaller of the two, which in any landscape window is the height. The row count is then CONSTANT at about fifty no matter the aspect ratio, which is exactly what a fixed 80x25 text screen should do. 1.68vmin is the same size as the old 1.05vw on a 16:10 screen, so nothing changed on the machine this was originally tuned against. Eighty columns still fit across, easily. At 0.5625em per character an eighty column line is 45em, and even on a 2560 by 1080 ultrawide that comes to about 820px of a 2560px screen. vmin cannot overflow the width in landscape, because the width is the dimension it is not using. Safari 7 has vmin. It landed in Safari 6.1, along with the rest of the viewport units this file already relies on. KEEP THIS AS ONE COMMENT. It was briefly two, and the first one closed early, which left four lines of prose sitting loose inside this declaration block. CSS error recovery throws away everything up to the next semicolon, so it ate the font-size below and the POST screen quietly rendered at the inherited 12px instead. Nothing errored and nothing looked obviously wrong, which is why it survived a while. */ font-size: 1.68vmin; line-height: 1.14; color: #c8c8c8; /* HTML COLLAPSES RUNS OF SPACES, AND THIS SCREEN IS MADE OF THEM. Every indented line in the boot sequence, the aligned columns in the DHCP block, the padded drive detection lines, the PCI device table and the whole drawn frame of the SETUP utility and the F12 boot menu are built from multiple spaces in a row. Without this they all collapse to one space and every one of those stops lining up. This used to cite "the whole drawn box of the system configuration table", which is not a thing that exists: the POST ends in two plain unboxed blocks. The boxes on this screen are drawn by drawSetup and drawMenu in js/firmware.js, so those are what the rule is actually holding together. */ /* pre-wrap rather than pre, so a line longer than the window still wraps instead of running off the edge. */ white-space: pre-wrap; word-wrap: break-word; } .boot__post .dim { color: #7a7a7a; } .boot__post .hl { color: #ffffff; } /* The selected row in the F12 boot device menu, drawn as inverse video. A real firmware menu had no colours to spend and no graphics mode to draw a highlight with, so it swapped the foreground and the background for one line, exactly like the NTLDR menu does a moment later. */ .boot__post .sel { background: #c8c8c8; color: #000000; } /* SETUP FILLS THE SCREEN. The panel is 78 characters wide and the blue behind it is the whole monitor, not a rectangle around the text. Setting the background on each row left a blue block the size of the words floating on black, which is the single thing that most gave away that this was a web page. The rows are centred as a block: they are all exactly the same width, so centring each one independently lands them in the same place. */ .boot__post.is-setup { background: #0000a8; text-align: center; padding-top: 5vh; } /* THE SETUP SCREEN FILLS THE MONITOR, and it did not. It was drawn at the POST's font size, which is deliberately small: a real POST wrote fifty characters into an eighty column screen and left the rest black, so that text sits in the top left third. Setup is the opposite. It was a full screen application that used all 80x25, and drawn small it read as a little blue postcard floating on a big blue field. So Setup gets its own size. 2.8vmin puts 80 columns across most of the width and 25 rows down most of the height, on any landscape shape, for the same reason the POST uses vmin: the thing that runs out is the HEIGHT, and sizing off the width makes the row count depend on the shape of the window. Checked at 1280x800, 1440x900, 1920x1080 and 2560x1080. */ .boot__post.is-setup { font-size: 2.8vmin; line-height: 1.14; padding: 0; /* Centre the panel both ways. The wrapper below is one inline-block, so text-align centres it horizontally, and the padding-top is a proportion rather than a fixed number so it stays centred as the font scales. */ text-align: center; padding-top: 4vh; } /* ONE WRAPPER, WHICH IS THE WHOLE LAYOUT FIX. .ami rows are display:block so that each is its own line, and drawSetup joins them with nothing at all, relying on exactly that. This rule used to override them to inline-block, to get the panel centred, and the two purposes fought: every row flowed inline, wrapped wherever it fit, and the panel came out as interleaved rubble with the tab bar somewhere in the middle. Two elements now do the two jobs. The wrapper is the inline-block that centres; the rows inside it stay blocks. */ .boot__post.is-setup .amiwrap { display: inline-block; text-align: left; background: transparent; } /* An unselected tab sits on the blue with ordinary ink. The selected one is .amisel, inverse, which is what the real one did and is the only way to tell them apart in sixteen colours. */ .boot__post .amitab { color: #c8c8c8; } /* The help column and the legend, in the dimmer grey the real panel used for anything that was not a value you could set. */ .boot__post .amihelp { color: #a8a8a8; } /* A setting whose backing script is not loaded on this page. It reads N/A and cannot be changed, so it is drawn as unavailable rather than as an ordinary value that ignores you. */ .boot__post .amidim { color: #6a6ac0; } /* AMIBIOS SETUP UTILITY, which DEL opens. The one screen in the whole boot chain with colour in it, and the colours are not a choice: Setup ran in VGA text mode and used the sixteen colours it had. #0000a8 background, VGA blue #c8c8c8 ordinary text, VGA light grey #f0f000 headings, VGA yellow inverse the current tab, grey ground and blue text The block sits inside the ordinary POST element rather than being its own layer, because that is what the real one did: it painted straight over the text already on the screen. white-space: pre on every row, because the whole layout is built from runs of spaces and HTML would otherwise collapse them and the right hand edge of the panel would come apart. */ .boot__post .ami { display: block; color: #c8c8c8; white-space: pre; } .boot__post .amihi { color: #f0f000; } /* THE MANUFACTURER'S LOGO. A real AMI POST blitted a bitmap into the corner while the rest of the screen stayed text, because the firmware could draw an image even in text mode. This is that, as an SVG. Absolutely positioned so it sits OVER the character grid rather than taking rows out of it, which is what the original did. It never takes a click, because on this screen a click means continue and the logo is not a button. */ .boot__ami { /* ABOVE the text, top left, IN THE FLOW. The reference photograph has the American Megatrends badge in the top left corner with the version block starting on the line below it. So it is a block element in the normal flow and it scrolls with the text, exactly like the original did: when the POST scrolled, the logo went up with it. An earlier version pinned it top right and fixed to the viewport, which kept it on screen but put it in the wrong corner and left it hanging there while text ran underneath. */ display: block; width: 19em; max-width: 55%; height: auto; margin: 0 0 .9em; pointer-events: none; } /* Setup paints over the whole screen, so the POST badge goes with it. Leaving it there would put an American Megatrends wordmark on top of the American Megatrends setup utility. */ .boot__post.is-setup .boot__ami { display: none; } .boot__post .amisel { background: #c8c8c8; color: #0000a8; } /* ---------- 2. THE VISTA BOOT SCREEN ------------------------- */ .boot__load { position: absolute; top: 50%; left: 0; right: 0; margin-top: -110px; text-align: center; } /* the logo, sitting above the bar where Vista put its flag */ .boot__brand { width: 96px; height: 96px; margin: 0 auto 20px; display: block; } .boot__logo { margin-bottom: 30px; font: normal 26px/1.2 "Selawik Light", "Selawik", "Segoe UI", sans-serif; color: #e8f4ff; letter-spacing: .02em; text-shadow: 0 0 18px rgba(120,200,255,.45); } .boot__logo b { font-weight: bold; } /* the trough: narrow, dark, rounded ends */ .boot__bar { position: relative; width: 220px; height: 10px; margin: 0 auto 20px; overflow: hidden; background: #0a0a0a; border: 1px solid #262626; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,1); box-shadow: inset 0 1px 2px rgba(0,0,0,1); } /* The sweeping block. It starts fully off the left edge and travels far enough to leave the right edge completely, so there is a beat with an empty trough before it comes round again. That gap is part of the rhythm of the real one. */ .boot__blip { position: absolute; top: 1px; left: 0; width: 62px; height: 6px; margin-left: -62px; -webkit-border-radius: 4px; border-radius: 4px; background-image: -webkit-linear-gradient(left, rgba(140,255,160,0) 0%, rgba(150,255,175,.55) 35%, rgba(190,255,205,1) 62%, rgba(120,240,150,.85) 78%, rgba(140,255,160,0) 100%); background-image: linear-gradient(to right, rgba(140,255,160,0) 0%, rgba(150,255,175,.55) 35%, rgba(190,255,205,1) 62%, rgba(120,240,150,.85) 78%, rgba(140,255,160,0) 100%); -webkit-box-shadow: 0 0 12px rgba(130,255,160,.9); box-shadow: 0 0 12px rgba(130,255,160,.9); -webkit-animation: blip 2.1s linear infinite; animation: blip 2.1s linear infinite; } /* 62 off the left + 220 trough + 62 clear of the right = 344 */ @-webkit-keyframes blip { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(344px); } } @keyframes blip { from { transform: translateX(0); } to { transform: translateX(344px); } } .boot__msg { font-size: 12px; color: #9fb4c4; } .boot__corp { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: 11px; color: #6f8494; } /* ---------- 3. WELCOME --------------------------------------- Vista's welcome screen: a deep blue aurora, brighter through the middle, with a spinning ring. ----------------------------------------------------------- */ .boot__welcome { background-color: #06283f; background-image: -webkit-radial-gradient(50% 42%, ellipse, rgba(126,204,242,.42) 0%, rgba(126,204,242,0) 62%), -webkit-linear-gradient(top, #04182a 0%, #0a4570 42%, #1272a8 68%, #052a44 100%); background-image: radial-gradient(ellipse at 50% 42%, rgba(126,204,242,.42) 0%, rgba(126,204,242,0) 62%), linear-gradient(to bottom, #04182a 0%, #0a4570 42%, #1272a8 68%, #052a44 100%); } .boot__centre { position: absolute; top: 50%; left: 0; right: 0; margin-top: -60px; text-align: center; } /* a ring with one lit quarter, rotating. border-radius plus a transparent border on three sides, which needs no image. */ .boot__ring { width: 46px; height: 46px; margin: 0 auto 22px; -webkit-border-radius: 50%; border-radius: 50%; border: 4px solid rgba(255,255,255,.20); border-top-color: rgba(235,250,255,.95); -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .boot__word { font: normal 34px/1.2 "Selawik Light", "Selawik", "Segoe UI", sans-serif; color: #ffffff; text-shadow: 0 2px 10px rgba(0,20,40,.85); } /* ---------- the footer on the badge --------------------------- THE SAME OFFER THE POST MAKES, on the screen that replaced it. Sits where the POST's own footer sits, at the bottom of the screen rather than tucked in a corner, because it is not an aside: on every visit after the first this line is the ONLY way into the firmware, and a visitor who never notices it never finds Setup, the boot device menu or MS-DOS. Monospaced and green-white against the blue, so it reads as the firmware talking rather than as part of the badge. The .fw-key spans inside it are styled by the .boot__post rules further down, which is deliberate: they are the same keys doing the same job and they should not look like two different things. ----------------------------------------------------------- */ .boot__foot { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: "VGA", "Lucida Console", Consolas, Monaco, monospace; font-size: 12px; color: #c8d8e4; } .boot__foot .hl { color: #ffffff; } /* NOT DRESSED AS CLICKABLE, and that is deliberate. The identical spans on the POST footer carry cursor:pointer and an underline, from the days before the whole boot chain went keyboard only. They are inert now: .boot * sets pointer-events:none about four hundred lines up, at the owner's request, because a BIOS has no mouse driver. The styling stayed behind and now advertises a click that cannot land. So these are lit like keys rather than dressed like links. Brighter than the sentence around them, because they are the part you have to act on, and no hover state, because there is nothing there to hover. */ .boot__foot .fw-key { color: #7ee0ff; font-weight: bold; } /* ---------- skip --------------------------------------------- */ .boot__skip { position: absolute; right: 20px; bottom: 18px; font-size: 11px; color: rgba(255,255,255,.55); } /* ---------- reduced motion ----------------------------------- THE SEQUENCE STILL PLAYS, and still types. js/boot.js used to skip it entirely for this setting, which meant the person who set the preference got no network boot at all, on a page whose whole point is the network boot. prefers-reduced-motion is about movement: sliding, sweeping, spinning, parallax, zoom. Text appearing in order is content arriving, not the screen moving. So the text keeps typing, and what stops is what actually moves. Here that is the sweeping block. It becomes a calm full width fill rather than a block parked in the middle of the trough, which is what an earlier version did and which read as a loading bar that had crashed. Freezing a progress indicator half way is the worst possible reduced state. */ html.motion-off .boot__blip { -webkit-animation: none !important; animation: none !important; position: static; width: 100%; height: 6px; margin: 2px 0 0 0; -webkit-box-shadow: none; box-shadow: none; background-image: -webkit-linear-gradient(top, #b6ffc8, #57d97e); background-image: linear-gradient(to bottom, #b6ffc8, #57d97e); } html.motion-off .boot__ring { -webkit-animation: none !important; animation: none !important; border-color: rgba(235,250,255,.85); } /* ---------- the DOS partition ---------------------------------- js/dos.js writes into .boot__post, the same 80 column VGA field the BIOS uses, so it needs almost nothing of its own. The block cursor is the exception: DOS drew a solid underscore that blinks about twice a second, and the blink is done in JavaScript rather than with a CSS animation because the same timer also has to redraw the line the cursor sits on. No reduced motion rule here. js/dos.js reads motionOn itself and simply does not start the blink interval, which is better than animating something and then hiding it. */ .boot__post .dos__cur { background: #c8c8c8; color: #000000; } /* ---------- the MS-DOS Editor ----------------------------------- EDIT.COM was the first thing on a DOS machine that looked like an application, and the reason is entirely colour: everything else on that screen was grey text on black, and this was a blue field with a grey bar across the top of it. THE THREE COLOURS ARE THE REAL ONES, out of the sixteen the VGA text mode had, because there were only sixteen and these are three of them: #0000a8 blue, colour 1, the field #a8a8a8 light grey, colour 7, the menu and status bars #a8a8a8 on black for the inverted cursor Not a gradient and not a modern blue. The whole effect is that it is FLAT, in a way no interface has been since. Scoped under .boot__post because the editor borrows the boot screen's element, its font and its character grid. It is drawn with box characters into the same 80 column field. */ /* INLINE-BLOCK, NOT BLOCK, and both halves of that matter. These were display:block, which was wrong twice over. THE ROWS CAME OUT DOUBLE SPACED. js/dos.js joins the editor's rows with
, the way every other screen in that file does. A block element already breaks the line, so each row broke twice and there was a black gap between every blue row. Measured: 658 pixels of screen where 22 single rows should be 337. AND THE BLUE RAN TWICE AS WIDE AS THE FRAME. A block fills its container, so the field stretched the whole width of the boot screen while the box drawn inside it stopped at 78 characters, leaving the frame floating in a much wider blue field. inline-block fixes both at once: the
supplies the single break, and the element is exactly as wide as the 78 characters in it. The result is an 80 column screen sitting in the top left of the monitor, which is where every other DOS and POST screen on this site sits, for the reason set out beside the font-size further up this file. */ .boot__post .ed__bar { display: inline-block; background: #a8a8a8; color: #000000; } .boot__post .ed__f { display: inline-block; background: #0000a8; color: #c8c8c8; } /* The block cursor, which is the character underneath it drawn in inverse rather than a shape sitting next to it. That is what a text mode cursor was: the same cell, with the attribute byte flipped. */ .boot__post .ed__cur { background: #c8c8c8; color: #0000a8; } /* ---------- the clickable words in the POST footer -------------- DEL and F12 are the only doors to Setup and the boot device menu, and behind that menu is the whole MS-DOS partition. On a MacBook the key marked `delete` is Backspace and F12 is a volume key, and on Windows F12 belongs to DevTools, so on the machines this site was built for those doors did not open. The words are unchanged, because that is what the real screen printed. They are just also targets now. Underlined on hover only: a BIOS screen with permanently underlined words in it would be the giveaway, and a pointer appearing where you can click is the smallest possible hint. */ /* KEPT, AND CURRENTLY INERT. The boot chain is keyboard only now, so .boot * carries pointer-events: none and nothing below here can be clicked. These rules are left in place because removing that one line above brings the clickable footer keys and boot menu rows straight back, and they were added for a real reason: F12 on a Mac laptop usually needs Fn held down. */ .boot__post .fw-key { cursor: url("../img/cursors/link.png") 5 0, pointer; } .boot__post .fw-key:hover { background: #c8c8c8; color: #000000; } /* THE BOOT DEVICE ROWS, same idea one screen further in. The footer above is clickable so that DEL and F12 do not depend on a function key. That gets a mouse as far as opening the boot device menu, and the menu then wanted arrow keys and ENTER, so the door led into a corridor with no handle. It matters most here of anywhere on the site: the MS-DOS partition is reachable through that menu and nowhere else. The row is a whole line of a text mode box, so the highlight runs the full width of the frame rather than hugging a word, which is exactly what a highlighted row in a real BIOS menu did. NOT applied to the already selected row: it carries .sel, which is the inverse video the menu draws itself, and a hover state on top of that would flicker between two nearly identical looks while telling you nothing. */ .boot__post .fw-dev { cursor: url("../img/cursors/link.png") 5 0, pointer; } .boot__post .fw-dev:hover .hl { background: #3a3a3a; } /* A picture on a text screen, which is what a DOS image viewer was. Held to the width of the 80 column field so a 1600px wallpaper does not blow the screen open, and pixelated on purpose: this is a VGA text mode with a picture in it. */ .dos__pic { display: block; max-width: 100%; max-height: 22em; margin: 0 auto; image-rendering: -webkit-optimize-contrast; }