marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Campaign actions: a centred, even stack with a squarer corner

Browse Source 
The column is narrow so these buttons stack. Left-aligned pills of different
widths read as a ragged edge, and a label that wraps inside a 999px radius
becomes a tall oval, which is what "Buy more views" was doing.

They are now centred, the same width, and cornered at 10px, so each label sits
on one line. Scoped to this table: everything else keeps the pill. The phone
card shares a row rather than stacking, as it did before, so that layout is
left alone.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-23 09:10:50 -05:00
parent 02d60d6ee1
commit 5c08be1c30
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/site.css
+9 -3
View File
@@ -60,8 +60,13 @@ nav .links a.active{color:var(--mint);background:rgba(67,232,195,.1)}
.btn.quiet:hover{background:rgba(139,166,156,.1);color:var(--ink);border-color:var(--muted);box-shadow:none}
/* the member's campaign actions sat flush against each other on desktop; the mobile rule already
had a gap, this gives the wide layout the same room */
.camp-table td.act .btn{margin-right:8px}
.camp-table td.act .btn:last-child{margin-right:0}
/* Campaign actions (Marty, 2026-09-23): the column is narrow, so these stack. Left-aligned pills
of different widths read as a ragged edge, and a wrapped label inside a 999px radius turns into
a tall oval. They are a centred, even-width stack with a modest corner instead. */
.camp-table td.act{text-align:center;vertical-align:middle}
.camp-table td.act .btn{display:block;width:100%;min-width:118px;margin:0 0 8px;border-radius:10px;
text-align:center;line-height:1.25;white-space:normal}
.camp-table td.act .btn:last-child{margin-bottom:0}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
/* ── hero: centered, light-trail set-piece ─────────── */
.hero{position:relative;text-align:center;padding:120px 0 84px;overflow:visible}
@@ -746,7 +751,8 @@ img{max-width:100%}
.camp-table td:first-child{display:block;padding:0 0 6px;font-size:16px} .camp-table td:first-child::before{display:none}
.camp-table td:first-child > *{max-width:100%}
.camp-table td.act{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)} .camp-table td.act::before{display:none}
.camp-table td.act .btn{flex:1 1 auto;text-align:center}
/* on a phone the card is wide enough for them to share a row, so undo the desktop stack */
.camp-table td.act .btn{flex:1 1 auto;text-align:center;display:inline-block;width:auto;min-width:0;margin:0}
}
/* Pipeline board (Marty, 2026-09-15): columns scroll sideways inside their own box, never the page */