fklement/homepage_relaunch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

comming soon

Browse Source
This commit is contained in:
Felix Klement committed 2026-10-04 12:55:12 +02:00
1 parent c72d45740e
commit 2b509386eb
9 files changed
+437 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/verifier/ComingSoon.astro
+147
View File
@@ -0,0 +1,147 @@
---
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. Numbering is earned here: it is a sequence. */
.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); counter-reset: step; }
.track__step {
position: relative;
display: grid;
gap: var(--space-2);
align-content: start;
padding-left: var(--space-7);
counter-increment: step;
}
/* 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__state::before { content: counter(step, decimal-leading-zero) ' '; white-space: pre; color: var(--ink); }
.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) - 0rem);
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>