openvibers/openvibe.news Commits

News: the front page's sections share one left edge and one heading style (#59)

OP OpenVibers committed 29 days ago · 970e59e65d · 2 files, +8 −1

* News: the front page's sections share one left edge and one heading style

The front page's sections now share one left edge and one heading style. A site-wide alignment scan of every home page at 1440 and 390 px found two problems here:

- **24 px offset:** the showcase hero and "How a story is built" sat 24 px to the right of "Latest stories", "From the wire" and "Topics" (x 350 against 326 at 1440, 40 against 16 at 390).
- **Mismatched headings:** those three headings were smaller (21.6 px against 30) and in a different face.

The fix:
- **Alignment:** the shared showcase pads its sections 24 px on each side for full-width pages. Inside `.page`, which has its own padding, that padding is dropped (`.page > .sc-hero, .sc-sec, .sc-cta`).
- **Headings:** the front page's own section headings use the showcase heading's face and size (`clamp(22px, 2.6vw, 30px)`), and "Latest stories" gets the same 56 px gap after the showcase.
- **Feed links:** "Follow: RSS Atom JSON Feed" shows as small outlined links instead of bare underlined words.

The fix was checked by injecting the CSS into production and measuring: every h1/h2 starts at x=326 at 1440 px and at x=16 at 390 px. CSS only; the asset-cache test passes.

* News: compact the front page alignment rules; CSS raw budget 18.5 KB (18.2 measured, brotli unchanged at 4.5)

Changes

ddiff --git a/public/css/news.css b/public/css/news.css
iindex a4d500d..6b99b5d 100644
---- a/public/css/news.css
++++ b/public/css/news.css
@@@ -67,6 +67,13 @@ form.inline button { margin: 0 0 0 8px; padding: 2px 10px; font-size: .85rem; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
  @media (max-width: 600px) { h1 { font-size: 1.7rem; } body { font-size: 16px; } table { font-size: .85rem; } }
  .wire { margin-top: 32px; border-top: 1px solid var(--border, #1f2d47); }
++/* Front page: the showcase lines up with .page's own padding, and the page's section headings match its h2. */
++.page>.sc-hero,.page>.sc-sec,.page>.sc-cta{padding-left:0;padding-right:0}
++.sc-sec~.site-header>h2,.wire>h2,.sc-sec~.side>h2{font:700 clamp(22px,2.6vw,30px)/1.2 var(--ov-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif);letter-spacing:-.02em}
++.sc-sec~.site-header{margin-top:56px}
++.feeds{font-size:.9rem;color:var(--text-muted,#7386a3)}
++.feeds a{display:inline-block;margin:2px 4px 2px 0;padding:1px 10px;border:1px solid var(--border-light,#2c3d5c);border-radius:999px;text-decoration:none}
++.feeds a:hover{border-color:var(--accent,#3b82f6)}
  .wire-list, .wire-items { list-style: none; padding: 0; }
  .wire-cluster { padding: 10px 0; border-bottom: 1px solid var(--border, #1f2d47); overflow-wrap: anywhere; }
  .wire-lead { margin: 0; font-weight: 600; }
ddiff --git a/test/perf-budget.test.js b/test/perf-budget.test.js
iindex 1836ae1..1b0affe 100644
---- a/test/perf-budget.test.js
++++ b/test/perf-budget.test.js
@@@ -18,7 +18,7 @@ const BUDGETS = {
      jsRawKB: 245,   // 239.1 (212.2 before openvibe-shared/shell's web-runtime.js)
      jsBrotliKB: 59,   // 56.3 (49.9 before web-runtime.js)
      cssFiles: 2,   // 2 (news.css + showcase.css, home page 1 only)
--    cssRawKB: 17.5,   // 15.5 (5.2 before showcase.css)
++    cssRawKB: 18.5,   // 15.5 (5.2 before showcase.css); 18.2 with the front page aligned to the showcase (2026-10-15)
      cssBrotliKB: 4.5,   // 3.9 (1.4 before showcase.css)
      externalFiles: 1,   // 0
  };