Skip to content

Commit 6bf1ec7

Browse files
IanButterworthclaude
IanButterworth
and
claude
committed
docs: compact the masthead, drop the stat tiles and the inner scroll
The header is now a single line with a one-sentence lede, the notes about column semantics moved to the hint under the chart, and the four summary tiles are gone. The matrix takes its full height so the page scrolls instead of a nested viewport; the column header sticks to the top in Fit mode, and only Compact and Wide, whose columns overflow the card, scroll horizontally. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
1 parent 3136318 commit 6bf1ec7

3 files changed

Lines changed: 24 additions & 51 deletions

File tree

‎docs/src/app.js‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -501,6 +501,8 @@
501501
updateColumnWidth();
502502
renderHeader();
503503
renderRows(rows);
504+
const sc = $("matrix-scroll");
505+
sc.classList.toggle("overflowing", LABEL_W + NCOL * COL_W > sc.clientWidth);
504506
} else {
505507
$("matrix-scroll").hidden = true;
506508
$("table-view").hidden = false;
@@ -546,19 +548,7 @@
546548
}
547549

548550
// ---------- KPIs and footer ----------
549-
function renderKpis() {
550-
$("kpi-releases").textContent = NCOL;
551-
$("kpi-range").textContent = "Julia " + versions[0] + " → " + versions[NCOL - 1];
552-
const libs = stdlibs.filter((s) => !s.jll);
553-
const current = stdlibs.filter((s) => s.entries[NCOL - 1]);
554-
$("kpi-stdlibs").textContent = stdlibs.length;
555-
const upgradable = current.filter((s) => s.entries[NCOL - 1].u).length;
556-
$("kpi-stdlibs-sub").textContent = current.length + " in the latest release" + (upgradable ? " (" + upgradable + " upgradable)" : "") + " · " + stdlibs.filter((s) => !s.registered).length + " never registered";
557-
$("kpi-jlls").textContent = stdlibs.length - libs.length;
558-
const total = stdlibs.reduce((a, s) => a + s.bumps, 0);
559-
const top = stdlibs.slice().sort((a, b) => b.bumps - a.bumps)[0];
560-
$("kpi-bumps").textContent = total;
561-
$("kpi-bumps-sub").textContent = "most: " + top.name + " (" + top.bumps + ")";
551+
function renderMeta() {
562552
const meta = [];
563553
if (DATA.package_version) meta.push("HistoricalStdlibVersions v" + DATA.package_version);
564554
if (DATA.data_updated) meta.push("data updated " + DATA.data_updated);
@@ -628,7 +618,7 @@
628618
});
629619

630620
readHash();
631-
renderKpis();
621+
renderMeta();
632622
render();
633623
if (state.release !== null) requestAnimationFrame(() => scrollColumnIntoView(state.release));
634624
})();

‎docs/src/index.html‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,8 @@
1616
<div class="title-block">
1717
<h1>Julia stdlib versions</h1>
1818
<p class="lede">
19-
Which version of each standard library shipped with each Julia release,
20-
as recorded by
19+
Which version of each standard library shipped with each Julia release, as recorded by
2120
<a href="https://github.com/JuliaPackaging/HistoricalStdlibVersions.jl">HistoricalStdlibVersions.jl</a>.
22-
Only releases where the stdlib set changed are listed, so a column stands
23-
for every release from that version up to the next column. Hatched bars
24-
are stdlibs that ship with Julia but can be upgraded from the General
25-
registry. The newest column may come from a nightly build.
2621
</p>
2722
</div>
2823
<div class="masthead-actions">
@@ -37,13 +32,6 @@ <h1>Julia stdlib versions</h1>
3732
</header>
3833

3934
<main class="page">
40-
<section class="kpis" aria-label="Summary">
41-
<div class="tile"><div class="tile-value" id="kpi-releases">–</div><div class="tile-label">Julia releases tracked</div><div class="tile-sub" id="kpi-range"></div></div>
42-
<div class="tile"><div class="tile-value" id="kpi-stdlibs">–</div><div class="tile-label">Standard libraries</div><div class="tile-sub" id="kpi-stdlibs-sub"></div></div>
43-
<div class="tile"><div class="tile-value" id="kpi-jlls">–</div><div class="tile-label">JLL binary wrappers</div><div class="tile-sub">bundled since Julia 1.6</div></div>
44-
<div class="tile"><div class="tile-value" id="kpi-bumps">–</div><div class="tile-label">Version bumps recorded</div><div class="tile-sub" id="kpi-bumps-sub"></div></div>
45-
</section>
46-
4735
<section class="controls" aria-label="Filters">
4836
<label class="search">
4937
<svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m13 13 4.5 4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
@@ -98,7 +86,12 @@ <h1>Julia stdlib versions</h1>
9886
</div>
9987
</div>
10088
<div id="table-view" class="table-view" hidden></div>
101-
<p class="hint">Hover a bar for details. Click a column to see what changed in that release, or a row name for its full history.</p>
89+
<p class="hint">
90+
Only releases where the stdlib set changed are listed, so a column stands for every release
91+
from that version up to the next column. The newest column may come from a nightly build.
92+
Hover a bar for details. Click a column to see what changed in that release, or a row name
93+
for its full history.
94+
</p>
10295
</section>
10396

