Skip to content

index: an index that stays, three parts, and a shorter phone hero #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aledbf merged 1 commit into from
Oct 22, 2026
Merged

index: an index that stays, three parts, and a shorter phone hero #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 39 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,21 @@
.lockup.big { font-size: 40px; gap: 1rem; } .lockup.big img { width: 64px; height: 64px; }
:root[data-theme='light'] .on-dark, :root:not([data-theme='light']) .on-light { display: none !important; }

/* The index: every section a click away, while the page scrolls. */
.index { position: sticky; top: 0; z-index: 4; background: color-mix(in srgb, var(--spin-page) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--spin-border); }
.index .wrap { display: flex; gap: .25rem 1rem; padding-block: .5rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.index a { font: 500 12px var(--spin-font-mono); color: var(--spin-muted); text-decoration: none; padding: .35rem .15rem; }
.index a:hover { color: var(--spin-accent-text); }
.index a[href="#in-use"], .index a[href="#decisions"], .index a[href="#checks"] { color: var(--spin-label); margin-left: .5rem; }
section, .part { scroll-margin-top: 3rem; }

/* A part: what follows is sample content, a decision, or a check. */
.part { display: flex; gap: 1rem; align-items: baseline; margin-top: 4rem; padding: 1.25rem 0; border-top: 2px solid var(--spin-border-strong); }
.part .num { font: 600 2rem var(--spin-font-mono); color: var(--spin-label); line-height: 1; }
.part h2 { margin: 0; font-size: 1.4rem; } .part p { margin: .25rem 0 0; max-width: 52rem; }
#page > .part:first-child { margin-top: 1.5rem; border-top: 0; }
.perc-wrap summary { cursor: pointer; font: 500 13px var(--spin-font-mono); padding: .5rem 0; color: var(--spin-text); }

/* The mark's guide */
.guide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; }
.tiles { display: grid; gap: 1rem; }
Expand Down Expand Up @@ -147,7 +162,8 @@
.hero, .doc, .dash { grid-template-columns: 1fr; }
.doc nav, .doc aside, .dash nav { display: none; }
.hero { padding: 2rem 1rem; } .doc article { padding: 1.25rem 1rem; }
.hero h1 { font-size: 1.75rem; } .hero img { max-width: 10rem; }
.hero { gap: 1rem; padding: 1.5rem 1rem; } .hero h1 { font-size: 1.6rem; margin-top: .25rem; } .hero img { max-width: 6.5rem; }
.part { margin-top: 2.5rem; } .part .num { font-size: 1.5rem; }
.wrap { padding-inline: 1rem; } table { font-size: 13px; }
.site header .search { display: none; }
.btn, .dash input, .dash .btn { min-height: var(--spin-target-touch); }
Expand All @@ -172,9 +188,18 @@ <h1>Spin brand system</h1>
</div>
</div>
</header>
<nav class="index only-full" aria-label="On this page">
<div class="wrap">
<a href="#in-use">1 路 In use</a><a href="#site">Site</a><a href="#dashboard">Dashboard</a><a href="#app">App</a>
<a href="#decisions">2 路 Decisions</a><a href="#mark">Mark</a><a href="#palette-section">Palette</a>
<a href="#checks">3 路 Checks</a><a href="#widths">Widths</a><a href="#perception">Perception</a>
</div>
</nav>
<div class="wrap" id="page">

<section>
<div class="part only-full" id="in-use"><span class="num">1</span><div><h2>In use</h2><p class="muted">Sample screens drawn from the tokens. The words, rows and names in them are fixtures, there to show the palette at work: nothing in them is a decision.</p></div></div>

<section id="site">
<span class="label">The site</span>
<div class="site">
<header><img class="on-dark" src="logos/mark-256.png" alt=""><img class="on-light" src="logos/mark-clear-256.png" alt=""><b>Spin</b><span class="search">Search</span></header>
Expand Down Expand Up @@ -207,7 +232,7 @@ <h2>Snapshots and rollback</h2>
</div>
</section>

<section>
<section id="dashboard">
<span class="label">The dashboard</span>
<div class="dash">
<nav><div class="cap">Work</div><a class="current" href="#">Workspaces</a><a href="#">Snapshots</a><a href="#">Teams</a><div class="cap">Administer</div><a href="#">Hosts</a><a href="#">Settings</a></nav>
Expand Down Expand Up @@ -235,7 +260,9 @@ <h3 style="margin:0">Workspaces</h3>
<div class="shots" id="shots"></div>
</section>

<section class="only-full">
<div class="part only-full" id="decisions"><span class="num">2</span><div><h2>Decisions</h2><p class="muted">What the brand is: the mark and how it is used, and the palette, each color by what it is for. These are what palette.toml and the mark's cut hold.</p></div></div>

<section class="only-full" id="mark">
<span class="label">The mark</span>
<div class="guide">
<div class="tiles">
Expand All @@ -262,12 +289,14 @@ <h3>Not</h3>
</div>
</section>

<section class="only-full">
<section class="only-full" id="palette-section">
<span class="label">Palette</span>
<div id="palette"></div>
</section>

<section class="only-full">
<div class="part only-full" id="checks"><span class="num">3</span><div><h2>Checks</h2><p class="muted">What holds the decisions: the same page at a phone's and a tablet's width, and every pair of colors task palette measures.</p></div></div>

<section class="only-full" id="widths">
<span class="label">Widths</span>
<p class="muted">This page at a phone's and a tablet's width (<code>layout.phone</code>, <code>layout.tablet</code>), in the mode and the view chosen above.</p>
<div class="frames">
Expand All @@ -276,10 +305,10 @@ <h3>Not</h3>
</div>
</section>

<section class="only-full">
<section class="only-full" id="perception">
<span class="label">Perception</span>
<p class="muted">Every pair <code>task palette</code> holds, as drawn and in each view (<code>dist/perception.js</code>). Contrast is WCAG 2.2's; distance is CIEDE2000.</p>
<table class="perc" id="perc"></table>
<details class="perc-wrap"><summary id="perc-summary">Every pair</summary><table class="perc" id="perc"></table></details>
</section>
</div>

Expand Down Expand Up @@ -328,6 +357,8 @@ <h3>Not</h3>
perception.map((r) => `<tr><td>${r.Mode}</td><td>${r.Kind}</td><td>${r.What}</td><td>${r.Distance ? r.Floor + '/' + r.Worst : r.Floor + ':1'}</td>` +
(r.Distance ? views.map((v) => `<td class="${r.Distance[v] < (v === 'drawn' ? r.Floor : r.Worst) ? 'fail' : ''}">${r.Distance[v]}</td>`).join('')
: `<td class="${r.OK ? '' : 'fail'}" colspan="8">${r.Contrast}:1</td>`) + '</tr>').join('');
const held = perception.filter((r) => r.OK).length;
document.getElementById('perc-summary').textContent = `Every pair: ${held} of ${perception.length} hold their floors - open the table`;
apply();
</script>
</body>
Expand Down
Loading