Ryan Malloy
674ad25662
The landing page's headline results table was rendering as a paragraph of raw
pipe characters. Astro applies remark-gfm to .md but it wasn't reaching the MDX
pipeline, so every .md page rendered tables fine and only index.mdx was broken —
which is exactly why it went unnoticed. mdx({remarkPlugins:[remarkGfm]}) fixes it.
cuckoo.warehack.ing stays as a permanent redirect; it was live briefly.
265 lines
14 KiB
CSS
265 lines
14 KiB
CSS
@import url("/static/fonts/fonts.css");
|
|
|
|
/* Supported Systems house style, applied as WARM SHELL / COOL DATA.
|
|
*
|
|
* The chrome — background, panels, type, brand accent — comes from
|
|
* supported.systems: warm near-black, cream text, Libre Baskerville display,
|
|
* Atkinson Hyperlegible body, brass accent.
|
|
*
|
|
* The INSTRUMENTS do not. Cyan, green, amber and red stay exactly as they were,
|
|
* because on this page those colors carry information: which constellation a
|
|
* satellite belongs to, whether a source is selected, whether the clock is
|
|
* healthy. Recoloring them to brass would trade meaning for brand, which on a
|
|
* status page is a bad trade at any exchange rate.
|
|
*
|
|
* So: --brand is for chrome, --accent is for live data. They are different
|
|
* variables on purpose. Don't merge them.
|
|
*/
|
|
:root {
|
|
/* shell — warm (supported.systems) */
|
|
--bg: #171717;
|
|
--bg-2: #1b1a18;
|
|
--panel: #232120;
|
|
--panel-2: #2b2825;
|
|
--border: #3d382f;
|
|
--border-soft: #322e28;
|
|
--text: #eeece8;
|
|
--muted: #a8a196;
|
|
--faint: #6f6a61;
|
|
--brand: #d9a441; /* brass. chrome, links, brand marks. NOT data. */
|
|
|
|
/* instruments — cool (semantic; do not rebrand) */
|
|
--accent: #22d3ee;
|
|
--good: #34d399;
|
|
--warn: #f5a524;
|
|
--bad: #f4436b;
|
|
/* constellations (no purple) */
|
|
--c-gps: #34d399;
|
|
--c-glonass: #38bdf8;
|
|
--c-galileo: #f5a524;
|
|
--c-beidou: #fb7185;
|
|
--c-sbas: #a3e635;
|
|
--c-qzss: #2dd4bf;
|
|
--c-other: #94a3b8;
|
|
|
|
--shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 30px -18px rgba(0, 0, 0, 0.9);
|
|
|
|
/* Atkinson Hyperlegible: the Braille Institute's legibility face. Chosen for
|
|
* function before brand — it disambiguates 0/O, 1/l/I, rn/m, which is exactly
|
|
* what a glanceable status page needs. */
|
|
--sans: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
|
|
--serif: "Libre Baskerville", Georgia, serif;
|
|
--mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
/* the warm bench light from supported.systems */
|
|
radial-gradient(1100px 620px at 50% -8%, rgba(217, 164, 65, 0.07), transparent 62%),
|
|
/* one cool wash, bottom-left, so the instruments feel like instruments */
|
|
radial-gradient(900px 500px at 0% 100%, rgba(34, 211, 238, 0.04), transparent 58%),
|
|
var(--bg);
|
|
color: var(--text);
|
|
font: 15px/1.5 var(--sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2;
|
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
/* ---------- top bar ---------- */
|
|
.topbar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
gap: 16px; padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border-soft);
|
|
position: sticky; top: 0; z-index: 5;
|
|
background: linear-gradient(var(--bg), rgba(23, 23, 23, 0.86));
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.brand { display: flex; align-items: center; gap: 13px; }
|
|
/* The dish is brand chrome, not a reading — brass, not cyan. */
|
|
.brand-icon { width: 30px; height: 30px; color: var(--brand); }
|
|
/* Libre Baskerville, as on supported.systems. The wordmark is the one place a
|
|
serif belongs on this page; everything that reports a NUMBER stays mono. */
|
|
.brand h1 { font-size: 20px; margin: 0; letter-spacing: 0.2px; font-family: var(--serif);
|
|
font-weight: 700; }
|
|
.brand-sub { margin: 0; color: var(--muted); font-size: 12.5px; }
|
|
|
|
.conn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
|
|
padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); }
|
|
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
|
|
.conn[data-state="live"] .conn-dot { background: var(--good); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
|
|
animation: pulse 2s infinite; }
|
|
.conn[data-state="live"] { color: var(--good); }
|
|
.conn[data-state="down"] .conn-dot { background: var(--bad); }
|
|
.conn[data-state="down"] { color: var(--bad); }
|
|
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
|
|
|
|
/* ---------- layout ---------- */
|
|
main { max-width: 1180px; margin: 0 auto; padding: 20px; display: grid; gap: 18px; }
|
|
.panel {
|
|
background: linear-gradient(var(--panel), var(--bg-2));
|
|
border: 1px solid var(--border-soft); border-radius: 16px; padding: 18px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
|
|
.panel-head h2 { font-size: 14px; margin: 0; color: var(--muted); font-weight: 600;
|
|
display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.6px; }
|
|
.panel-head h2 svg { color: var(--brand); }
|
|
|
|
/* ---------- hero ---------- */
|
|
.hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
|
|
.clock { font-family: var(--mono); font-size: clamp(40px, 11vw, 76px); font-weight: 650;
|
|
letter-spacing: 1px; line-height: 1; font-variant-numeric: tabular-nums;
|
|
text-shadow: 0 0 34px rgba(34, 211, 238, 0.18); }
|
|
.clock-frac { color: var(--accent); font-size: 0.42em; }
|
|
.clock-meta { color: var(--muted); margin-top: 8px; font-size: 13.5px; }
|
|
.mono { font-family: var(--mono); }
|
|
|
|
.verdict { text-align: right; }
|
|
.stratum-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px;
|
|
border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); }
|
|
.stratum-badge svg { width: 26px; height: 26px; color: var(--faint); }
|
|
.stratum-badge[data-ok="true"] { border-color: rgba(52, 211, 153, 0.5);
|
|
background: linear-gradient(rgba(52, 211, 153, 0.14), rgba(52, 211, 153, 0.04)); }
|
|
.stratum-badge[data-ok="true"] svg { color: var(--good); }
|
|
.stratum-num { font-size: 30px; font-weight: 750; font-family: var(--mono); display: block; line-height: 1; }
|
|
.stratum-badge[data-ok="true"] .stratum-num { color: var(--good); }
|
|
.stratum-word { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); }
|
|
.ref-line { color: var(--muted); font-size: 13px; margin-top: 8px; }
|
|
.ref-line strong { color: var(--text); font-family: var(--mono); }
|
|
|
|
/* ---------- cards ---------- */
|
|
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
|
|
.card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px 15px; }
|
|
.card-head { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px;
|
|
text-transform: uppercase; letter-spacing: 0.4px; }
|
|
.card-head svg { width: 15px; height: 15px; color: var(--brand); }
|
|
.card-value { font-family: var(--mono); font-size: 25px; font-weight: 650; margin: 7px 0 3px; letter-spacing: 0.3px; }
|
|
.card-value.good { color: var(--good); }
|
|
.card-value.warn { color: var(--warn); }
|
|
.card-value.bad { color: var(--bad); }
|
|
.card-sub { color: var(--faint); font-size: 12px; }
|
|
.card-sub .ic-inline { width: 12px; height: 12px; vertical-align: -2px; }
|
|
|
|
/* ---------- sparkline ---------- */
|
|
.spark-meta { font: 12px var(--mono); color: var(--muted); }
|
|
.spark-big { width: 100%; height: 120px; display: block; }
|
|
.spark-zero { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
|
|
.spark-area { fill: url(#spark-grad); opacity: 0.9; }
|
|
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
|
|
|
|
/* ---------- grid-2 ---------- */
|
|
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
|
|
@media (min-width: 820px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
|
|
|
|
/* ---------- sky ---------- */
|
|
.sky-hold { position: relative; }
|
|
#sky { width: 100%; height: auto; display: block; }
|
|
.sky-ring { fill: none; stroke: var(--border); stroke-width: 1; }
|
|
.sky-ring.faint { stroke: var(--border-soft); }
|
|
.sky-cross { stroke: var(--border-soft); stroke-width: 1; }
|
|
.sky-card-label { fill: var(--faint); font: 600 11px var(--mono); }
|
|
.sky-ring-label { fill: var(--faint); font: 10px var(--mono); }
|
|
.sat { cursor: pointer; transition: r 0.4s ease; }
|
|
.sat-halo { opacity: 0.18; }
|
|
.sat-label { fill: #05080c; font: 700 8px var(--mono); pointer-events: none; }
|
|
.legend { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
|
|
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
|
|
.sky-tip { position: absolute; pointer-events: none; background: #05090e; border: 1px solid var(--border);
|
|
border-radius: 8px; padding: 6px 9px; font: 12px/1.35 var(--mono); color: var(--text);
|
|
transform: translate(-50%, -120%); white-space: nowrap; z-index: 3; box-shadow: var(--shadow); }
|
|
|
|
/* ---------- snr bars ---------- */
|
|
.snr-panel { display: flex; flex-direction: column; }
|
|
.snr { display: flex; align-items: flex-end; gap: 5px; flex: 1; min-height: 190px; overflow-x: auto; padding-top: 6px; }
|
|
.snr-bar { flex: 0 0 auto; width: 18px; display: flex; flex-direction: column; align-items: center;
|
|
justify-content: flex-end; height: 100%; gap: 4px; }
|
|
.snr-fill { width: 100%; border-radius: 4px 4px 2px 2px; min-height: 3px; transition: height 0.5s ease; opacity: 0.55; }
|
|
.snr-bar.used .snr-fill { opacity: 1; }
|
|
.snr-prn { font: 9px var(--mono); color: var(--faint); }
|
|
.snr-empty { color: var(--faint); align-self: center; margin: auto; font-size: 13px; }
|
|
|
|
/* ---------- table ---------- */
|
|
.table-hold { overflow-x: auto; }
|
|
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
|
|
.tbl th { text-align: left; color: var(--faint); font-weight: 600; font-size: 11px;
|
|
text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
|
|
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); font-family: var(--mono); }
|
|
.tbl .num { text-align: right; }
|
|
.tbl tr.sel td { background: rgba(52, 211, 153, 0.06); }
|
|
.tbl tr.refclk td:first-child { color: var(--accent); }
|
|
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
|
|
border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); }
|
|
.pill.selected { color: var(--good); border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.08); }
|
|
.pill.combined { color: var(--accent); border-color: rgba(34, 211, 238, 0.35); }
|
|
/* A noselect refclock (our GPS: labels the second, never chosen) is healthy,
|
|
not broken. Render it as quiet information so that red keeps meaning red. */
|
|
.pill.reference_only { color: var(--faint); border-color: var(--border-soft); }
|
|
.pill.unreachable, .pill.falseticker { color: var(--bad); border-color: rgba(244, 67, 107, 0.35); }
|
|
|
|
/* ---------- clients ---------- */
|
|
.clients { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.client { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border: 1px solid var(--border-soft);
|
|
border-radius: 11px; background: var(--panel); min-width: 150px; }
|
|
.client .addr { font-family: var(--mono); font-size: 13px; }
|
|
.client .meta { color: var(--faint); font-size: 11.5px; }
|
|
.empty-note { color: var(--faint); font-size: 13px; }
|
|
|
|
/* ---------- footer ---------- */
|
|
.foot { max-width: 1180px; margin: 0 auto; padding: 14px 20px 30px; }
|
|
.foot-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px;
|
|
margin-top: 14px; color: var(--faint); font-size: 12px; font-family: var(--mono); }
|
|
.foot-docs { display: inline-flex; align-items: center; gap: 5px; color: var(--faint);
|
|
text-decoration: none; transition: color .2s; }
|
|
.foot-docs:hover { color: var(--brand); }
|
|
.foot-docs svg { width: 13px; height: 13px; stroke-width: 1.5; transition: transform .2s; }
|
|
.foot-docs:hover svg { transform: translateX(2px); }
|
|
|
|
/* ---------- the maker's plate ----------
|
|
* Clockmakers signed the backplate — the brass face only a repairer sees once
|
|
* the case is open. This footer is that plate: a double hairline for the plate
|
|
* edge, engraved small-caps for the name, and nothing that moves. A signature
|
|
* should be quiet. Same markup as the docs site at escapement.warehack.ing,
|
|
* recolored from brass to this dashboard's cyan.
|
|
*/
|
|
.ss-plate__link {
|
|
display: flex; gap: 16px; align-items: center;
|
|
padding: 18px 20px; text-decoration: none; color: var(--muted);
|
|
border: 1px solid var(--border); border-radius: 10px;
|
|
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--border-soft), var(--shadow);
|
|
background:
|
|
radial-gradient(120% 140% at 0% 0%, rgba(34, 211, 238, 0.07), transparent 60%),
|
|
var(--panel);
|
|
transition: color .2s, border-color .2s;
|
|
}
|
|
.ss-plate__link:hover { color: var(--text); border-color: var(--brand); }
|
|
|
|
.ss-plate__logo { flex: 0 0 auto; width: 46px; height: auto; opacity: .85;
|
|
transition: opacity .2s; }
|
|
.ss-plate__link:hover .ss-plate__logo { opacity: 1; }
|
|
|
|
.ss-plate__heading { display: block; margin-bottom: 5px; color: var(--text);
|
|
font-family: var(--mono); font-size: 12px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: .14em; }
|
|
.ss-plate__body { display: block; font-size: 13px; line-height: 1.55; max-width: 62ch; }
|
|
.ss-plate__name { color: var(--brand); }
|
|
.ss-plate__cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
|
|
font-size: 12px; color: var(--brand); }
|
|
.ss-plate__cta svg { width: 14px; height: 14px; transition: transform .2s; }
|
|
.ss-plate__link:hover .ss-plate__cta svg { transform: translateX(2px); }
|
|
|
|
@media (max-width: 560px) {
|
|
.ss-plate__link { flex-direction: column; align-items: flex-start; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
|
|
|
|
/* "approx" marker when GPSNTP_POSITION=coarse */
|
|
.pos-note { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
|