/* Table styling for pages that do not load pages.css. NOTE: as of today that is no such page - all 119 pages linking this file also link pages.css, and the one page that links neither (pages/quality.html) has a single table styled entirely by .pmi-table in proof.css. This file is kept as an exact mirror rather than deleted so that removing 119 tags can be its own reviewable change; until then the block below must stay identical to the one in CSS/pages.css, which tools/seo_audit.py checks. Edit pages.css and mirror, never the other way round. The file previously ended mid-@keyframes, one brace short, so its last rule was never closed. */ /* ===== table system : start ============================================= One look for every table on the site. This block is kept identical with the block of the same name in CSS/tables.css; tools/seo_audit.py fails if the two drift, because a page loading only one of them would then render a different table. The values are tokens and live once, in header.css. It replaces three systems that disagreed about everything: .grade-table (15px text, 12/15px cells), .spec-table (16px text, 15/20px cells, a 30% label column) and bare Bootstrap .table (8px cells, no navy) - so a grade hub stacked two tables of the same kind of data that shared no measurement. WHY EVERY RULE IS QUALIFIED WITH `body`. Bootstrap paints cells with `.table > :not(caption) > * > *`, specificity (0,1,1) - exactly the same as the `.table th` rule this replaces. A tie is broken by source order, so which of two tags came last decided whether a row header rendered navy-on-white or white-on-navy: 391 pages list pages.css first, 336 list bootstrap first, and 8,349 cells went one way or the other with nobody choosing either. On six of the bootstrap-first pages it also put a navy link on a navy cell, which is how the three grade links on the Monel family hub came to be invisible - the same bug the deleted `.table th a` rule was written to fix on the other half of the site. `body` outranks Bootstrap in both orders: same fix, and for the same reason, as `body .container` further down. WHY BOOTSTRAP'S CELL PAINTING IS CLEARED RATHER THAN OVERRIDDEN. That rule sets a background-color AND an inset box-shadow, and the shadow is the mechanism behind .table-striped. A background set here would be painted over by the shadow, so both are cleared and this block paints instead. .table-striped and .table-hover are inert as a result, which is deliberate - they were a fourth and fifth look, on 109 and 38 tables. WHY THE ZEBRA IS PAINTED ON THE ROW, NOT THE CELL. .grade-table striped `tbody td` only, so the first column of a key/value table - a - stayed unstriped while the rest of the row was tinted and the stripe ran at half width. Painting the and leaving cells transparent makes a stripe cross the whole row. WHY ROW HEADERS ARE NOT NAVY. A is a label, not a second header band. Painting it navy draws an L-shaped frame round the data on the 1,454 tables carrying both a and row headers, and stops the zebra at the label column. Weight and colour say "label" at neither cost. ======================================================================== */ body table.table, body table.grade-table, body table.spec-table { width: 100%; margin-bottom: 1.25rem; border-collapse: collapse; font-size: var(--table-font-size); background-color: var(--table-row-bg); vertical-align: top; } /* Bootstrap's cell painting, cleared. See the note above. */ body table.table > :not(caption) > * > * { background-color: transparent; box-shadow: none; } /* Browsers default thead/tbody to vertical-align: middle, which stops a cell inheriting the table's own alignment. Bootstrap corrects this for .table; the two site classes need it too. */ body table.table > tbody, body table.grade-table > tbody, body table.spec-table > tbody { vertical-align: inherit; } body table.table > * > tr > *, body table.grade-table > * > tr > *, body table.spec-table > * > tr > * { padding: var(--table-cell-pad-y) var(--table-cell-pad-x); text-align: left; border: 1px solid var(--table-border); background-color: transparent; box-shadow: none; /* Bootstrap routes cell colour through --bs-table-color-type, which .table-striped repoints at #000 for odd rows. Clearing the background above stops its stripe but not that, so 109 tables would still have set their odd rows in a different ink from every other table. */ color: inherit; } body table.table > thead > tr > *, body table.grade-table > thead > tr > *, body table.spec-table > thead > tr > * { background-color: var(--table-head-bg); color: var(--table-head-fg); font-weight: 600; border-color: var(--table-head-rule); } /* A row header keeps the row's own background so the zebra is unbroken, and states itself with weight and colour instead. */ body table.table > tbody > tr > th, body table.grade-table > tbody > tr > th, body table.spec-table > tbody > tr > th { color: var(--table-label-fg); font-weight: 600; } body table.table > tbody > tr:nth-of-type(even), body table.grade-table > tbody > tr:nth-of-type(even), body table.spec-table > tbody > tr:nth-of-type(even) { background-color: var(--table-row-alt-bg); } body table.table > tbody > tr:hover, body table.grade-table > tbody > tr:hover, body table.spec-table > tbody > tr:hover { background-color: var(--table-row-hover-bg); transition: background-color 0.2s ease; } /* Links: white inside the navy header band, ordinary navy in a label cell. Which of the two a row header got used to depend on the order. */ body table.table > thead > tr > * a, body table.grade-table > thead > tr > * a, body table.spec-table > thead > tr > * a, body table.table > thead > tr > * a:hover, body table.grade-table > thead > tr > * a:hover, body table.spec-table > thead > tr > * a:hover, body table.table > thead > tr > * a:focus, body table.grade-table > thead > tr > * a:focus, body table.spec-table > thead > tr > * a:focus, body table.table > thead > tr > * a:visited, body table.grade-table > thead > tr > * a:visited, body table.spec-table > thead > tr > * a:visited { color: var(--table-head-fg); text-decoration: underline; } body table.table > tbody > tr > th a, body table.grade-table > tbody > tr > th a, body table.spec-table > tbody > tr > th a, body table.table > tbody > tr > th a:hover, body table.grade-table > tbody > tr > th a:hover, body table.spec-table > tbody > tr > th a:hover, body table.table > tbody > tr > th a:focus, body table.grade-table > tbody > tr > th a:focus, body table.spec-table > tbody > tr > th a:focus, body table.table > tbody > tr > th a:visited, body table.grade-table > tbody > tr > th a:visited, body table.spec-table > tbody > tr > th a:visited { color: var(--primary-color); } /* Every table scrolls inside its own wrapper rather than widening the page. tools/seo_audit.py checks that one of these three is the tag immediately before each , so do not rename one without teaching that check. .grade-table-wrapper also carried a drop shadow, which left 16 of 2,466 tables looking raised and every other one flat. */ .table-responsive, .spec-table-wrapper, .grade-table-wrapper { overflow-x: auto; margin: 0 auto; } /* Horizontal padding is 0 so a table is the full reading measure wherever it landed. build-specs.mjs writes the same block bare into
on 50 pages, inside .spec-table-section on 86 and inside .grade-table-section on 1, and the 40px/20px this used to carry made the Specifications table 40px wider than the Equivalent Grades table directly above it. Nesting one of these sections inside another is free now, which is what that generator does. */ .spec-table-section, .grade-table-section { padding: 32px 0; } /* Left, like every other heading on the page. Centring this one was the rest of why the two generated tables did not read as a pair. */ .grade-table-section h2 { font-size: 1.8rem; color: var(--heading-color); margin-bottom: 20px; font-weight: 600; } /* ===== table system : end =============================================== */