Skip to content

Commit eb24aec

Browse files
levylevy
committed
web: add the paper's proof-chain figure to the anatomy section
Recreate the paper's 'Partial Event Ordering Example' as a theme-aware inline SVG: three node timelines (N1/N2/N3) of clock events cross-linked into a faint fabric, with the event E1 bracketed between C1 (lower bound) and C6 (upper bound) of the reader's clock (N3). The highlighted chain threads up from N3 through N2 and N1 to the event and back down, matching the section's 'a chain that begins and ends at your own clock' framing. Styled with the site tokens (accent chain, surface boxes) so it tracks light/dark, hugs a bounded figure card, and scrolls on narrow screens.
1 parent 3739924 commit eb24aec

1 file changed

Lines changed: 112 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,36 @@
230230
.lede .drop { color: var(--ink); font-family: var(--f-display); font-size: clamp(1.35rem, 2.3vw, 1.7rem); line-height: 1.5; }
231231
.lede .drop b { color: var(--accent); font-weight: 500; font-style: italic; }
232232

233+
/* ---------- chain figure ---------- */
234+
.chain-fig { margin-top: 2.6rem; }
235+
.chain-fig .frame {
236+
background: var(--surface); border: 1px solid var(--line);
237+
border-radius: 10px; padding: 1.4rem 1.5rem 1rem; box-shadow: var(--shadow);
238+
overflow-x: auto; max-width: 780px; margin-inline: auto;
239+
}
240+
.chain-svg { display: block; width: 100%; min-width: 560px; height: auto; }
241+
.chain-fig figcaption {
242+
margin-top: 1rem; color: var(--ink-soft); font-size: 0.95rem;
243+
max-width: 62ch; margin-inline: auto; text-align: center;
244+
}
245+
.chain-fig figcaption b { color: var(--accent); font-weight: 500; }
246+
/* svg element classes */
247+
.cf-axis { stroke: var(--line-2); stroke-width: 1; fill: none; }
248+
.cf-arrowhead { fill: var(--ink-faint); }
249+
.cf-mesh { stroke: var(--line-2); stroke-width: 1; opacity: 0.55; }
250+
.cf-chain { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
251+
.cf-box { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; }
252+
.cf-box-chain { fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); stroke: var(--accent); stroke-width: 1.4; }
253+
.cf-box-lbl { fill: var(--ink-soft); font-family: var(--f-mono); font-size: 12px; }
254+
.cf-box-lbl-chain { fill: var(--ink); }
255+
.cf-event { fill: var(--accent); stroke: var(--accent); }
256+
.cf-event-lbl { fill: var(--accent-ink); font-family: var(--f-mono); font-size: 12px; font-weight: 500; }
257+
.cf-nodelbl { fill: var(--ink-soft); font-family: var(--f-mono); font-size: 13px; }
258+
.cf-annot { fill: var(--ink-faint); font-family: var(--f-mono); font-size: 11px; }
259+
.cf-annot-event { fill: var(--accent); }
260+
.cf-bound-drop { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
261+
.cf-bound-lbl { fill: var(--accent); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em; }
262+
233263
/* grids */
234264
.grid { display: grid; gap: 1.15rem; }
235265
.g-3 { grid-template-columns: repeat(3, 1fr); }
@@ -473,6 +503,88 @@ <h2>A chain that begins and ends at your own clock.</h2>
473503
<p class="drop">A proof is a <b>chain</b>. It sets out from the clock you trust, threads through the steady heartbeats of nodes across the network, reaches the event in question, and comes all the way back — pinning it between one tick that came provably <b>before</b> and one that came provably <b>after</b>.</p>
474504
<p>Each heartbeat carries a signed nod to the neighbors it just heard from. Follow those nods outward from your event and, hop after hop, they lead back to a clock you chose to measure against — your own, a lab's, a notary's. The two bracketing ticks are your time bounds; the reference clock at each end is what turns them into a date you can read. Nothing in the chain is asserted after the fact — it's the record of nods that actually happened, in the order they happened, which is exactly why it can't be re-told two ways.</p>
475505
</div>
506+
<figure class="chain-fig reveal">
507+
<div class="frame">
508+
<svg class="chain-svg" viewBox="0 0 760 340" role="img" aria-label="A proof chain: the event E1 of node N1 is bracketed between clock events C1 and C6 of node N3, threading through the network from N3 up to the event and back down to N3.">
509+
<defs><marker id="cf-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" class="cf-arrowhead"/></marker></defs>
510+
<line class="cf-axis" x1="58" y1="95" x2="702" y2="95" marker-end="url(#cf-arrow)"/>
511+
<text class="cf-nodelbl" x="40" y="99" text-anchor="middle">N<tspan dy="3" font-size="0.7em">1</tspan></text>
512+
<line class="cf-axis" x1="58" y1="180" x2="702" y2="180" marker-end="url(#cf-arrow)"/>
513+
<text class="cf-nodelbl" x="40" y="184" text-anchor="middle">N<tspan dy="3" font-size="0.7em">2</tspan></text>
514+
<line class="cf-axis" x1="58" y1="265" x2="702" y2="265" marker-end="url(#cf-arrow)"/>
515+
<text class="cf-nodelbl" x="40" y="269" text-anchor="middle">N<tspan dy="3" font-size="0.7em">3</tspan></text>
516+
<line class="cf-axis" x1="58" y1="300" x2="702" y2="300" marker-end="url(#cf-arrow)"/>
517+
<text class="cf-annot" x="710" y="304" text-anchor="start">t</text>
518+
<line class="cf-mesh" x1="108" y1="180" x2="150" y2="95"/>
519+
<line class="cf-mesh" x1="225" y1="180" x2="150" y2="95"/>
520+
<line class="cf-mesh" x1="315" y1="180" x2="300" y2="95"/>
521+
<line class="cf-mesh" x1="315" y1="180" x2="380" y2="95"/>
522+
<line class="cf-mesh" x1="405" y1="180" x2="380" y2="95"/>
523+
<line class="cf-mesh" x1="405" y1="180" x2="470" y2="95"/>
524+
<line class="cf-mesh" x1="495" y1="180" x2="470" y2="95"/>
525+
<line class="cf-mesh" x1="560" y1="180" x2="470" y2="95"/>
526+
<line class="cf-mesh" x1="560" y1="180" x2="650" y2="95"/>
527+
<line class="cf-mesh" x1="665" y1="180" x2="650" y2="95"/>
528+
<line class="cf-mesh" x1="92" y1="265" x2="108" y2="180"/>
529+
<line class="cf-mesh" x1="92" y1="265" x2="225" y2="180"/>
530+
<line class="cf-mesh" x1="205" y1="265" x2="225" y2="180"/>
531+
<line class="cf-mesh" x1="205" y1="265" x2="315" y2="180"/>
532+
<line class="cf-mesh" x1="320" y1="265" x2="315" y2="180"/>
533+
<line class="cf-mesh" x1="320" y1="265" x2="405" y2="180"/>
534+
<line class="cf-mesh" x1="430" y1="265" x2="405" y2="180"/>
535+
<line class="cf-mesh" x1="430" y1="265" x2="495" y2="180"/>
536+
<line class="cf-mesh" x1="520" y1="265" x2="495" y2="180"/>
537+
<line class="cf-mesh" x1="520" y1="265" x2="560" y2="180"/>
538+
<line class="cf-mesh" x1="632" y1="265" x2="560" y2="180"/>
539+
<line class="cf-mesh" x1="632" y1="265" x2="665" y2="180"/>
540+
<polyline class="cf-chain" points="92,265 225,180 315,180 380,95 425,35 470,95 560,180 632,265"/>
541+
<line class="cf-bound-drop" x1="92" y1="276.0" x2="92" y2="300"/>
542+
<text class="cf-bound-lbl" x="92" y="318" text-anchor="middle">lower bound</text>
543+
<line class="cf-bound-drop" x1="632" y1="276.0" x2="632" y2="300"/>
544+
<text class="cf-bound-lbl" x="632" y="318" text-anchor="middle">upper bound</text>
545+
<rect class="cf-box" x="134.0" y="84.0" width="32" height="22" rx="4"/>
546+
<text class="cf-box-lbl" x="150" y="99" text-anchor="middle">C<tspan dy="3" font-size="0.7em">1</tspan></text>
547+
<rect class="cf-box" x="284.0" y="84.0" width="32" height="22" rx="4"/>
548+
<text class="cf-box-lbl" x="300" y="99" text-anchor="middle">C<tspan dy="3" font-size="0.7em">2</tspan></text>
549+
<rect class="cf-box cf-box-chain" x="364.0" y="84.0" width="32" height="22" rx="4"/>
550+
<text class="cf-box-lbl cf-box-lbl-chain" x="380" y="99" text-anchor="middle">C<tspan dy="3" font-size="0.7em">3</tspan></text>
551+
<rect class="cf-box cf-box-chain" x="454.0" y="84.0" width="32" height="22" rx="4"/>
552+
<text class="cf-box-lbl cf-box-lbl-chain" x="470" y="99" text-anchor="middle">C<tspan dy="3" font-size="0.7em">4</tspan></text>
553+
<rect class="cf-box" x="634.0" y="84.0" width="32" height="22" rx="4"/>
554+
<text class="cf-box-lbl" x="650" y="99" text-anchor="middle">C<tspan dy="3" font-size="0.7em">5</tspan></text>
555+
<rect class="cf-box" x="92.0" y="169.0" width="32" height="22" rx="4"/>
556+
<text class="cf-box-lbl" x="108" y="184" text-anchor="middle">C<tspan dy="3" font-size="0.7em">1</tspan></text>
557+
<rect class="cf-box cf-box-chain" x="209.0" y="169.0" width="32" height="22" rx="4"/>
558+
<text class="cf-box-lbl cf-box-lbl-chain" x="225" y="184" text-anchor="middle">C<tspan dy="3" font-size="0.7em">2</tspan></text>
559+
<rect class="cf-box cf-box-chain" x="299.0" y="169.0" width="32" height="22" rx="4"/>
560+
<text class="cf-box-lbl cf-box-lbl-chain" x="315" y="184" text-anchor="middle">C<tspan dy="3" font-size="0.7em">3</tspan></text>
561+
<rect class="cf-box" x="389.0" y="169.0" width="32" height="22" rx="4"/>
562+
<text class="cf-box-lbl" x="405" y="184" text-anchor="middle">C<tspan dy="3" font-size="0.7em">4</tspan></text>
563+
<rect class="cf-box" x="479.0" y="169.0" width="32" height="22" rx="4"/>
564+
<text class="cf-box-lbl" x="495" y="184" text-anchor="middle">C<tspan dy="3" font-size="0.7em">5</tspan></text>
565+
<rect class="cf-box cf-box-chain" x="544.0" y="169.0" width="32" height="22" rx="4"/>
566+
<text class="cf-box-lbl cf-box-lbl-chain" x="560" y="184" text-anchor="middle">C<tspan dy="3" font-size="0.7em">6</tspan></text>
567+
<rect class="cf-box" x="649.0" y="169.0" width="32" height="22" rx="4"/>
568+
<text class="cf-box-lbl" x="665" y="184" text-anchor="middle">C<tspan dy="3" font-size="0.7em">7</tspan></text>
569+
<rect class="cf-box cf-box-chain" x="76.0" y="254.0" width="32" height="22" rx="4"/>
570+
<text class="cf-box-lbl cf-box-lbl-chain" x="92" y="269" text-anchor="middle">C<tspan dy="3" font-size="0.7em">1</tspan></text>
571+
<rect class="cf-box" x="189.0" y="254.0" width="32" height="22" rx="4"/>
572+
<text class="cf-box-lbl" x="205" y="269" text-anchor="middle">C<tspan dy="3" font-size="0.7em">2</tspan></text>
573+
<rect class="cf-box" x="304.0" y="254.0" width="32" height="22" rx="4"/>
574+
<text class="cf-box-lbl" x="320" y="269" text-anchor="middle">C<tspan dy="3" font-size="0.7em">3</tspan></text>
575+
<rect class="cf-box" x="414.0" y="254.0" width="32" height="22" rx="4"/>
576+
<text class="cf-box-lbl" x="430" y="269" text-anchor="middle">C<tspan dy="3" font-size="0.7em">4</tspan></text>
577+
<rect class="cf-box" x="504.0" y="254.0" width="32" height="22" rx="4"/>
578+
<text class="cf-box-lbl" x="520" y="269" text-anchor="middle">C<tspan dy="3" font-size="0.7em">5</tspan></text>
579+
<rect class="cf-box cf-box-chain" x="616.0" y="254.0" width="32" height="22" rx="4"/>
580+
<text class="cf-box-lbl cf-box-lbl-chain" x="632" y="269" text-anchor="middle">C<tspan dy="3" font-size="0.7em">6</tspan></text>
581+
<rect class="cf-event" x="407.0" y="23.0" width="36" height="24" rx="4"/>
582+
<text class="cf-event-lbl" x="425" y="39" text-anchor="middle">E<tspan dy="3" font-size="0.7em">1</tspan></text>
583+
<text class="cf-annot cf-annot-event" x="425" y="17.0" text-anchor="middle">your event</text>
584+
</svg>
585+
</div>
586+
<figcaption>The event <b>E₁</b> made by node N₁ is pinned between two ticks of <b>your clock</b> (N₃) — <b>C₁</b> just before it, <b>C₆</b> just after. The bold chain threads up through the network to the event and back down; every link is a signed nod that actually happened, which is what makes the bracket impossible to fake.</figcaption>
587+
</figure>
476588
<div class="grid g-2 reveal" style="margin-top: 2.6rem;">
477589
<div class="card">
478590
<div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 12a8.5 8.5 0 1 0 2.7-6.2"/><path d="M3 4.5V9h4.5"/><path d="M12 8v4.3l3 1.8"/></svg></div>

0 commit comments

Comments
 (0)