10497
<aside class="panel" id="panel" hidden aria-live="polite">

‎docs/src/style.css‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,12 @@ button, input, select { font: inherit; color: inherit; }
9595

9696
.masthead { border-bottom: 1px solid var(--border); background: var(--surface); }
9797
.masthead-inner {
98-
max-width: 1440px; margin: 0 auto; padding: 28px 16px 22px;
99-
display: flex; gap: 24px; align-items: flex-start; justify-content: space-between;
98+
max-width: 1440px; margin: 0 auto; padding: 12px 16px;
99+
display: flex; gap: 16px; align-items: center; justify-content: space-between;
100100
}
101-
.masthead h1 { margin: 0 0 6px; font-size: 26px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
102-
.lede { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 14.5px; }
101+
.title-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
102+
.masthead h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
103+
.lede { margin: 0; color: var(--ink-2); font-size: 13.5px; }
103104
.masthead-actions { display: flex; gap: 8px; flex-shrink: 0; }
104105

105106
.icon-btn {
@@ -116,17 +117,7 @@ button, input, select { font: inherit; color: inherit; }
116117
:root:not([data-theme="light"]) .icon-btn .moon { display: block; }
117118
}
118119

119-
.page { max-width: 1440px; margin: 0 auto; padding: 20px 16px 40px; }
120-
121-
.kpis {
122-
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
123-
}
124-
.tile {
125-
background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px 12px;
126-
}
127-
.tile-value { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
128-
.tile-label { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
129-
.tile-sub { color: var(--muted); font-size: 12px; margin-top: 2px; min-height: 1.4em; }
120+
.page { max-width: 1440px; margin: 0 auto; padding: 14px 16px 40px; }
130121

131122
.controls {
132123
display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px;
@@ -153,7 +144,7 @@ button, input, select { font: inherit; color: inherit; }
153144

154145
.matrix-card {
155146
background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
156-
padding: 12px 0 8px; overflow: hidden;
147+
padding: 12px 0 8px; overflow: clip;
157148
}
158149
.legend {
159150
display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 16px 10px; color: var(--ink-2); font-size: 12.5px;
@@ -166,11 +157,13 @@ button, input, select { font: inherit; color: inherit; }
166157
.sw-unreg { width: 26px; height: 0; border-radius: 0; border-bottom: 2px dotted var(--muted); }
167158
.sw-selected { background: var(--accent-wash-strong); border: 1px solid var(--accent); box-sizing: border-box; }
168159

160+
/* The matrix takes its full height and the page scrolls. Only when the columns are wider
161+
than the card (Compact / Wide) does it become a horizontal scroll container. */
169162
.matrix-scroll {
170-
position: relative; overflow: auto; max-height: calc(100vh - 140px); min-height: 320px;
163+
position: relative; overflow: visible;
171164
border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid);
172-
overscroll-behavior: contain;
173165
}
166+
.matrix-scroll.overflowing { overflow-x: auto; overscroll-behavior-x: contain; }
174167
/* Sticky header row and sticky label column: flex rows so each sticky item is
175168
constrained by the full-width row, not by a grid cell. */
176169
.matrix-inner { width: max-content; }
@@ -271,7 +264,7 @@ svg text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
271264
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; }
272265

273266
/* Table view */
274-
.table-view { overflow: auto; max-height: calc(100vh - 140px); }
267+
.table-view { overflow-x: auto; }
275268
.table-view table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
276269
.table-view th, .table-view td {
277270
padding: 4px 8px; white-space: nowrap; border-bottom: 1px solid var(--grid); text-align: left;
@@ -291,13 +284,10 @@ svg text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
291284
}
292285

293286
@media (max-width: 900px) {
294-
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
295-
.masthead-inner { flex-direction: column; gap: 12px; }
287+
.masthead-inner { align-items: flex-start; }
296288
.view-seg { margin-left: 0; }
297289
}
298290
@media (max-width: 520px) {
299-
.kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
300-
.tile-value { font-size: 24px; }
301291
.search { min-width: 0; flex: 1 1 100%; }
302292
}
303293
@media (prefers-reduced-motion: reduce) { .run { transition: none; } }

0 commit comments

Comments
 (0)