openvibers/openrestream Commits

OpenRestream: the front page lines up in one column (the showcase drops its second gutter) (#73)

OP OpenVibers committed 29 days ago · cb5b9b5ca1 · 2 files, +4 −0

**The OpenRestream front page lines up in one column.**

**Found:** while reviewing every home page. The showcase sections carry their own 24 px gutter inside `main.ore`, which already has one. Everything after them (the sign-in line, your streams, "Recently shipped") therefore started 24 px further left than the hero, the cards and the questions.

**Change (`server/ui/layout.js`):** inside `main.ore`, the showcase hero, sections and call to action drop their side padding.

**Checked** by injecting the rule into the live page at 1280 and 390 px: everything starts on one left edge, with no horizontal overflow.

**Test:** `discovery.test.js` checks that the page carries the rule.

Changes

ddiff --git a/server/ui/layout.js b/server/ui/layout.js
iindex 961f85a..b6f16e1 100644
---- a/server/ui/layout.js
++++ b/server/ui/layout.js
@@@ -23,6 +23,7 @@ const CSS = `
  :root{--ore-bg:#0d131d;--ore-panel:#141c2b;--ore-line:#233049;--ore-text:#e6ecf5;--ore-muted:#93a2bd;--ore-accent:#3b82f6;--ore-ok:#22c55e;--ore-warn:#f59e0b;--ore-bad:#ef4444}
  body{margin:0;background:var(--ore-bg);color:var(--ore-text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
  main.ore{max-width:1040px;margin:0 auto;padding:24px 16px 64px}
++main.ore .sc-hero,main.ore .sc-sec,main.ore .sc-cta{padding-left:0;padding-right:0}
  .ore h1{font-size:1.6rem;margin:.2em 0 .4em}.ore h2{font-size:1.15rem;margin:1.6em 0 .6em}.ore h3{font-size:1rem;margin:1em 0 .4em}
  .ore a{color:#93c5fd}.ore p.muted,.ore .muted{color:var(--ore-muted)}
  .ore .card{background:var(--ore-panel);border:1px solid var(--ore-line);border-radius:10px;padding:14px 16px;margin:12px 0}
ddiff --git a/test/discovery.test.js b/test/discovery.test.js
iindex 66056ab..1d00198 100644
---- a/test/discovery.test.js
++++ b/test/discovery.test.js
@@@ -79,6 +79,9 @@ t('the front page leads with open restreaming, links to Live for browser go-live
          assert.ok(r.text.includes(`href="${api.config.liveUrl}"`), 'browser go-live opens OpenVibe.Live, where it runs today');
          assert.match(r.text, /Going live from a browser happens on OpenVibe\.Live for now/);
          assert.match(r.text, /href="\/shared\/showcase\.css\?v=[0-9a-f]{12}"/);
++        // The showcase sits in main.ore's column, which has its gutter already: no second one, so the sign-in line and
++        // "Recently shipped" line up with the sections above.
++        assert.ok(r.text.includes('main.ore .sc-hero,main.ore .sc-sec,main.ore .sc-cta{padding-left:0;padding-right:0}'));
          assert.strictEqual((r.text.match(/<h1[ >]/g) || []).length, 1, 'one h1');
          // The SEO head (openvibe-shared/seo): the front page is shareable and machine-readable.
          assert.match(r.text, /<meta property="og:title" content="OpenRestream — go live once, stream everywhere">/);