/* interjet.css -- the stylesheet for www.alaska.net/~royce/interjet/. * * It reproduces the page's original HTML 3.2-era look with valid CSS: the * browser's default fonts, tables drawn the way draws * them, and the orange tab cells, on plain white. Each rule names the old * attribute it replaces. The tabs need no JavaScript; see TABS. * * Author: Royce Williams * SPDX-License-Identifier: MIT * * Copyright (c) 2026 Royce Williams * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ body { background: #fff; /* the old tiled whistle image is dropped */ } /* ---- banner and small text ------------------------------------------ */ header { /* logo and title side by side, */ display: flex; /* the title centred on the logo */ align-items: center; /* (); on a phone */ gap: 0.5em; /* it wraps in its own column */ } header h1 { margin: 0; } /* the header's height is the logo's */ header img { border: 0; } /* */ h1 { font-size: 1.5em; } /* the same size as the h2s */ .small { font-size: small; } /* */ .select { text-align: center; } /*
*/ .strike { text-decoration: line-through; } /* text kept but struck out */ /* ---- the projects block ---------------------------------------------- */ /* Was
: a left float, shrink-wrapped, with the table's 2px spacing plus 1px cell padding around its content. */ .projects { float: left; padding: 3px; position: relative; /* the box the .t anchors pin to */ } .clear { clear: both; } /*
*/ /* Appliance projects was the layout table's second row: 2px of spacing and 1px of cell padding either side added 4px above it. */ .projects h2 { margin-top: calc(0.83em + 4px); } /* What draws: a raised frame, sunken cells, 2px between cells and 1px inside them. The two greys are the ones Firefox renders for that markup, measured, so every browser draws the same thing. */ table.board { border: 1px solid; border-color: #b2b2b2 #4c4c4c #4c4c4c #b2b2b2; /* top right bottom left */ border-spacing: 2px; } table.board th, table.board td { border: 1px solid; border-color: #4c4c4c #b2b2b2 #b2b2b2 #4c4c4c; padding: 1px; } /* ---- TABS: two rows per panel, the current cell bold and unlinked ---- */ .tabs { display: flex; flex-wrap: wrap; gap: 2px; /* cellspacing="2" */ padding: 2px; } .tabs > * { padding: 4px; /* cellpadding="4" */ white-space: nowrap; /* nowrap */ } /* Each old cell was  label : the spaces were in the cell's own medium font, outside the link, and set the cell's height. */ .tabs > *::before, .tabs > *::after { content: "\a0"; font-size: medium; display: inline-block; /* keeps the link underline off */ } .machine > * { font-size: large; } /* */ .machine > b { background: #ffb521; } /* the logo's orange */ .machine > a { background: #ffe3a8; } .topic > * { font-size: small; } /* */ .topic > b { background: #ffd88a; } .topic > a { background: #fff0cf; } hr.tabrule { /*
*/ border: 0; height: 1px; background: #9c6b18; } /* Showing one panel. A tab links to an empty anchor (.t) pinned to the top of .projects, so every click lands at the same place, the section heading at the window's top, whatever the panel's length; the panel after the anchor that is the :target is shown. With no fragment, InterJet I Hardware shows. A browser without :root shows every panel, in order. */ .t { position: absolute; top: 0; } :root .panel { display: none; } :root .p-interjet1-hardware { display: block; } .t:target ~ .panels .p-interjet1-hardware { display: none; } #interjet1-hardware:target ~ .panels .p-interjet1-hardware, #interjet1-netbsd:target ~ .panels .p-interjet1-netbsd, #interjet1-other-os:target ~ .panels .p-interjet1-other-os, #interjet2-hardware:target ~ .panels .p-interjet2-hardware, #interjet2-netbsd:target ~ .panels .p-interjet2-netbsd, #interjet2-other-os:target ~ .panels .p-interjet2-other-os { display: block; } /* ---- footer: was a three-cell table, left and right used ------------- */ footer { padding: 3px; /* the table's spacing + padding */ display: flex; justify-content: space-between; align-items: center; } /* ---- DARK MODE: the same page re-drawn for a dark screen, not inverted. It follows the reader's system setting. Warm near-black rather than pure black, the table's raised look re-shaded, the orange tabs kept, and the logo as it is: on dark only its outer outline is lost, and the orange body still carries the shape. */ :root { color-scheme: light dark; } @media (prefers-color-scheme: dark) { body { background: #1c1b19; color: #e4e1d8; } a:link { color: #8cb4ff; } a:visited { color: #c9a2ff; } a:active { color: #ffb521; } hr { border-color: #4a4740; } hr.tabrule { background: #c48a22; } kbd { color: #f2d48f; } table.board { border-color: #6a665c #2a2925 #2a2925 #6a665c; } table.board th, table.board td { border-color: #2a2925 #6a665c #6a665c #2a2925; } .machine > b { background: #ffb521; color: #1c1b19; } .machine > a { background: #4d3b17; color: #ffd37a; } .topic > b { background: #e0a43a; color: #1c1b19; } .topic > a { background: #3a2f1a; color: #ffd37a; } }