Cyd
0e39075a20
With the models resolving properly there is nothing left to infer, so the inference goes. Out: the gate tracing, the route/field test, the collapse of each wall bar to a centreline, the dropping of "isolated" placements. Every one of those existed to make sense of a track that appeared to be one model repeated, and it is not. What is left is what the map screen does. Every placement, its model's GaugeImage looked up by name, laid down rotated and positioned, at the LOD the engine would pick for that scale, in the palette the display is configured with, on the display's own black. So the walls are grey because index 51 is grey and the score zones are amber because sc50 and sc500a are drawn in 56 - nothing on the page is a styling choice. Also right way round now: +X runs right and +Z up, matching the engine and the map viewer. The nine console pictures are still here, below each drawing where they exist, captioned as mirrored - they are illustrations rather than screenshots, and the page no longer quietly adopts their handedness for everything else.
187 lines
6.8 KiB
CSS
187 lines
6.8 KiB
CSS
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
:root {
|
|
/* The pod's own lamp fills - MUNGA_L4/L4MFDVIEW.cpp:112 */
|
|
--amber: #ffd230;
|
|
--red: #ff482c;
|
|
--phosphor: #6fdc8c;
|
|
|
|
--ground: #0d0b07;
|
|
--panel: #16130d;
|
|
--rule: #2f2819;
|
|
--ink: #f3ead6;
|
|
--ink-mid: #b3a68a;
|
|
--ink-low: #7d7360;
|
|
|
|
--sys: var(--amber);
|
|
--wep: var(--red);
|
|
--pilot: var(--phosphor);
|
|
--on-accent: #0d0b07;
|
|
|
|
--step--1: clamp(.72rem, .70rem + .1vw, .78rem);
|
|
--step-0: clamp(.88rem, .85rem + .15vw, .95rem);
|
|
--step-1: clamp(1.05rem, 1rem + .3vw, 1.2rem);
|
|
--step-2: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
|
|
--step-3: clamp(1.9rem, 1.5rem + 2vw, 3.1rem);
|
|
|
|
--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
--sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--ground: #f7f3e8; --panel: #fffdf7; --rule: #ddd2b8;
|
|
--ink: #17140d; --ink-mid: #5c5340; --ink-low: #857a63;
|
|
--sys: #8a6400; --wep: #b3260f; --pilot: #1c7a3f;
|
|
--on-accent: #fffdf7;
|
|
}
|
|
}
|
|
:root[data-theme="light"] {
|
|
--ground: #f7f3e8; --panel: #fffdf7; --rule: #ddd2b8;
|
|
--ink: #17140d; --ink-mid: #5c5340; --ink-low: #857a63;
|
|
--sys: #8a6400; --wep: #b3260f; --pilot: #1c7a3f;
|
|
--on-accent: #fffdf7;
|
|
}
|
|
:root[data-theme="dark"] {
|
|
--ground: #0d0b07; --panel: #16130d; --rule: #2f2819;
|
|
--ink: #f3ead6; --ink-mid: #b3a68a; --ink-low: #7d7360;
|
|
--sys: #ffd230; --wep: #ff482c; --pilot: #6fdc8c;
|
|
--on-accent: #0d0b07;
|
|
}
|
|
|
|
body {
|
|
margin: 0; background: var(--ground); color: var(--ink);
|
|
font: 400 var(--step-0)/1.6 var(--sans); -webkit-font-smoothing: antialiased;
|
|
}
|
|
.wrap { max-width: 82rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
|
|
.sr-only {
|
|
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
|
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
|
}
|
|
:focus-visible { outline: 2px solid var(--sys); outline-offset: 2px; }
|
|
|
|
.top { border-bottom: 1px solid var(--rule); padding: clamp(2.5rem,6vw,4.5rem) 0 2rem; }
|
|
.eyebrow {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .22em;
|
|
text-transform: uppercase; color: var(--ink-low); margin: 0 0 1.1rem;
|
|
}
|
|
h1 {
|
|
font: 700 var(--step-3)/1.02 var(--mono); letter-spacing: -.02em;
|
|
text-transform: uppercase; text-wrap: balance; margin: 0 0 1rem;
|
|
}
|
|
h1 em { font-style: normal; color: var(--sys); }
|
|
.lede { max-width: 62ch; color: var(--ink-mid); margin: 0 0 1.4rem; font-size: var(--step-1); }
|
|
.lede strong { color: var(--ink); font-weight: 600; }
|
|
|
|
.bar {
|
|
position: sticky; top: 0; z-index: 5; background: var(--ground);
|
|
background: color-mix(in srgb, var(--ground) 92%, transparent);
|
|
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--rule); padding: .75rem 0;
|
|
}
|
|
.bar__in { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
|
|
.seg { display: inline-flex; border: 1px solid var(--rule); }
|
|
.seg button {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .12em;
|
|
text-transform: uppercase; background: none; border: 0; color: var(--ink-mid);
|
|
padding: .55rem .9rem; cursor: pointer;
|
|
}
|
|
.seg button[aria-pressed="true"] { background: var(--sys); color: var(--on-accent); }
|
|
.search {
|
|
flex: 1 1 12rem; min-width: 9rem; font: 400 var(--step--1) var(--mono);
|
|
background: var(--panel); color: var(--ink);
|
|
border: 1px solid var(--rule); padding: .55rem .7rem;
|
|
}
|
|
.search::placeholder { color: var(--ink-low); }
|
|
.count { font: 500 var(--step--1) var(--mono); color: var(--ink-low); letter-spacing: .1em; }
|
|
|
|
.grid {
|
|
display: grid; gap: 1px; background: var(--rule);
|
|
border: 1px solid var(--rule); margin: 1.75rem 0 4rem;
|
|
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
|
|
}
|
|
.trk { background: var(--panel); padding: 1.1rem 1.25rem 1.25rem; }
|
|
.trk[hidden] { display: none; }
|
|
|
|
.plan {
|
|
margin: 0 0 1rem; display: flex; flex-direction: column;
|
|
align-items: center; gap: .45rem;
|
|
}
|
|
.plan--console { margin-top: -.4rem; opacity: .85; }
|
|
.plan__src {
|
|
font: 500 var(--step--1)/1.3 var(--mono); letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--ink-low); text-align: center;
|
|
}
|
|
|
|
/* The map screen's own drawing: a real image in the game's palette on the
|
|
display's own black, so it reads the same in either theme. */
|
|
.plan__img {
|
|
display: block; width: 100%; max-width: 15rem; max-height: 24rem;
|
|
height: auto; object-fit: contain; background: #000;
|
|
border: 1px solid var(--rule); image-rendering: pixelated;
|
|
}
|
|
|
|
/* The console's picture is line art, so it is tinted like type instead. */
|
|
.plan__mask {
|
|
display: block; width: 100%; max-width: 11rem; max-height: 18rem;
|
|
aspect-ratio: var(--ar);
|
|
background-color: var(--ink-mid);
|
|
-webkit-mask-image: var(--art); mask-image: var(--art);
|
|
-webkit-mask-size: contain; mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
|
|
-webkit-mask-position: center; mask-position: center;
|
|
}
|
|
.trk h3 {
|
|
font: 700 var(--step-2)/1.1 var(--mono); margin: 0 0 .2rem; color: var(--ink);
|
|
text-wrap: balance;
|
|
}
|
|
.trk__key {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .12em;
|
|
color: var(--ink-low); margin: 0 0 .7rem;
|
|
}
|
|
.trk__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .8rem; }
|
|
.chip {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .08em;
|
|
padding: .3rem .45rem; border: 1px solid currentColor;
|
|
}
|
|
.chip--arcade { color: var(--ink-mid); }
|
|
.chip--r411 { color: var(--ink-low); }
|
|
.chip--later { color: var(--ink-low); }
|
|
.chip--race { color: var(--sys); }
|
|
.chip--ball { color: var(--pilot); }
|
|
.chip--none { color: var(--wep); }
|
|
|
|
.stat { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; }
|
|
.stat div { display: contents; }
|
|
.stat dt {
|
|
font: 500 var(--step--1) var(--mono); letter-spacing: .1em;
|
|
text-transform: uppercase; color: var(--ink-low);
|
|
}
|
|
.stat dd {
|
|
margin: 0; text-align: right; font: 500 var(--step--1) var(--mono);
|
|
color: var(--ink); font-variant-numeric: tabular-nums;
|
|
}
|
|
.twin {
|
|
margin: .8rem 0 0; font: 400 var(--step--1)/1.45 var(--mono); color: var(--ink-low);
|
|
}
|
|
.twin.warn { color: var(--wep); }
|
|
|
|
.key { display: flex; flex-wrap: wrap; gap: .4rem .9rem; padding: 1.25rem 0 0; }
|
|
.key span {
|
|
display: inline-flex; align-items: center; gap: .4rem;
|
|
font: 500 var(--step--1) var(--mono); letter-spacing: .08em; color: var(--ink-low);
|
|
}
|
|
.key i { width: .7rem; height: .7rem; display: inline-block; }
|
|
|
|
.foot {
|
|
border-top: 1px solid var(--rule); padding: 1.5rem 0 4rem;
|
|
color: var(--ink-low); font-size: var(--step--1); max-width: 78ch;
|
|
}
|
|
.foot code { font-family: var(--mono); color: var(--ink-mid); }
|
|
.empty-state {
|
|
padding: 2rem; background: var(--panel); color: var(--ink-low);
|
|
font: 400 var(--step-0) var(--mono);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
|