GRIN/GoblinPay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pay: Apple-style centered Goblin Pay lockup at panel top

Browse Source 
Replace the left-aligned wordmark + redundant "Pay with Goblin" heading with a
single centered lockup (the white goblin+Pay wordmark) as the page h1, with
generous whitespace and no other heading text. The lockup already reads
"Goblin Pay", so the separate heading is dropped; its alt carries the heading
for assistive tech. Rendered height 34px. Asset is the existing
static/goblinpay-wordmark.svg (byte-identical to the design-bundle
Goblin-Pay-W.svg), already routed and embedded.
This commit is contained in:
2ro
2026-07-07 00:36:52 -04:00
parent e6f18d59ce
commit b9f31ccc30
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+6 -2
View File
@@ -31,8 +31,12 @@ main {
main.admin { max-width: 60rem; }
.brand { display: block; }
.brandmark { height: 30px; width: auto; display: block; margin: 0 0 1.25rem; }
/* Apple-Pay-style header: the white Goblin Pay lockup, centered with generous
whitespace, is the only branding. No separate heading text (the lockup itself
reads "Goblin Pay"), keeping the sheet clean and uncluttered. The lockup is
the page's h1; its alt carries the heading for assistive tech. */
.brand { margin: 0.25rem 0 1.75rem; text-align: center; line-height: 0; }
.brandmark { height: 34px; width: auto; display: inline-block; }
h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
templates/pay.html
+1 -2
View File
@@ -9,8 +9,7 @@
</head>
<body>
<main class="checkout">
<a class="brand" href="{{ info.base }}/"><img class="brandmark" src="{{ info.base }}/static/goblinpay-wordmark.svg" alt="GoblinPay"></a>
<h1>Pay with Goblin</h1>
<h1 class="brand"><a href="{{ info.base }}/"><img class="brandmark" src="{{ info.base }}/static/goblinpay-wordmark.svg" alt="Pay with Goblin"></a></h1>
<p class="amount">{{ info.amount_display }}</p>
{% if is_confirmed %}