/* adamdent.uk: desktop shell on top of vendored 98.css. No-JS baseline: windows are plain stacked sections, icons hidden. With .js on : the page becomes a desktop. */ html, body { margin: 0; height: 100%; } body { display: flex; flex-direction: column; background: #008080; /* classic teal */ } .desktop { flex: 1; position: relative; overflow: hidden; padding: 16px; } /* ---------- No-JS baseline ---------- */ html:not(.js) .icons { display: none; } html:not(.js) .window { max-width: 32rem; margin: 0 auto 16px; } html:not(.js) .title-bar-controls { display: none; /* buttons that can't do anything shouldn't render */ } /* ---------- Desktop icons ---------- */ .icons { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 8px; align-items: flex-start; position: relative; z-index: 0; } .icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 6px 2px; background: none; border: 1px dotted transparent; box-shadow: none; color: #fff; font-family: "Pixelated MS Sans Serif", Arial, sans-serif; font-size: 11px; cursor: pointer; text-shadow: 1px 1px 0 #000; } .icon svg { width: 32px; height: 32px; image-rendering: pixelated; shape-rendering: crispEdges; } .icon.shortcut { text-decoration: none; color: #fff; } .icon-glyph { position: relative; display: inline-block; width: 32px; height: 32px; } .icon .shortcut-badge { position: absolute; left: -3px; bottom: -3px; width: 11px; height: 11px; image-rendering: pixelated; shape-rendering: crispEdges; } .icon:hover span, .icon:focus-visible span { background: #000080; } .icon:focus-visible { outline: none; border-color: #fff; } /* ---------- Windows on the desktop ---------- */ html.js .window { position: absolute; width: min(26rem, calc(100vw - 32px)); display: none; } html.js .window.open { display: block; } html.js .window.minimised { display: none; } html.js .window.screenshot-window { width: min(18rem, calc(100vw - 32px)); } html.js .title-bar { cursor: default; touch-action: none; /* windows are dragged with the pointer */ } .window:focus { outline: none; } .window-body h1, .window-body h2 { font-size: 14px; margin: 0 0 8px; } .status-tag { font-size: 11px; font-weight: normal; background: #c0c0c0; border: 1px solid #808080; padding: 0 4px; vertical-align: middle; } .screenshot-slot { border: 2px inset #fff; background: #808080; color: #fff; text-align: center; padding: 32px 8px; } .screenshot { display: block; max-width: 100%; max-height: 60vh; max-height: 60dvh; width: auto; height: auto; margin: 0 auto; border: 2px inset #fff; } .screenshot + .screenshot { margin-top: 8px; } .screenshot-caption { margin: 4px 0 8px; font-size: 11px; text-align: center; } /* ---------- Taskbar ---------- */ .taskbar { display: flex; align-items: center; gap: 6px; padding: 3px 4px; background: #c0c0c0; box-shadow: inset 0 1px 0 #fff; border-top: 1px solid #dfdfdf; font-family: "Pixelated MS Sans Serif", Arial, sans-serif; font-size: 11px; } .taskbar-brand { font-weight: bold; padding: 2px 8px; border: 2px outset #fff; background: #c0c0c0; } .taskbar-buttons { display: flex; gap: 4px; flex: 1; min-width: 0; overflow: hidden; } .taskbar-buttons button { max-width: 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .taskbar-buttons button[aria-pressed="true"] { font-weight: bold; box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; background: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0/4px 4px; } .taskbar-clock { margin: 0; } html:not(.js) .taskbar-buttons, html:not(.js) .taskbar-clock { display: none; } /* ---------- Small screens ---------- Same draggable/overlapping desktop as larger screens, just at phone size: narrower windows, and the icon column capped to the viewport height so it wraps into a second column instead of running off the bottom. Nothing scrolls; JS clamps every window's position to fit inside the current viewport (see placeAt in desktop.js). */ @media (max-width: 700px) { html.js .window { width: min(85vw, 22rem); } html.js .window.screenshot-window { width: min(70vw, 16rem); } .icons { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); } }