marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Member pages: centre the hero block like every other page

Browse Source 
The site's .hero is text-align:center, so /p/<id> was the only landing page
left-aligning its heading. The eyebrow, headline and subhead now centre with
the rest of the site.

The story body deliberately stays left-aligned — centred long-form prose is
harder to read because every line starts in a different place, and that
section is several paragraphs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-29 05:47:03 -05:00
parent 90b03c16f9
commit 36327abed2
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
suite-pages.js
+7 -2
View File
@@ -192,13 +192,18 @@ function render(rec) {
'<link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">' + '<link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">' +
'<style>' + '<style>' +
'.pp{max-width:760px;margin:0 auto;padding:30px 20px 70px}' + '.pp{max-width:760px;margin:0 auto;padding:30px 20px 70px}' +
// The rest of the site centres its hero block (.hero is text-align:center),
// so this page was the odd one out. Centre the eyebrow, heading and
// subhead — but NOT the story below, because centred long-form prose is
// measurably harder to read: every line starts in a different place.
'.pp .by,.pp h1,.pp .sub{text-align:center}' +
'.pp h1{font-size:clamp(30px,6vw,48px);line-height:1.06;letter-spacing:-.8px;margin:8px 0 12px;text-wrap:balance}' + '.pp h1{font-size:clamp(30px,6vw,48px);line-height:1.06;letter-spacing:-.8px;margin:8px 0 12px;text-wrap:balance}' +
'.pp h1 .gold{color:var(--gold)}' + '.pp h1 .gold{color:var(--gold)}' +
'.pp .sub{color:#dbe6ef;font-size:clamp(19px,2.4vw,22px);line-height:1.55;margin-bottom:24px;max-width:46ch}' + '.pp .sub{color:#dbe6ef;font-size:clamp(19px,2.4vw,22px);line-height:1.55;margin:0 auto 24px;max-width:46ch}' +
// The byline becomes the gold eyebrow the rest of the site uses above // The byline becomes the gold eyebrow the rest of the site uses above
// an h1, so a member page reads as part of the same family instead of // an h1, so a member page reads as part of the same family instead of
// a stray document. // a stray document.
'.pp .by{display:flex;align-items:center;gap:8px;color:var(--gold);font-size:12px;font-weight:700;' + '.pp .by{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gold);font-size:12px;font-weight:700;' +
'letter-spacing:1.6px;text-transform:uppercase;margin-bottom:6px}' + 'letter-spacing:1.6px;text-transform:uppercase;margin-bottom:6px}' +
'.pp .by b{color:var(--gold);font-weight:800}' + '.pp .by b{color:var(--gold);font-weight:800}' +
'.pp .vid{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:0 0 24px}' + '.pp .vid{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:0 0 24px}' +