146 lines
5.6 KiB
Plaintext
146 lines
5.6 KiB
Plaintext
---
|
|
import Schematic from './Schematic.astro';
|
|
import { overview } from './diagrams';
|
|
import { t, type Lang } from '../../i18n/ui';
|
|
interface Props { lang: Lang }
|
|
const { lang } = Astro.props;
|
|
const ui = t(lang);
|
|
const s = ui.verifier.soon;
|
|
const g = ui.verifier.how.groups[0];
|
|
const pair = overview(g);
|
|
/* The step that is current; earlier ones read as passed, later ones as open. */
|
|
const now = 0;
|
|
---
|
|
<section class="section track" aria-labelledby="track-title">
|
|
<div class="container grid">
|
|
<div class="track__head">
|
|
<h2 id="track-title" class="h2">{s.track.title}</h2>
|
|
<p class="muted">{s.track.body}</p>
|
|
</div>
|
|
<ol class="track__steps" role="list">
|
|
{s.track.steps.map((step, i) => (
|
|
<li class="track__step" data-state={i < now ? 'past' : i === now ? 'now' : 'next'} aria-current={i === now ? 'step' : undefined}>
|
|
<span class="track__node" aria-hidden="true" />
|
|
<p class="track__state">{step.state}</p>
|
|
<h3 class="h3 track__name">{step.name}</h3>
|
|
<p class="track__body muted">{step.body}</p>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section spec" aria-labelledby="spec-title">
|
|
<div class="container grid">
|
|
<div class="spec__head">
|
|
<h2 id="spec-title" class="h2">{s.spec.title}</h2>
|
|
<p class="muted">{s.spec.body}</p>
|
|
</div>
|
|
<dl class="spec__table">
|
|
{s.spec.rows.map((r) => (
|
|
<div class="spec__row">
|
|
<dt>{r.key}</dt>
|
|
<dd>{r.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
<figure class="spec__figure">
|
|
<div class="spec__drawing hud-frame">
|
|
<div class="spec__wide"><Schematic layout={pair.wide} title={g.title} desc={g.desc} variant="wide" id="soon-wide" /></div>
|
|
<div class="spec__tall"><Schematic layout={pair.tall} title={g.title} desc={g.desc} variant="tall" id="soon-tall" /></div>
|
|
</div>
|
|
<figcaption class="small muted">{s.spec.figure}</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* Release path: one hairline, one node per phase. */
|
|
.track__head { grid-column: 1 / -1; display: grid; gap: var(--space-5); align-content: start; }
|
|
.track__head p { max-width: 24em; }
|
|
.track__steps { grid-column: 1 / -1; display: grid; gap: var(--space-7); }
|
|
.track__step {
|
|
position: relative;
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
align-content: start;
|
|
padding-left: var(--space-7);
|
|
}
|
|
/* Vertical rail on small screens. */
|
|
.track__step::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: calc(0.5rem - var(--hairline) / 2);
|
|
top: 1.25rem;
|
|
bottom: calc(-1 * var(--space-7));
|
|
border-left: var(--hairline) solid var(--ink-muted);
|
|
}
|
|
.track__step:last-child::before { bottom: 0; border-left-style: dashed; }
|
|
.track__step[data-state='next']::before { border-left-style: dashed; border-color: var(--line); }
|
|
.track__node {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.2rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: var(--hairline) solid var(--ink);
|
|
border-radius: 50%;
|
|
background: var(--paper);
|
|
}
|
|
.track__step[data-state='now'] .track__node { outline: var(--hairline) solid var(--ink-muted); outline-offset: 0.35rem; }
|
|
.track__step[data-state='now'] .track__node::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0.2rem;
|
|
border-radius: 50%;
|
|
background: var(--signal);
|
|
outline: var(--hairline) solid var(--ink);
|
|
}
|
|
.track__step[data-state='next'] .track__node { border-style: dashed; border-color: var(--ink-muted); }
|
|
.track__state { font-size: var(--step-small); line-height: var(--leading-small); color: var(--ink-muted); }
|
|
.track__step[data-state='next'] .track__name { color: var(--ink-muted); }
|
|
.track__body { max-width: 22em; }
|
|
|
|
/* Spec sheet: key and value on hairlines, like a data sheet. */
|
|
.spec { border-top: var(--hairline) solid var(--line); }
|
|
.spec__head { grid-column: 1 / -1; display: grid; gap: var(--space-5); align-content: start; }
|
|
.spec__head p { max-width: 28em; }
|
|
.spec__table { grid-column: 1 / -1; border-top: var(--hairline) solid var(--ink); }
|
|
.spec__row {
|
|
display: grid;
|
|
grid-template-columns: minmax(8rem, 1fr) 2fr;
|
|
gap: var(--gap);
|
|
padding-block: var(--space-4);
|
|
border-bottom: var(--hairline) solid var(--line);
|
|
}
|
|
.spec__row dt { font-size: var(--step-small); line-height: var(--leading-small); color: var(--ink-muted); padding-top: 0.15em; }
|
|
.spec__figure { grid-column: 1 / -1; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
|
|
.spec__drawing { padding: var(--space-6); }
|
|
.spec__wide { display: none; }
|
|
|
|
@media (min-width: 48rem) {
|
|
.track__head { grid-column: 1 / span 4; }
|
|
.spec__head { grid-column: 1 / span 5; }
|
|
.spec__table { grid-column: 7 / span 6; }
|
|
.spec__wide { display: block; }
|
|
.spec__tall { display: none; }
|
|
.spec__drawing { padding: var(--space-7) var(--space-8); }
|
|
}
|
|
/* Wide: the rail turns horizontal and runs across all three phases. */
|
|
@media (min-width: 64rem) {
|
|
.track__steps { grid-column: 5 / span 8; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
|
|
.track__step { padding-left: 0; padding-top: var(--space-7); padding-right: var(--space-4); }
|
|
.track__step::before {
|
|
left: 1.25rem;
|
|
right: calc(-1 * var(--gap));
|
|
top: calc(0.5rem - var(--hairline) / 2);
|
|
bottom: auto;
|
|
border-left: 0;
|
|
border-top: var(--hairline) solid var(--ink-muted);
|
|
}
|
|
.track__step:last-child::before { right: 0; border-top-style: dashed; }
|
|
.track__step[data-state='next']::before { border-top-style: dashed; border-color: var(--ink-muted); }
|
|
.track__node { top: 0; }
|
|
}
|
|
</style>
|