openvibers/openvibe.shared Commits

Shared 4.1.8: four showcase steps sit two by two below four columns (#76)

OP OpenVibers committed 29 days ago · a665d078ee · 5 files, +10 −1

**Four showcase steps sit two by two below four columns (openvibe-shared 4.1.8).**

**Found:** while reviewing every home page. On openvibe.zone ("From nothing to a bucket") and openvibe.download ("How it works"), four steps laid out as three and one: `auto-fit` with `minmax(280px,1fr)` fits three columns in a section about 1,060 px wide, which left step 4 alone on its own row. 4.1.5 fixed the same pattern for four cards but not for steps.

**Change (`showcase.js`, built into `showcase.css`):** inside a section from 584 to 1,191 px wide (`.sc-sec` is the container), `sc-steps` with exactly four items uses `repeat(2, minmax(0, 1fr))`. Four steps across need 1,192 px. Three, five and more steps, and narrow phones, are unchanged.

**Checked:** the rule injected into the live openvibe.zone at 1,280 px gives a balanced 2 × 2. At 390 px there is still one column.

**Test:** `showcase.test.js` checks the rule. The suite passes (58 of 59 files; the floating-promises check skips without acorn, as in CI's local run).

Changes

ddiff --git a/CHANGELOG.md b/CHANGELOG.md
iindex 72de9cb..f666040 100644
---- a/CHANGELOG.md
++++ b/CHANGELOG.md
@@@ -4,6 +4,12 @@ All notable changes to `openvibe-shared`. Versions follow [semver](https://semve
  breaking change to any exported module, browser global or served file name is a new major.
  A release is the git tag `vX.Y.Z`; consumers pin the tag's tarball (see README).
  
++## 4.1.8 — 2026-10-15
++
++- **Four showcase steps sit two by two below four columns.** In a section narrower than four steps across (under
++  1192 px), `sc-steps` with exactly four items uses two columns instead of `auto-fit`'s three and one, which left
++  step 4 alone on openvibe.zone and openvibe.download. Three, five and more steps are unchanged.
++
  ## 4.1.7 — 2026-10-15
  
  - **`shell.page()` removes the browser's body margin.** A site with no stylesheet of its own (openvibe.events,
ddiff --git a/package.json b/package.json
iindex 6c3443b..7749c29 100644
---- a/package.json
++++ b/package.json
@@@ -1,6 +1,6 @@
  {
    "name": "openvibe-shared",
--  "version": "4.1.7",
++  "version": "4.1.8",
    "description": "Shared navbar, footer, themes, icons, legal pages, SEO, auth and analytics for every OpenVibe site",
    "main": "index.js",
    "bin": {
ddiff --git a/showcase.css b/showcase.css
iindex 65bf37a..9dc0122 100644
---- a/showcase.css
++++ b/showcase.css
@@@ -26,6 +26,7 @@ a.sc-card:hover,a.sc-card:focus-visible{border-color:var(--accent,#3b82f6);trans
  .sc-ic.sc-ic-ov{background:none;border-radius:50%}
  .sc-card b{display:block;font-size:15.5px}.sc-card small{display:block;margin-top:3px;color:var(--text-secondary,#96a7c2);font-size:13.5px;line-height:1.45}
  .sc-steps{list-style:none;margin:0;padding:0;counter-reset:sc;display:grid;gap:14px 24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
++@container (min-width:584px) and (max-width:1191px){.sc-steps:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
  .sc-steps li{counter-increment:sc;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:baseline;align-content:start}
  .sc-steps li::before{content:counter(sc);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--accent-light,#60a5fa);border:1px solid var(--border-light,#2c3d5c);background:var(--bg-secondary,#101828)}
  .sc-steps b{font-size:15.5px}.sc-steps b a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent,#3b82f6);text-underline-offset:3px}
ddiff --git a/showcase.js b/showcase.js
iindex 232e2e4..ade15b2 100644
---- a/showcase.js
++++ b/showcase.js
@@@ -192,6 +192,7 @@ a.sc-card:hover,a.sc-card:focus-visible{border-color:var(--accent,#3b82f6);trans
  .sc-ic.sc-ic-ov{background:none;border-radius:50%}
  .sc-card b{display:block;font-size:15.5px}.sc-card small{display:block;margin-top:3px;color:var(--text-secondary,#96a7c2);font-size:13.5px;line-height:1.45}
  .sc-steps{list-style:none;margin:0;padding:0;counter-reset:sc;display:grid;gap:14px 24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
++@container (min-width:584px) and (max-width:1191px){.sc-steps:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
  .sc-steps li{counter-increment:sc;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:baseline;align-content:start}
  .sc-steps li::before{content:counter(sc);grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--accent-light,#60a5fa);border:1px solid var(--border-light,#2c3d5c);background:var(--bg-secondary,#101828)}
  .sc-steps b{font-size:15.5px}.sc-steps b a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent,#3b82f6);text-underline-offset:3px}
ddiff --git a/test/showcase.test.js b/test/showcase.test.js
iindex aafde09..3c2c74c 100644
---- a/test/showcase.test.js
++++ b/test/showcase.test.js
@@@ -42,6 +42,7 @@ assert.strictEqual(sc.STYLESHEET, 'showcase.css');
  // top), and four cards in a section too narrow for four across sit two by two, never three and one alone.
  assert.ok(/\.sc-steps li\{[^}]*align-content:start/.test(sc.CSS), 'steps do not stretch their rows');
  assert.ok(/\.sc-sec\{[^}]*container-type:inline-size/.test(sc.CSS), 'a section is the container its grid asks about');
++assert.ok(/@container \(min-width:584px\) and \(max-width:1191px\)\{\.sc-steps:has\(>:nth-child\(4\):last-child\)\{grid-template-columns:repeat\(2,minmax\(0,1fr\)\)\}\}/.test(sc.CSS), 'four steps: two by two below four columns (Zone, Download read three and one)');
  assert.ok(/@container \(min-width:520px\) and \(max-width:1035px\)\{\.sc-grid:has\(>:nth-child\(4\):last-child\)\{grid-template-columns:repeat\(2,minmax\(0,1fr\)\)\}\}/.test(sc.CSS), 'four cards: two by two below four columns');
  // A ring icon fills the 40 px slot with no second tile; a Font Awesome icon keeps the tinted tile at its own size.
  {