Site: one spacing system on every page
Measured at 375, 768, 1280 and 1680 with headless Chrome. One token set in all four stylesheets: container 1200 px with a clamp(16px,4vw,32px) gutter, section rhythm clamp(56px,8vw,96px), cards clamp(18px,3vw,28px) padding and 18 px radius, tiles 18 by 20 px padding and 14 px radius, 24 px card gap and 12 px tile gap, headings h1 clamp(32,5.5vw,56) h2 clamp(28,4.2vw,44) h3 clamp(18,2vw,22), tile values clamp(20,2.2vw,26). Home: the live strip spans the full hero width with economics-spec tiles; stat strip and economics tiles share one spec; journey phases and log take the tile and card boxes; inline padding-top overrides removed, consecutive dark sections share one gap; every nav anchor lands the heading 11 px under the sticky bar at every width (padded sections subtract their own padding). Live: head, strip, cards and gaps on the tokens; four tiles a row, two on phones; network name no longer clips. Litepaper: real gutter instead of a fixed 16 px, cover, layout, tables, figures, pull quotes and stat tiles on the tokens, pager stacks on phones. Engineering log: same tokens, long code tokens wrap so phones no longer scroll sideways, duplicate h1 hidden. Copy shortened so no label orphans at any width: stat strip labels, the economics tiles, the strip tile labels, the litepaper stat tiles, the mining-program eyebrow. The light-client card block is untouched. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
igneum-labs
parent
035a63013e
commit
176965595b
5 changed files with 165 additions and 122 deletions
File diff suppressed because one or more lines are too long
|
|
@ -83,30 +83,37 @@ function page(title, desc, bodyHtml, toc, note, { path = '/bench', heading = tit
|
|||
${meta(title, desc, path)}
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
|
||||
<style>
|
||||
:root{--obsidian:#0C0C0E;--graphite:#16161A;--line:#2A2A30;--ember:#F2541B;--molten:#FFB35C;--bone:#F4F1EC;--ash:#9A9A9E;--ink-2:#C9C7C2}
|
||||
*{box-sizing:border-box}body{margin:0;background:var(--obsidian);color:var(--bone);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;padding-inline:clamp(16px,4vw,32px)}
|
||||
:root{--obsidian:#0C0C0E;--graphite:#16161A;--line:#2A2A30;--ember:#F2541B;--molten:#FFB35C;--bone:#F4F1EC;--ash:#9A9A9E;--ink-2:#C9C7C2;
|
||||
/* one system for every page: container, gutter, section rhythm, card and tile boxes, heading scale (same tokens as the homepage) */
|
||||
--max:1200px;--gutter:clamp(16px,4vw,32px);--sec:clamp(56px,8vw,96px);--head:clamp(40px,6vw,64px);
|
||||
--card-pad:clamp(18px,3vw,28px);--card-r:18px;--tile-pad:18px 20px;--tile-r:14px;--gap:24px;--gap-tile:12px;
|
||||
--fs-h1:clamp(32px,5.5vw,56px);--fs-h2:clamp(28px,4.2vw,44px);--fs-h3:clamp(18px,2vw,22px);--fs-tile:clamp(20px,2.2vw,26px)}
|
||||
*{box-sizing:border-box}body{margin:0;background:var(--obsidian);color:var(--bone);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;padding:0}
|
||||
a{color:var(--ember);text-decoration:none}a:hover{text-decoration:underline}
|
||||
.wrap{max-width:1180px;margin:0 auto}
|
||||
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
|
||||
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
|
||||
.brand{display:flex;align-items:center;gap:10px;color:var(--bone)}.brand b{font-family:'Unbounded',sans-serif;font-weight:900;letter-spacing:.06em;font-size:18px}
|
||||
header nav{display:flex;flex-wrap:wrap;gap:18px;font-size:14px}header nav a{color:var(--ink-2)}
|
||||
h1{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(28px,5vw,48px);line-height:1.05;margin:36px 0 10px}
|
||||
.note{color:var(--ash);font-size:15px;max-width:72ch;margin-bottom:28px}
|
||||
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:80px}
|
||||
h1{font-family:'Unbounded',sans-serif;font-weight:900;font-size:var(--fs-h1);line-height:1.05;margin:var(--head) 0 12px}
|
||||
.note{color:var(--ash);font-size:15px;max-width:72ch;margin-bottom:32px}
|
||||
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:var(--sec)}
|
||||
@media(min-width:960px){.layout{grid-template-columns:240px minmax(0,1fr);gap:56px}}
|
||||
.toc{align-self:start;font-size:14px}@media(min-width:960px){.toc{position:sticky;top:24px}}
|
||||
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--ink-2)}.toc a:hover{background:var(--graphite);text-decoration:none;color:var(--bone)}
|
||||
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink-2)}.toc a:hover{background:var(--graphite);text-decoration:none;color:var(--bone)}
|
||||
article{max-width:78ch;min-width:0}
|
||||
article h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,26px);margin:44px 0 12px;padding-top:24px;border-top:1px solid var(--line)}
|
||||
article h1{display:none}
|
||||
article h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--fs-h3);line-height:1.3;margin:44px 0 12px;padding-top:24px;border-top:1px solid var(--line)}
|
||||
article h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
|
||||
article h3{font-family:'Unbounded',sans-serif;font-weight:500;font-size:16px;margin:26px 0 8px}
|
||||
article h4{font-size:15px;margin:20px 0 6px;color:var(--molten)}
|
||||
article p{margin:0 0 14px}article ul,article ol{margin:0 0 14px;padding-left:22px}article li{margin-bottom:6px}
|
||||
code{font-family:'IBM Plex Mono',monospace;font-size:.92em;background:var(--graphite);padding:1px 5px;border-radius:4px}
|
||||
pre{margin:0 0 16px;padding:14px 16px;background:var(--graphite);border-radius:12px;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.55;overflow-x:auto}
|
||||
.tbl{overflow-x:auto;margin:14px 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--graphite)}
|
||||
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
|
||||
th{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-weight:500;background:var(--obsidian)}tr:last-child td{border-bottom:0}
|
||||
footer{border-top:1px solid var(--line);padding-block:24px 48px;font-size:13px;color:var(--ash)}
|
||||
article p,article li,article h2,article h3{overflow-wrap:anywhere}
|
||||
code{font-family:'IBM Plex Mono',monospace;font-size:.92em;background:var(--graphite);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
|
||||
pre{margin:0 0 16px;padding:16px 18px;background:var(--graphite);border-radius:var(--card-r);font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.55;overflow-x:auto}
|
||||
.tbl{overflow-x:auto;margin:18px 0 24px;border:1px solid var(--line);border-radius:var(--card-r);background:var(--graphite)}
|
||||
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
|
||||
th{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-weight:500;background:var(--obsidian)}tr:last-child td{border-bottom:0}
|
||||
footer{border-top:1px solid var(--line);padding-block:32px 48px;font-size:13px;color:var(--ash)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
110
site/index.html
110
site/index.html
|
|
@ -35,11 +35,17 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
|
||||
<style>
|
||||
:root{--obsidian:#0C0C0E;--graphite:#16161A;--line:#2A2A30;--line-2:#3A3A42;--ember:#F2541B;--molten:#FFB35C;--bone:#F4F1EC;--ash:#9A9A9E;--ink-2:#C9C7C2;--ember-ink:#0C0C0E;
|
||||
--fs-hero:clamp(40px,7vw,76px);--fs-h2:clamp(28px,4.2vw,44px);--fs-h3:clamp(18px,2vw,22px);--gutter:clamp(16px,4vw,32px);--max:1200px}
|
||||
/* one system for every page: container, gutter, section rhythm, card and tile boxes, heading scale */
|
||||
--max:1200px;--gutter:clamp(16px,4vw,32px);--sec:clamp(56px,8vw,96px);--head:clamp(40px,6vw,64px);
|
||||
--card-pad:clamp(18px,3vw,28px);--card-r:18px;--tile-pad:18px 20px;--tile-r:14px;--gap:24px;--gap-tile:12px;
|
||||
--fs-hero:clamp(40px,7vw,76px);--fs-h1:clamp(32px,5.5vw,56px);--fs-h2:clamp(28px,4.2vw,44px);--fs-h3:clamp(18px,2vw,22px);--fs-tile:clamp(20px,2.2vw,26px)}
|
||||
*{box-sizing:border-box}
|
||||
html{scroll-behavior:smooth}
|
||||
section,[id]{scroll-margin-top:84px}
|
||||
@media (max-width:900px){section,[id]{scroll-margin-top:80px}}
|
||||
/* anchors land with the heading 11 px under the sticky bar at every width: a padded section subtracts its own top padding */
|
||||
:root{--sm:84px}
|
||||
@media (max-width:900px){:root{--sm:80px}}
|
||||
section,[id]{scroll-margin-top:var(--sm)}
|
||||
section[id]{scroll-margin-top:calc(var(--sm) - var(--sec))}
|
||||
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
|
||||
body{margin:0;background:var(--obsidian);color:var(--bone);font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
a{color:inherit;text-decoration:none}
|
||||
|
|
@ -61,8 +67,8 @@ p{margin:0}
|
|||
.btn.primary:hover{background:#FF6A2B;border-color:#FF6A2B;color:var(--ember-ink)}
|
||||
.btn.dark{background:var(--obsidian);color:var(--bone);border-color:var(--obsidian)}
|
||||
.btn.dark:hover{background:#222226;color:var(--bone)}
|
||||
.card{background:var(--graphite);border:1px solid var(--line);border-radius:18px;padding:28px}
|
||||
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
|
||||
.card{background:var(--graphite);border:1px solid var(--line);border-radius:var(--card-r);padding:var(--card-pad);min-width:0}
|
||||
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
|
||||
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
|
||||
.reveal.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
|
||||
|
|
@ -87,21 +93,18 @@ p{margin:0}
|
|||
.hero{position:relative;padding-block:clamp(56px,9vw,112px) clamp(40px,6vw,72px);overflow:hidden}
|
||||
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.35) 45%,rgba(0,0,0,.9) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.35) 45%,rgba(0,0,0,.9) 100%)}
|
||||
@media (max-width:979px){.hero canvas{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 55%,rgba(0,0,0,.8) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 55%,rgba(0,0,0,.8) 100%)}}
|
||||
.hero .wrap{position:relative;display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
|
||||
@media (min-width:980px){.hero .wrap{grid-template-columns:1.15fr .85fr;gap:56px}}
|
||||
.hero .wrap{position:relative;display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
|
||||
@media (min-width:980px){.hero .wrap{grid-template-columns:1.15fr .85fr;gap:32px 56px}}
|
||||
.hero-copy{display:flex;flex-direction:column;gap:24px}
|
||||
.hero p.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:56ch}
|
||||
.cta{display:flex;flex-wrap:wrap;gap:12px}
|
||||
/* live stats strip: hidden until the observer reports fresh numbers */
|
||||
.livestrip{display:none;flex-direction:column;gap:10px}
|
||||
/* live stats strip: hidden until the observer reports fresh numbers; spans the full hero width, tiles share the economics tile spec */
|
||||
.livestrip{display:none;flex-direction:column;gap:var(--gap-tile);grid-column:1/-1;min-width:0}
|
||||
.livestrip.on{display:flex}
|
||||
.livestrip-head{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--molten)}
|
||||
.livestrip-head a{color:var(--molten)}
|
||||
.livestrip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
|
||||
.livestrip .tile{padding:12px 14px;border-radius:12px;min-width:0;display:flex;flex-direction:column;justify-content:center}
|
||||
.livestrip .tile .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(18px,1.6vw,22px);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:visible;text-overflow:clip;color:var(--bone)}
|
||||
.livestrip .tile .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:5px;line-height:1.3;color:var(--ash);white-space:nowrap}
|
||||
@media (min-width:701px){.livestrip{max-width:880px}.livestrip-grid{gap:8px}}
|
||||
.livestrip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-tile)}
|
||||
.livestrip .tile .v{white-space:nowrap;font-variant-numeric:tabular-nums}
|
||||
@media (max-width:700px){.livestrip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||||
.verify{display:flex;flex-direction:column;gap:18px}
|
||||
.verify-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
|
||||
|
|
@ -119,21 +122,23 @@ p{margin:0}
|
|||
|
||||
/* stats */
|
||||
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
|
||||
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 40px;padding-block:28px}
|
||||
.stat .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(24px,3vw,30px);color:var(--ember);line-height:1.1}
|
||||
.stat .k{margin-top:6px;font-size:14px;color:var(--ash)}
|
||||
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px 24px;padding-block:28px}
|
||||
.stat .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--fs-tile);color:var(--ember);line-height:1.1}
|
||||
.stat .k{margin-top:6px;font-size:14px;color:var(--ash);line-height:1.35;text-wrap:balance}
|
||||
|
||||
section{padding-block:clamp(56px,8vw,96px)}
|
||||
/* rhythm: every section keeps --sec from its content to the next boundary; two dark sections in a row share one */
|
||||
section{padding-block:var(--sec)}
|
||||
section:not(.light)+section:not(.light){padding-top:0;scroll-margin-top:var(--sm)}
|
||||
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px}
|
||||
.sec-head p{font-size:16px;color:var(--ash);max-width:46ch}
|
||||
|
||||
/* dag */
|
||||
.viz{padding:clamp(16px,3vw,28px);overflow:hidden}
|
||||
.viz{overflow:hidden}
|
||||
.viz-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;margin-bottom:12px}
|
||||
.viz-stats{display:flex;gap:18px;font-size:12px;color:var(--ash)}
|
||||
.viz-stats b{color:var(--bone);font-weight:500;font-variant-numeric:tabular-nums}
|
||||
#chain{display:block;width:100%;height:clamp(200px,36vw,340px);border-radius:12px;background:var(--obsidian)}
|
||||
.dag{padding:clamp(18px,3vw,32px);overflow:hidden}
|
||||
.dag{overflow:hidden}
|
||||
.dag-rows{display:flex;flex-direction:column;gap:var(--dg,14px);--bs:34px;--dg:14px}
|
||||
@media (max-width:640px){.dag-rows{--bs:26px;--dg:9px}}
|
||||
.dag-row{display:flex;gap:var(--dg);align-items:center;overflow:hidden}
|
||||
|
|
@ -155,8 +160,8 @@ pre{margin:0;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.
|
|||
.feed div:last-child{border-bottom:0}
|
||||
|
||||
/* jobs cards */
|
||||
.jobs{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
|
||||
.job{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:18px;padding:28px;transition:border-color .2s ease,transform .2s ease}
|
||||
.jobs{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
|
||||
.job{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:var(--card-r);padding:var(--card-pad);transition:border-color .2s ease,transform .2s ease}
|
||||
.job:hover{border-color:var(--line-2);transform:translateY(-2px)}
|
||||
.job p{font-size:15px;color:var(--ink-2)}
|
||||
.job a.more{color:var(--ember);font-weight:600;font-size:15px}
|
||||
|
|
@ -177,18 +182,18 @@ pre{margin:0;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.
|
|||
.light .job p{color:#3D3B37}
|
||||
|
||||
/* journey */
|
||||
.journey{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
|
||||
.phase{border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px;position:relative;transition:border-color .2s ease}
|
||||
.journey{display:grid;gap:var(--gap-tile);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
|
||||
.phase{border:1px solid var(--line);border-radius:var(--tile-r);padding:var(--tile-pad);display:flex;flex-direction:column;gap:6px;position:relative;transition:border-color .2s ease;min-width:0}
|
||||
.phase .w{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ash)}
|
||||
.phase .n{font-weight:600;font-size:15px}
|
||||
.phase .g{font-size:12px;color:var(--ash);line-height:1.4}
|
||||
.phase .n{font-weight:600;font-size:15px;text-wrap:balance}
|
||||
.phase .g{font-size:12px;color:var(--ash);line-height:1.4;text-wrap:balance}
|
||||
.phase.done{border-color:var(--line-2)}
|
||||
.phase.done .n::after{content:' ✓';color:var(--molten)}
|
||||
.phase.active{border:2px solid var(--ember);box-shadow:0 0 0 0 rgba(242,84,27,.35);animation:glow 2.4s ease-in-out infinite}
|
||||
@keyframes glow{50%{box-shadow:0 0 0 10px rgba(242,84,27,0)}}
|
||||
.phase.active .w{color:var(--ember)}
|
||||
.now{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ember);letter-spacing:.12em}
|
||||
.log{display:flex;flex-direction:column;gap:0;margin-top:28px;border:1px solid var(--line);border-radius:18px;background:var(--graphite);padding:8px 24px}
|
||||
.log{display:flex;flex-direction:column;gap:0;margin-top:var(--gap);border:1px solid var(--line);border-radius:var(--card-r);background:var(--graphite);padding:4px var(--card-pad)}
|
||||
.log div{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
|
||||
.log div:last-child{border-bottom:0}
|
||||
.log .d{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ash);flex:0 0 92px;padding-top:3px}
|
||||
|
|
@ -196,10 +201,10 @@ pre{margin:0;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.
|
|||
/* economics */
|
||||
.bar{display:flex;height:22px;border-radius:8px;overflow:hidden}
|
||||
.bar div{transition:width 1.2s ease}
|
||||
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
|
||||
.tile{background:var(--graphite);border:1px solid var(--line);border-radius:16px;padding:22px}
|
||||
.tile .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:26px}
|
||||
.tile .k{font-size:14px;color:var(--ash);margin-top:6px}
|
||||
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-tile)}
|
||||
.tile{background:var(--graphite);border:1px solid var(--line);border-radius:var(--tile-r);padding:var(--tile-pad);min-width:0}
|
||||
.tile .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--fs-tile);line-height:1.1;color:var(--bone)}
|
||||
.tile .k{font-size:14px;color:var(--ash);margin-top:6px;line-height:1.35;text-wrap:balance}
|
||||
|
||||
.band{background:var(--ember);color:var(--ember-ink)}
|
||||
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:56px}
|
||||
|
|
@ -215,6 +220,7 @@ footer .wrap{padding-block:48px 32px}
|
|||
.foot-col a{color:var(--ink-2)}
|
||||
.foot-col a:hover{color:var(--molten)}
|
||||
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ash)}
|
||||
.foot-base span{text-wrap:balance}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -252,15 +258,6 @@ footer .wrap{padding-block:48px 32px}
|
|||
<a href="#mine" class="btn primary">Start mining</a>
|
||||
<a href="/litepaper" class="btn">Read the litepaper</a>
|
||||
</div>
|
||||
<div class="livestrip" id="livestrip" aria-live="off">
|
||||
<div class="livestrip-head"><span class="dot"></span><a href="/live">live devnet</a></div>
|
||||
<div class="livestrip-grid">
|
||||
<div class="tile"><div class="v" id="ls-miners">0</div><div class="k">miners active</div></div>
|
||||
<div class="tile"><div class="v" id="ls-bps">0.0</div><div class="k">blocks / s</div></div>
|
||||
<div class="tile"><div class="v" id="ls-hash">0.0 MH/s</div><div class="k">network hash rate</div></div>
|
||||
<div class="tile"><div class="v" id="ls-blocks">0</div><div class="k">blocks on the devnet</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card verify reveal">
|
||||
<div class="verify-head">
|
||||
|
|
@ -282,16 +279,25 @@ footer .wrap{padding-block:48px 32px}
|
|||
</div>
|
||||
<script type="module" src="/verify/verify.js"></script>
|
||||
</div>
|
||||
<div class="livestrip" id="livestrip" aria-live="off">
|
||||
<div class="livestrip-head"><span class="dot"></span><a href="/live">live devnet</a></div>
|
||||
<div class="livestrip-grid">
|
||||
<div class="tile"><div class="v" id="ls-miners">0</div><div class="k">miners active</div></div>
|
||||
<div class="tile"><div class="v" id="ls-bps">0.0</div><div class="k">blocks / s</div></div>
|
||||
<div class="tile"><div class="v" id="ls-hash">0.0 MH/s</div><div class="k">hash rate</div></div>
|
||||
<div class="tile"><div class="v" id="ls-blocks">0</div><div class="k">devnet blocks</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stats">
|
||||
<div class="wrap">
|
||||
<div class="stat reveal"><div class="v" data-count="1" data-suffix=" / s">1 / s</div><div class="k">blocks, rising to 10</div></div>
|
||||
<div class="stat reveal"><div class="v">~60 s</div><div class="k">to a verified proof at launch</div></div>
|
||||
<div class="stat reveal"><div class="v" data-count="0">0</div><div class="k">premine, pre-sale, allocation</div></div>
|
||||
<div class="stat reveal"><div class="v">~60 s</div><div class="k">to a proof at launch</div></div>
|
||||
<div class="stat reveal"><div class="v" data-count="0">0</div><div class="k">premine</div></div>
|
||||
<div class="stat reveal"><div class="v" data-count="4" data-suffix="B">4B</div><div class="k">IGN hard cap, ever</div></div>
|
||||
<div class="stat reveal"><div class="v" data-count="100" data-suffix="%">100%</div><div class="k">of emission to miners and provers</div></div>
|
||||
<div class="stat reveal"><div class="v" data-count="100" data-suffix="%">100%</div><div class="k">to miners and provers</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -316,7 +322,7 @@ footer .wrap{padding-block:48px 32px}
|
|||
</div>
|
||||
<div class="grid" style="margin-top:24px">
|
||||
<div class="card reveal" style="display:flex;flex-direction:column;gap:16px">
|
||||
<div class="verify-head"><div class="eyebrow">This hour's mining program</div><div class="mono" style="font-size:12px;color:var(--molten)">next in <span id="countdown">59:59</span></div></div>
|
||||
<div class="verify-head"><div class="eyebrow">This hour's program</div><div class="mono" style="font-size:12px;color:var(--molten)">next in <span id="countdown">59:59</span></div></div>
|
||||
<pre id="program" class="caret"></pre>
|
||||
<p class="pt">A new program every hour. Last hour's chip is already obsolete.</p>
|
||||
</div>
|
||||
|
|
@ -335,7 +341,7 @@ footer .wrap{padding-block:48px 32px}
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section id="randomx" style="padding-top:8px">
|
||||
<section id="randomx">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<h2>Monero's idea, finished for GPUs</h2>
|
||||
|
|
@ -358,7 +364,7 @@ footer .wrap{padding-block:48px 32px}
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section id="build" style="padding-top:8px">
|
||||
<section id="build">
|
||||
<div class="wrap">
|
||||
<h2 class="reveal" style="margin-bottom:28px">One chain, three jobs</h2>
|
||||
<div class="jobs">
|
||||
|
|
@ -392,9 +398,9 @@ footer .wrap{padding-block:48px 32px}
|
|||
<p>One client switches the card between hashing and proving by itself.</p>
|
||||
</div>
|
||||
<div class="jobs">
|
||||
<div class="card reveal" style="display:flex;flex-direction:column;gap:10px"><div class="eyebrow">01</div><h3 style="font-size:20px">Block reward</h3><p style="font-size:15px;color:#3D3B37">80% of emission to the miner who wins the block.</p></div>
|
||||
<div class="card reveal" style="display:flex;flex-direction:column;gap:10px"><div class="eyebrow">02</div><h3 style="font-size:20px">Proving the chain</h3><p style="font-size:15px;color:#3D3B37">20% of emission plus a share of every block's gas.</p></div>
|
||||
<div class="card reveal" style="display:flex;flex-direction:column;gap:10px"><div class="eyebrow">03</div><h3 style="font-size:20px">Proving for others</h3><p style="font-size:15px;color:#3D3B37">Rollups and bridges pay for proofs in their own money.</p></div>
|
||||
<div class="card reveal" style="display:flex;flex-direction:column;gap:10px"><div class="eyebrow">01</div><h3>Block reward</h3><p style="font-size:15px;color:#3D3B37">80% of emission to the miner who wins the block.</p></div>
|
||||
<div class="card reveal" style="display:flex;flex-direction:column;gap:10px"><div class="eyebrow">02</div><h3>Proving the chain</h3><p style="font-size:15px;color:#3D3B37">20% of emission plus a share of every block's gas.</p></div>
|
||||
<div class="card reveal" style="display:flex;flex-direction:column;gap:10px"><div class="eyebrow">03</div><h3>Proving for others</h3><p style="font-size:15px;color:#3D3B37">Rollups and bridges pay for proofs in their own money.</p></div>
|
||||
</div>
|
||||
<div class="cta reveal" style="margin-top:32px;align-items:center">
|
||||
<a href="#journey" class="btn dark"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M3 5.5l7.5-1v7H3zM11.5 4.3L21 3v8.5h-9.5zM3 12.5h7.5v7L3 18.5zM11.5 12.5H21V21l-9.5-1.3z"/></svg>Windows</a>
|
||||
|
|
@ -422,7 +428,7 @@ footer .wrap{padding-block:48px 32px}
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section id="economics" style="padding-top:8px">
|
||||
<section id="economics">
|
||||
<div class="wrap">
|
||||
<div style="display:grid;gap:48px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:center">
|
||||
<div class="reveal" style="display:flex;flex-direction:column;gap:20px">
|
||||
|
|
@ -439,9 +445,9 @@ footer .wrap{padding-block:48px 32px}
|
|||
</div>
|
||||
<div class="tiles reveal">
|
||||
<div class="tile"><div class="v">0</div><div class="k">premine</div></div>
|
||||
<div class="tile"><div class="v">0</div><div class="k">stake in consensus</div></div>
|
||||
<div class="tile"><div class="v">0</div><div class="k">stake, anywhere</div></div>
|
||||
<div class="tile"><div class="v">0</div><div class="k">admin keys</div></div>
|
||||
<div class="tile"><div class="v">90%</div><div class="k">of blocks must signal before any upgrade</div></div>
|
||||
<div class="tile"><div class="v">90%</div><div class="k">of blocks must signal to upgrade</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pt reveal" style="margin-top:28px">No premine, no stake, no fee to any team. Base fee burned.</p>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,10 @@
|
|||
--ink:#0C0C0E; --ink-2:#3D3B37; --quiet:#6E6B65;
|
||||
--ember:#D9430F; --ember-ink:#FFFFFF; --molten:#B9741C; --tint:#FBE9E0;
|
||||
--code:#16161A; --code-ink:#E6E2DA;
|
||||
/* one system for every page: container, gutter, section rhythm, card and tile boxes, heading scale (same tokens as the homepage) */
|
||||
--max:1200px;--gutter:clamp(16px,4vw,32px);--sec:clamp(56px,8vw,96px);--head:clamp(40px,6vw,64px);
|
||||
--card-pad:clamp(18px,3vw,28px);--card-r:18px;--tile-pad:18px 20px;--tile-r:14px;--gap:24px;--gap-tile:12px;
|
||||
--fs-h1:clamp(32px,5.5vw,56px);--fs-h2:clamp(28px,4.2vw,44px);--fs-h3:clamp(18px,2vw,22px);--fs-tile:clamp(20px,2.2vw,26px);
|
||||
}
|
||||
@media (prefers-color-scheme: dark){
|
||||
:root:not([data-theme="light"]){
|
||||
|
|
@ -52,21 +56,21 @@
|
|||
color-scheme:dark;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:var(--ground);color:var(--ink);font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;padding-inline:16px;padding-block:0}
|
||||
body{margin:0;background:var(--ground);color:var(--ink);font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;padding:0}
|
||||
a{color:var(--ember);text-decoration:none}
|
||||
a:hover{text-decoration:underline}
|
||||
a:focus-visible,button:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
|
||||
.wrap{max-width:1180px;margin:0 auto}
|
||||
.cover{padding-block:48px 40px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
|
||||
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
|
||||
.cover{padding-block:var(--head) 40px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
|
||||
.brand{display:flex;align-items:center;gap:14px}
|
||||
.brand .word{font-family:'Unbounded',sans-serif;font-weight:900;font-size:26px;letter-spacing:.06em}
|
||||
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}
|
||||
.cover h1{margin:12px 0 10px;font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(34px,6vw,64px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
|
||||
.cover h1{margin:12px 0 10px;font-family:'Unbounded',sans-serif;font-weight:900;font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
|
||||
.cover .tag{font-size:20px;color:var(--ink-2);max-width:40ch}
|
||||
.meta{display:flex;flex-direction:column;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--quiet);text-align:right}
|
||||
.meta b{color:var(--ink);font-weight:500}
|
||||
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-block:40px 80px}
|
||||
@media (min-width:960px){.layout{grid-template-columns:240px minmax(0,1fr);gap:64px}}
|
||||
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-block:40px var(--sec)}
|
||||
@media (min-width:960px){.layout{grid-template-columns:240px minmax(0,1fr);gap:56px}}
|
||||
.toc{align-self:start}
|
||||
@media (min-width:960px){.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px)}}
|
||||
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:s}
|
||||
|
|
@ -75,35 +79,36 @@ a:focus-visible,button:focus-visible{outline:2px solid var(--ember);outline-offs
|
|||
.toc li a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
|
||||
.toc .dl{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--quiet)}
|
||||
article{max-width:72ch}
|
||||
section{padding-block:34px;border-top:1px solid var(--line)}
|
||||
section{padding-block:40px;border-top:1px solid var(--line)}
|
||||
section:first-of-type{border-top:0;padding-top:0}
|
||||
h2{margin:0 0 18px;font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,32px);line-height:1.15;text-wrap:balance}
|
||||
h3{margin:28px 0 8px;font-family:'Unbounded',sans-serif;font-weight:500;font-size:17px;line-height:1.3}
|
||||
h2{margin:0 0 18px;font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--fs-h2);line-height:1.1;text-wrap:balance}
|
||||
h3{margin:28px 0 8px;font-family:'Unbounded',sans-serif;font-weight:500;font-size:var(--fs-h3);line-height:1.3}
|
||||
p{margin:0 0 16px}
|
||||
.lead{font-size:20px;line-height:1.5;color:var(--ink-2)}
|
||||
ul,ol{margin:0 0 16px;padding-left:22px}
|
||||
li{margin-bottom:8px}
|
||||
strong{font-weight:600}
|
||||
.pull{margin:24px 0;padding:22px 26px;border-left:4px solid var(--ember);background:var(--tint);border-radius:0 12px 12px 0;font-family:'Unbounded',sans-serif;font-weight:500;font-size:19px;line-height:1.4}
|
||||
.tbl{overflow-x:auto;margin:18px 0 22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
|
||||
.pull{margin:24px 0;padding:20px var(--card-pad);border-left:4px solid var(--ember);background:var(--tint);border-radius:0 var(--tile-r) var(--tile-r) 0;font-family:'Unbounded',sans-serif;font-weight:500;font-size:19px;line-height:1.4}
|
||||
.tbl{overflow-x:auto;margin:18px 0 24px;border:1px solid var(--line);border-radius:var(--card-r);background:var(--surface)}
|
||||
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
|
||||
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
|
||||
th{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);font-weight:500;background:var(--surface-2)}
|
||||
tr:last-child td{border-bottom:0}
|
||||
td.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
|
||||
.figure{margin:22px 0 26px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow-x:auto}
|
||||
.figure{margin:24px 0;padding:var(--card-pad);background:var(--surface);border:1px solid var(--line);border-radius:var(--card-r);overflow-x:auto}
|
||||
.figure svg{display:block;width:100%;height:auto;max-width:100%}
|
||||
.figure .cap{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--quiet)}
|
||||
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:8px 0 22px}
|
||||
.stat{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
|
||||
.stat .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:26px;color:var(--ember);line-height:1.1}
|
||||
.stat .k{margin-top:6px;font-size:13px;color:var(--quiet)}
|
||||
pre{margin:0 0 16px;padding:16px 18px;background:var(--code);color:var(--code-ink);border-radius:12px;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.6;overflow-x:auto}
|
||||
.foot{padding-block:28px 48px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;font-size:14px;color:var(--quiet)}
|
||||
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-tile);margin:8px 0 24px}
|
||||
@media (min-width:700px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
|
||||
.stat{padding:var(--tile-pad);background:var(--surface);border:1px solid var(--line);border-radius:var(--tile-r);min-width:0}
|
||||
.stat .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--fs-tile);color:var(--ember);line-height:1.1}
|
||||
.stat .k{margin-top:6px;font-size:14px;color:var(--quiet);line-height:1.35;text-wrap:balance}
|
||||
pre{margin:0 0 16px;padding:16px 18px;background:var(--code);color:var(--code-ink);border-radius:var(--card-r);font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.6;overflow-x:auto}
|
||||
.foot{padding-block:32px 48px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;font-size:14px;color:var(--quiet)}
|
||||
.mark{flex:0 0 auto}
|
||||
article section{display:none;border-top:0;padding-top:0}
|
||||
article section.active{display:block}
|
||||
body.all article section{display:block;border-top:1px solid var(--line);padding-top:34px}
|
||||
body.all article section{display:block;border-top:1px solid var(--line);padding-top:40px}
|
||||
body.all article section:first-of-type{border-top:0;padding-top:0}
|
||||
.toc li a.active{background:var(--tint);color:var(--ink);font-weight:600}
|
||||
.toc li a.active::before{color:var(--ember)}
|
||||
|
|
@ -116,8 +121,9 @@ body.all article section:first-of-type{border-top:0;padding-top:0}
|
|||
.pager a span{color:var(--quiet);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
|
||||
.pager a.next{margin-left:auto;text-align:right}
|
||||
body.all .pager{display:none}
|
||||
@media (max-width:600px){.pager{flex-direction:column}.pager a{max-width:none;justify-content:space-between}.pager a.next{margin-left:0}}
|
||||
@media (max-width:959px){
|
||||
.toc{position:sticky;top:0;z-index:5;background:var(--ground);margin-inline:-16px;padding:10px 16px;border-bottom:1px solid var(--line)}
|
||||
.toc{position:sticky;top:0;z-index:5;background:var(--ground);margin-inline:calc(-1 * var(--gutter));padding:10px var(--gutter);border-bottom:1px solid var(--line)}
|
||||
.toc ol{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
|
||||
.toc ol::-webkit-scrollbar{display:none}
|
||||
.toc li a{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;gap:6px}
|
||||
|
|
@ -182,10 +188,10 @@ body.all .pager{display:none}
|
|||
<p class="lead">Igneum is a proof-of-work blockchain mined on graphics cards, where the same cards prove every block with zero-knowledge proofs and sell proving to other chains.</p>
|
||||
<p>It runs the Ethereum virtual machine, so anything built for Ethereum runs on Igneum unchanged. Transactions are included in about one second, proven within about a minute at launch, and locked by miners within about two. There is no premine, no pre-sale, no treasury taken from emission, no stake anywhere in consensus, and no dependence on any other chain. Mining stays open to anyone with a GPU because the mining program itself changes every hour, so there is nothing for a specialised chip to be built for. Nothing in it ever needs a human to keep it that way.</p>
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="v">1 / s</div><div class="k">blocks at launch, rising to 10</div></div>
|
||||
<div class="stat"><div class="v">~60 s</div><div class="k">to a verified proof at launch</div></div>
|
||||
<div class="stat"><div class="v">0</div><div class="k">premine, pre-sale, allocation, stake</div></div>
|
||||
<div class="stat"><div class="v">100%</div><div class="k">of emission to miners and provers</div></div>
|
||||
<div class="stat"><div class="v">1 / s</div><div class="k">blocks, rising to 10</div></div>
|
||||
<div class="stat"><div class="v">~60 s</div><div class="k">to a proof at launch</div></div>
|
||||
<div class="stat"><div class="v">0</div><div class="k">premine or stake</div></div>
|
||||
<div class="stat"><div class="v">100%</div><div class="k">to miners and provers</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,10 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
|
||||
<style>
|
||||
:root{--obsidian:#0C0C0E;--graphite:#16161A;--line:#2A2A30;--line-2:#3A3A42;--ember:#F2541B;--molten:#FFB35C;--bone:#F4F1EC;--ash:#9A9A9E;--ink-2:#C9C7C2;--ember-ink:#0C0C0E;
|
||||
--fs-hero:clamp(32px,5.5vw,56px);--gutter:clamp(16px,4vw,32px);--max:1200px}
|
||||
/* one system for every page: container, gutter, section rhythm, card and tile boxes, heading scale (same tokens as the homepage) */
|
||||
--max:1200px;--gutter:clamp(16px,4vw,32px);--sec:clamp(56px,8vw,96px);--head:clamp(40px,6vw,64px);
|
||||
--card-pad:clamp(18px,3vw,28px);--card-r:18px;--tile-pad:18px 20px;--tile-r:14px;--gap:24px;--gap-tile:12px;
|
||||
--fs-hero:clamp(40px,7vw,76px);--fs-h1:clamp(32px,5.5vw,56px);--fs-h2:clamp(28px,4.2vw,44px);--fs-h3:clamp(18px,2vw,22px);--fs-tile:clamp(20px,2.2vw,26px)}
|
||||
*{box-sizing:border-box}
|
||||
html{scroll-behavior:smooth}
|
||||
body{margin:0;background:var(--obsidian);color:var(--bone);font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
|
|
@ -44,13 +47,13 @@ img,svg,canvas{max-width:100%}
|
|||
.mono{font-family:'IBM Plex Mono',monospace}
|
||||
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}
|
||||
h1,h2,h3{font-family:'Unbounded',sans-serif;margin:0;line-height:1.08;text-wrap:balance}
|
||||
h1{font-weight:900;font-size:var(--fs-hero);letter-spacing:-.01em}
|
||||
h2{font-weight:700;font-size:clamp(18px,2vw,22px)}
|
||||
h1{font-weight:900;font-size:var(--fs-h1);letter-spacing:-.01em}
|
||||
h2{font-weight:700;font-size:var(--fs-h3)}
|
||||
p{margin:0}
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:10px;font-weight:600;font-size:16px;border:1px solid var(--line-2);color:var(--bone);background:transparent;cursor:pointer}
|
||||
.btn.primary{background:var(--ember);color:var(--ember-ink);border-color:var(--ember)}
|
||||
.btn.primary:hover{background:#FF6A2B;border-color:#FF6A2B;color:var(--ember-ink)}
|
||||
.card{background:var(--graphite);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3vw,28px);min-width:0}
|
||||
.card{background:var(--graphite);border:1px solid var(--line);border-radius:var(--card-r);padding:var(--card-pad);min-width:0}
|
||||
|
||||
/* nav, same as the homepage */
|
||||
.nav{position:sticky;top:0;z-index:20;background:rgba(12,12,14,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(42,42,48,.6)}
|
||||
|
|
@ -70,13 +73,15 @@ p{margin:0}
|
|||
}
|
||||
|
||||
/* page */
|
||||
.head{padding-block:clamp(36px,6vw,64px) clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:14px}
|
||||
.head{padding-block:var(--head) var(--gap);display:flex;flex-direction:column;gap:14px}
|
||||
.head p{color:var(--ink-2);max-width:60ch;font-size:16px}
|
||||
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin-bottom:24px}
|
||||
.cell{background:var(--graphite);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
|
||||
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-tile);margin-bottom:var(--gap)}
|
||||
@media (max-width:700px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||||
.cell{background:var(--graphite);border:1px solid var(--line);border-radius:var(--tile-r);padding:var(--tile-pad);display:flex;flex-direction:column;gap:6px;min-width:0}
|
||||
.cell .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
|
||||
.cell .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(18px,2.2vw,24px);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.cell .s{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ash)}
|
||||
.cell .v{font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--fs-tile);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.cell .v.name{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500}
|
||||
.cell .s{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ash);text-wrap:balance}
|
||||
.cell.status .v{display:flex;align-items:center;gap:10px}
|
||||
.dot{width:10px;height:10px;border-radius:50%;background:var(--molten);display:inline-block;flex:0 0 10px;animation:pulse 2s ease-in-out infinite}
|
||||
.off .dot{background:var(--ash);animation:none}
|
||||
|
|
@ -93,7 +98,7 @@ p{margin:0}
|
|||
.legend span{display:inline-flex;align-items:center;gap:8px}
|
||||
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}
|
||||
|
||||
.two{display:grid;gap:24px;grid-template-columns:1fr;margin-top:24px}
|
||||
.two{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:var(--gap)}
|
||||
@media (min-width:900px){.two{grid-template-columns:1.1fr .9fr}}
|
||||
.tbl{overflow-x:auto;margin-top:12px;-webkit-overflow-scrolling:touch}
|
||||
table{border-collapse:collapse;width:100%;font-size:14px}
|
||||
|
|
@ -112,7 +117,7 @@ tr:last-child td{border-bottom:0}
|
|||
.empty{color:var(--ash);font-size:14px;padding:12px 0}
|
||||
#spark{display:block;width:100%;height:120px;border-radius:12px;background:var(--obsidian);margin-top:12px}
|
||||
.note{font-size:13px;color:var(--ash);margin-top:14px}
|
||||
main{padding-bottom:clamp(56px,8vw,96px)}
|
||||
main{padding-bottom:var(--sec)}
|
||||
|
||||
/* footer, same as the homepage */
|
||||
footer{border-top:1px solid var(--line);padding-block:48px 32px}
|
||||
|
|
@ -123,6 +128,7 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
|
|||
.foot-col .eyebrow{margin-bottom:6px}
|
||||
.foot-col a{color:var(--ink-2)}
|
||||
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:24px;font-size:13px;color:var(--ash)}
|
||||
.foot-base span{text-wrap:balance}
|
||||
</style>
|
||||
</head>
|
||||
<body class="off">
|
||||
|
|
@ -158,7 +164,7 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
|
|||
|
||||
<div class="strip" aria-live="polite">
|
||||
<div class="cell status"><div class="k">Status</div><div class="v"><span class="dot"></span><span id="st-status">OFFLINE</span></div><div class="s" id="st-age">no observer update yet</div></div>
|
||||
<div class="cell"><div class="k">Network</div><div class="v mono" id="st-network" style="font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500">igneum-devnet</div><div class="s" id="st-node">node</div></div>
|
||||
<div class="cell"><div class="k">Network</div><div class="v name" id="st-network">igneum-devnet</div><div class="s" id="st-node">node</div></div>
|
||||
<div class="cell"><div class="k">Blocks / s</div><div class="v" id="st-bps">0.00</div><div class="s">over 60 s</div></div>
|
||||
<div class="cell"><div class="k">Blue score</div><div class="v" id="st-blue">0</div><div class="s" id="st-count">0 blocks</div></div>
|
||||
<div class="cell"><div class="k">Difficulty</div><div class="v" id="st-diff">0</div><div class="s">target per block</div></div>
|
||||
|
|
@ -179,7 +185,7 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
|
|||
<span><i class="sw" style="border:3px solid var(--ember);border-radius:50%;background:transparent"></i>locked checkpoint, final</span>
|
||||
<span><i class="sw" style="border:2px solid var(--molten);box-shadow:0 0 8px rgba(255,179,92,.7)"></i>just arrived</span>
|
||||
<span><i class="sw" style="width:22px;height:0;border-top:1px solid var(--ash)"></i>parent edge</span>
|
||||
<span class="mono" style="color:var(--molten)">2ea5116e</span><span style="margin-left:-12px">miner short id, one lane each</span>
|
||||
<span><span class="mono" style="color:var(--molten)">2ea5116e</span>miner short id, one lane each</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -200,7 +206,7 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:24px">
|
||||
<div class="card" style="margin-top:var(--gap)">
|
||||
<div class="viz-head"><h2>Blocks per minute</h2><div class="eyebrow" id="spark-range">last hour</div></div>
|
||||
<canvas id="spark" aria-hidden="true"></canvas>
|
||||
<p class="note" id="spark-note">Counted by the observer as blocks arrive.</p>
|
||||
|
|
@ -248,7 +254,7 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
|
|||
// formatting
|
||||
function $(id){return document.getElementById(id);}
|
||||
function compact(n){if(n===null||n===undefined||isNaN(n))return '0';var a=Math.abs(n);if(a>=1e12)return (n/1e12).toFixed(2)+'T';if(a>=1e9)return (n/1e9).toFixed(2)+'G';if(a>=1e6)return (n/1e6).toFixed(2)+'M';if(a>=1e3)return (n/1e3).toFixed(1)+'k';return String(Math.round(n));}
|
||||
function hashrate(n){if(n===null||n===undefined)return 'n/a';var u=['H/s','kH/s','MH/s','GH/s','TH/s'],i=0;while(n>=1000&&i<u.length-1){n/=1000;i++;}return (i?n.toFixed(2):Math.round(n))+' '+u[i];}
|
||||
function hashrate(n){if(n===null||n===undefined)return 'n/a';var u=['H/s','kH/s','MH/s','GH/s','TH/s'],i=0;while(n>=1000&&i<u.length-1){n/=1000;i++;}return (i?n.toFixed(1):Math.round(n))+' '+u[i];}
|
||||
function rel(ms){var s=Math.max(0,Math.round(ms/1000));if(s<60)return s+' s ago';var m=Math.floor(s/60);if(m<60)return m+' min ago';var h=Math.floor(m/60);if(h<24)return h+' h '+(m%60)+' min ago';return Math.floor(h/24)+' d ago';}
|
||||
function esc(s){return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
|
|
@ -335,7 +341,7 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
|
|||
setStatus(on,s.age_s===null?'no observer update yet':'observer updated '+rel(s.age_s*1000));
|
||||
$('st-network').textContent=s.network||'igneum-devnet';$('st-node').textContent=s.node_version?'node '+s.node_version:'node';
|
||||
$('st-bps').textContent=(s.blocks_per_second_60s||0).toFixed(2);
|
||||
$('st-blue').textContent=compact(s.blue_score);$('st-count').textContent=compact(s.block_count)+' blocks, '+compact(s.header_count)+' headers';
|
||||
$('st-blue').textContent=compact(s.blue_score);$('st-count').textContent=compact(s.block_count)+' blocks';
|
||||
$('st-diff').textContent=compact(s.difficulty);$('st-hps').textContent=hashrate(s.hashes_per_second_estimate);
|
||||
$('st-miners').textContent=s.miners_10m;$('st-peers').textContent=s.peers===null?'0':s.peers;$('st-mempool').textContent='mempool '+(s.mempool||0);
|
||||
var now=new Date(d.now).getTime();
|
||||
|
|
|
|||
Loading…
Reference in a new issue