4d9fa1c026
Every Sirius.X page had a leftover
@media (min-width: 721px) { header.hero, .wrap { padding-left: calc(var(--sn-w) + 1.2rem) } }
that shifted the whole reading column right by the sidebar width. On a
1400px viewport that pushed the "Names on the chain" hero and every
section off-axis — the search input, the Try it cards, the Pantheon
grid all sat right of centre while the sidebar hogged the empty left
gutter. The sidenav is a pointer-events:none overlay at opacity 0.35
now, so text peeking under the semi-transparent rail is by design;
padding the content away from it defeats the whole point of an
overlay design and creates the shifted-body layout the user flagged
in the screenshot.
Removed on index, tld, docs, admin, brand and theseus/. Content
returns to the middle of the viewport regardless of sidebar width.
159 lines
11 KiB
HTML
159 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Market — names for sale on Sirius.X</title>
|
||
<meta name="description" content="Buy and sell BCNR names. Every sale is one Bitcoin Cash transaction: the seller is paid in the same transaction that hands you the certificate, or not at all.">
|
||
<link rel="icon" href="../assets/favicon.svg" type="image/svg+xml">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{--bg:#050810;--panel:#141a24;--panel2:#0a0f1c;--line:rgba(255,255,255,.06);--sky-mid:#0a0f1c;--sky-rim:#131a2a;
|
||
--ink:#f1f4fa;--mut:#b8c2d4;--dim:#6a7488;--acid:#d6ff3d;--ok:#4fd1a5;--taken:#f6768a;--warn:#ffc75f;
|
||
--serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,var(--sky-rim) 0%,transparent 60%),var(--bg);background-attachment:fixed;color:var(--ink);font:15px/1.55 var(--sans);min-height:100vh}
|
||
h1,h2,h3{font-family:var(--serif)}
|
||
a{color:var(--acid)}
|
||
/* Ubuntu reader-alt — swap when <html data-font-cmp="ubuntu"> */
|
||
html[data-font-cmp="ubuntu"] body,
|
||
html[data-font-cmp="ubuntu"] h1, html[data-font-cmp="ubuntu"] h2, html[data-font-cmp="ubuntu"] h3,
|
||
html[data-font-cmp="ubuntu"] p, html[data-font-cmp="ubuntu"] a, html[data-font-cmp="ubuntu"] button,
|
||
html[data-font-cmp="ubuntu"] span, html[data-font-cmp="ubuntu"] div,
|
||
html[data-font-cmp="ubuntu"] label, html[data-font-cmp="ubuntu"] input, html[data-font-cmp="ubuntu"] li{
|
||
font-family:'Ubuntu',system-ui,sans-serif !important
|
||
}
|
||
html[data-font-cmp="ubuntu"] code, html[data-font-cmp="ubuntu"] .mono{
|
||
font-family:var(--mono) !important
|
||
}
|
||
/* Font picker pill — floats in the top-right corner of the page,
|
||
just under the sticky nav's sign-in button. */
|
||
.font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;
|
||
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;
|
||
font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
|
||
.font-picker button{background:transparent;border:none;color:var(--dim);
|
||
padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;
|
||
letter-spacing:inherit;text-transform:inherit;transition:color .12s}
|
||
.font-picker button:hover{color:var(--ink)}
|
||
.font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600}
|
||
.font-picker-float{position:fixed;top:56px;right:20px;z-index:30;
|
||
background:rgba(11,14,20,.82);backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
|
||
.topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)}
|
||
.topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px}
|
||
.topnav .brand .g{color:var(--acid)}
|
||
.topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
|
||
.topnav a:hover{color:var(--ink);background:var(--panel)}
|
||
.topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
|
||
.topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
|
||
.wrap{max-width:900px;margin:0 auto;padding:0 1.2rem 3rem}
|
||
header.hero{text-align:center;padding:3rem 1.2rem 1rem}
|
||
.mark{font-size:44px;line-height:1}
|
||
h1{font-size:clamp(1.6rem,4.5vw,2.2rem);margin:.3rem 0}
|
||
h1 .g{color:var(--acid)}
|
||
.tag{color:var(--mut);max-width:620px;margin:0 auto}
|
||
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 8px}
|
||
input[type=text],select{padding:9px 12px;border-radius:10px;border:1px solid #ffffff22;background:#0e131b;color:var(--ink);font:inherit;font-size:14px;outline:none}
|
||
select{appearance:auto}
|
||
.status{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--mut);margin-top:10px}
|
||
.status.err{border-left:3px solid var(--taken);color:var(--taken)}
|
||
.row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 16px;align-items:center;padding:14px 16px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;margin-top:8px}
|
||
.row .n{font-family:var(--mono);font-size:16px}
|
||
.row .n .tld{color:var(--acid)}
|
||
.row .price{font-family:var(--mono);text-align:right}
|
||
.row .price b{font-size:16px}
|
||
.row .price span{display:block;color:var(--dim);font-size:12px}
|
||
.row .meta{grid-column:1/-1;color:var(--dim);font-size:12px;display:flex;gap:10px;flex-wrap:wrap}
|
||
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;background:#4b7bec;color:#fff;font:inherit;font-size:14px;border:none;cursor:pointer;text-decoration:none;line-height:1.2}
|
||
.btn.acid{background:var(--acid);color:#0b0e14;font-weight:600}
|
||
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
|
||
.btn.small{padding:6px 11px;font-size:12.5px}
|
||
.btn:disabled{opacity:.45;cursor:not-allowed}
|
||
.badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;font-weight:600;background:rgba(214,255,61,.14);color:var(--acid)}
|
||
.empty{padding:28px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:12px;margin-top:10px}
|
||
.empty.big{padding:40px 24px;border-style:solid;background:var(--panel2)}
|
||
.empty.big .ico{font-size:34px;line-height:1;opacity:.8}
|
||
.empty.big h3{margin:.6rem 0 .3rem;font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
|
||
.empty.big p{margin:0 auto;max-width:460px;font-size:14px}
|
||
.empty.big .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
|
||
.toolbar[hidden],.status[hidden]{display:none}
|
||
@media (max-width:560px){.row > div:nth-child(3){grid-column:1/-1}.row > div:nth-child(3) .btn{width:100%;justify-content:center}}
|
||
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid);border-radius:10px;padding:14px 18px;color:var(--mut);font-size:14px;margin-top:1.6rem}
|
||
.note b{color:var(--ink)}
|
||
/* buy dialog */
|
||
.modal{position:fixed;inset:0;background:rgba(6,9,14,.85);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow-y:auto;z-index:50}
|
||
.modal.open{display:flex}
|
||
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:560px;width:100%;padding:24px 26px;position:relative}
|
||
.sheet h3{margin:0 0 .3rem;font-family:var(--mono);font-size:1.2rem}
|
||
.sheet .sub{color:var(--mut);font-size:13px;margin:0 0 1rem}
|
||
.sheet .x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer}
|
||
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:13.5px}
|
||
.kv .k{color:var(--dim)} .kv .v{font-family:var(--mono);word-break:break-all}
|
||
.steps{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--mut);background:#0e131b;border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:150px;overflow:auto;display:none}
|
||
.steps.on{display:block}
|
||
.steps div::before{content:"› ";color:var(--acid)}
|
||
.msg{font-size:13px;margin-top:12px} .msg.err{color:var(--taken)} .msg.ok{color:var(--ok)}
|
||
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
|
||
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
|
||
@media (max-width:560px){.row{grid-template-columns:1fr auto}.row .price{grid-column:1/-1;text-align:left}}
|
||
</style>
|
||
<script src="../js/i18n.js?v=20260921c"></script>
|
||
</head>
|
||
<body>
|
||
<nav class="topnav">
|
||
<a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a>
|
||
<a href="../tld.html">🌐 TLD</a>
|
||
<a href="./" class="here">🛒 Market</a>
|
||
<a href="../theseus/"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus<span class="g">.X</span></a>
|
||
<a href="../portal.html" class="portal">🔑 Sign in</a>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<div class="mark">🛒</div>
|
||
<h1>Names <span class="g">for sale</span></h1>
|
||
<p class="tag">Every sale is a single Bitcoin Cash transaction. The seller signed an offer that pays them only when the
|
||
certificate moves to you — you add your coins, sign, broadcast. No escrow, no middleman, no way for either side to cheat.</p>
|
||
</header>
|
||
|
||
<div class="wrap">
|
||
<div class="toolbar">
|
||
<input type="text" id="q" placeholder="Filter names…" autocomplete="off" style="max-width:300px">
|
||
<select id="sort"><option value="price">Sort: price</option><option value="name">Sort: name</option><option value="new">Sort: newest</option></select>
|
||
<select id="tld"><option value="">All TLDs</option></select>
|
||
<span id="count" style="color:var(--dim);font-size:12.5px"></span>
|
||
</div>
|
||
<div class="status" id="status">Loading listings…</div>
|
||
<div id="list"></div>
|
||
|
||
<div class="note"><b>Selling a name?</b> Open it in your <a href="../portal.html">dashboard</a>, choose <b>Sell</b>, set a price. The listing is a signed offer stored by the gateway; cancelling it moves your certificate once so the old offer can never be used.</div>
|
||
</div>
|
||
|
||
<div class="modal" id="buy">
|
||
<div class="sheet">
|
||
<button class="x" id="buy-close" title="close">×</button>
|
||
<h3 id="buy-name">—</h3>
|
||
<p class="sub">One transaction: your coins pay the seller, the certificate lands in your wallet, and the registry is told about the new owner. Records stay as they are — you can change them in the dashboard right after.</p>
|
||
<div class="kv" id="buy-kv"></div>
|
||
<div class="steps" id="buy-steps"></div>
|
||
<div class="msg" id="buy-msg"></div>
|
||
<div class="actions">
|
||
<button class="btn ghost" id="buy-cancel">Cancel</button>
|
||
<a class="btn ghost" id="buy-signin" href="../portal.html" hidden>Sign in to buy →</a>
|
||
<button class="btn acid" id="buy-go" disabled>Buy — sign & broadcast</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer id="site-footer"></footer>
|
||
|
||
<script type="importmap">
|
||
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js?v=20260920usd" } }
|
||
</script>
|
||
<script src="../js/session.js?v=20260917dash"></script>
|
||
<script src="../js/pricing.js?v=20260920bits"></script>
|
||
<script type="module" src="../js/market.js?v=20260920usd"></script>
|
||
<script defer src="../js/theme.js?v=20260921mob"></script>
|
||
<script defer src="../js/site-footer.js?v=20260917market"></script>
|
||
<script defer src="../js/profile-menu.js?v=20260921mob"></script>
|
||
</body>
|
||
</html>
|