From 0ddaf33649d69b5d9e01c0b282d7be0768362290 Mon Sep 17 00:00:00 2001 From: Ian Clarke Date: Mon, 17 Aug 2026 08:59:38 -0500 Subject: [PATCH 1/3] feat(donate): balance PayPal and Ghost Keys CTAs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The two ways to donate had wildly unequal visual weight: PayPal got a full-size heading and a filled primary button, while Ghost Keys (card via Stripe) was a muted grey paragraph with an inline text link and no button at all. Ian wants them presented as two genuine, equally-weighted choices. Give the card option the same treatment as PayPal: a matching heading, a real button reusing the existing .funding-donate-button style (the same pattern already used for Ghost Key CTAs on /ghostkey/), and a one-line note underneath explaining what it does, mirrored on both sides so neither reads as the "real" option and neither as the afterthought. No urgency, scarcity, or pre-selection — just parity. Testing: built with hugo, screenshotted desktop/mobile x light/dark with Playwright, and diffed bounding boxes before/after. Headings are now the same font-size/color in both themes; both buttons render at identical height/font-size with the same background color; both notes render at the same font-size. Confirmed no other content file references .funding-ghost-keys before editing its rules. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01TdTrb76FvWpw1LXF7eoHJB --- hugo-site/content/donate/_index.md | 14 +++++++----- .../themes/freenet/assets/css/freenet.css | 22 +++---------------- 2 files changed, 11 insertions(+), 25 deletions(-) diff --git a/hugo-site/content/donate/_index.md b/hugo-site/content/donate/_index.md index 1f77b5f5..dda66ae0 100644 --- a/hugo-site/content/donate/_index.md +++ b/hugo-site/content/donate/_index.md @@ -62,18 +62,20 @@ If you are interested in supporting Freenet at a significant level, we would be
-## Donate +## Donate via PayPal Donate via PayPal +

One-time or recurring, no account required.

+
-
+
+ +## Donate via card -## Donating by card +Donate via card -If you would rather give by card, you can donate through [Ghost Keys](/ghostkey/). A Ghost Key is an -anonymous cryptographic identity, issued with your donation, that works across Freenet apps and -cannot be linked back to your payment. The minimum is $1. +

Issues a Ghost Key, an anonymous cryptographic identity that works across Freenet apps and can't be linked back to your payment. $1 minimum.

diff --git a/hugo-site/themes/freenet/assets/css/freenet.css b/hugo-site/themes/freenet/assets/css/freenet.css index a724192e..e98e576a 100644 --- a/hugo-site/themes/freenet/assets/css/freenet.css +++ b/hugo-site/themes/freenet/assets/css/freenet.css @@ -1311,22 +1311,14 @@ picture.app-screenshot img { } } -/* Ghost keys — understated */ +/* Ghost Keys donate option — same visual weight as PayPal (funding-donate-button + + gk-cta-note), just separated from it with a divider so the two read as + distinct, equally-weighted choices rather than one continuous block. */ .funding-ghost-keys { padding-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } -.funding-ghost-keys h2 { - font-size: 1.15rem; - color: #64748b; -} - -.funding-ghost-keys p { - color: #64748b; - font-size: 0.95rem; -} - /* Dark mode — funding page */ @media (prefers-color-scheme: dark) { .funding-title { @@ -1376,14 +1368,6 @@ picture.app-screenshot img { .funding-ghost-keys { border-top-color: rgba(255, 255, 255, 0.08); } - - .funding-ghost-keys h2 { - color: #8896a8; - } - - .funding-ghost-keys p { - color: #8896a8; - } } /* Responsive — funding page */ From cbfc54fd214958b3477f34a87c1dbf71d205da00 Mon Sep 17 00:00:00 2001 From: Ian Clarke Date: Mon, 17 Aug 2026 09:07:21 -0500 Subject: [PATCH 2/3] feat(donate): surface the donate options above the fold MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both CTAs were below the fold on every viewport (71-81% down desktop, 74-81% down mobile), buried under "Why Freenet matters", "About the project", and "Major supporters". A visitor on /donate/ already decided to give (they clicked "Donate" in the nav) — making them scroll past three sections of persuasion before they can act is pure friction, the same mistake fixed on /ghostkey/ in PR #93. Add a two-column CTA row right under the hero lead paragraph, using the same balanced heading/button/note treatment as the existing bottom section (which stays in place, unchanged wording, as a second chance for anyone who reads first). "Why Freenet matters", "About the project", and "Major supporters" are untouched below. Also pin .funding-donate-button's line-height explicitly: the hero button (bare div, no

wrapper) and the bottom button (wrapped in a

that inherits .funding-section p's line-height: 1.75) were rendering 4px apart in height purely from ambient context. Pinning it makes every instance of the button pixel-identical regardless of where it's placed. Testing: hugo build clean. Playwright screenshots + bounding-box measurements at desktop (1280x900) and mobile (390x844), light and dark, before and after. Both hero buttons now render at 16-20% down the page (above the fold on both viewports); all four button instances across the page are 48px tall / 24px line-height / same background in both themes. Also screenshotted /ghostkey/ to confirm the line-height change doesn't visibly regress its existing button. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01TdTrb76FvWpw1LXF7eoHJB --- hugo-site/content/donate/_index.md | 15 +++++++++++ .../themes/freenet/assets/css/freenet.css | 27 +++++++++++++++++++ 2 files changed, 42 insertions(+) diff --git a/hugo-site/content/donate/_index.md b/hugo-site/content/donate/_index.md index dda66ae0..1ff9369c 100644 --- a/hugo-site/content/donate/_index.md +++ b/hugo-site/content/donate/_index.md @@ -11,6 +11,21 @@ Freenet is a long-term effort to build decentralized infrastructure for a free a Development is funded primarily by donations and grants from individuals who believe this work matters.

+ +
+ +
+Donate via PayPal +

One-time or recurring, no account required.

+
+ +
+Donate via card +

Issues a Ghost Key, an anonymous cryptographic identity that works across Freenet apps and can't be linked back to your payment. $1 minimum.

+
+ +
+
diff --git a/hugo-site/themes/freenet/assets/css/freenet.css b/hugo-site/themes/freenet/assets/css/freenet.css index e98e576a..40841a73 100644 --- a/hugo-site/themes/freenet/assets/css/freenet.css +++ b/hugo-site/themes/freenet/assets/css/freenet.css @@ -1193,6 +1193,27 @@ picture.app-screenshot img { max-width: 640px; } +/* Donate options, surfaced right under the hero lead so a visitor who already + decided to give (they clicked "Donate" in the nav) can act immediately, + without scrolling past "Why Freenet matters" / "About the project" / + "Major supporters" first. Two equally-weighted columns; wraps to a single + column on narrow viewports. The prose stays below unchanged, and the same + two options repeat at the bottom of the page for anyone who scrolls down + to read first — see .funding-donate-section. */ +.funding-hero-donate { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1.5rem 3rem; + margin-top: 2rem; +} + +.funding-hero-donate-option { + flex: 1 1 240px; + max-width: 300px; + text-align: center; +} + .funding-section { margin-bottom: 2.5rem; } @@ -1259,6 +1280,12 @@ picture.app-screenshot img { .funding-donate-button { display: inline-block; padding: 0.75rem 2rem; + /* Explicit rather than inherited: this button now renders inside both a + bare

(bottom donate sections) and a raw-HTML div with no

wrapper + (hero CTA), which without this rule pick up different ambient + line-heights from their parents and render at different heights. + Pinning it here keeps every instance of the button pixel-identical. */ + line-height: 1.5; background: var(--color-primary); color: #ffffff !important; text-decoration: none !important; From 7e30970beb2de6d93f3aa2bd8f278faf50142864 Mon Sep 17 00:00:00 2001 From: Ian Clarke Date: Mon, 17 Aug 2026 09:21:22 -0500 Subject: [PATCH 3/3] fix(donate): give .gk-cta-note a specificity that wins everywhere MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Review of #117 found the note under both donate buttons was rendering two different colors depending on placement: rgb(100,116,139) on /ghostkey/ (light) vs rgb(55,65,81) in the donate page's bottom sections, and the equivalent pair in dark mode. Root cause: .gk-cta-note (0,1,0) loses to .funding-section p (0,1,1) whenever a note is nested inside a .funding-section container, which the hero CTA row and bottom donate sections both are. The class only ever "worked" on /ghostkey/ because nothing there outranked it. Fix: .gk-cta-note.gk-cta-note (0,2,0) beats .funding-section p outright, regardless of source order, so this can't silently break again if the file gets reordered. Comment explains why, so nobody simplifies it back to a single class. Verified by measuring computed color, not inferring from the cascade: all four .gk-cta-note instances on /donate/ (hero x2, bottom x2) and all four on /ghostkey/ now report the identical rgb() value in both light and dark. Confirmed the /ghostkey/ button heights (48px) and page height (8291px) are unchanged by this fix — this commit only touches the note's own selector. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01TdTrb76FvWpw1LXF7eoHJB --- hugo-site/themes/freenet/assets/css/freenet.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/hugo-site/themes/freenet/assets/css/freenet.css b/hugo-site/themes/freenet/assets/css/freenet.css index 40841a73..5e8df7f9 100644 --- a/hugo-site/themes/freenet/assets/css/freenet.css +++ b/hugo-site/themes/freenet/assets/css/freenet.css @@ -1318,7 +1318,14 @@ picture.app-screenshot img { text-align: center; } -.gk-cta-note { +/* Doubled selector deliberately raises specificity to (0,2,0). .gk-cta-note + is a

, so a plain single-class selector here (0,1,0) loses outright to + `.funding-section p` (0,1,1) whenever a note is nested inside a + .funding-section container (donate page's bottom CTAs, hero CTA row) — the + note silently rendered a different color than on /ghostkey/. Do not drop + this back to plain `.gk-cta-note`; that reintroduces the bug regardless of + source order in the file (see PR #117 review). */ +.gk-cta-note.gk-cta-note { margin: 0.75rem auto 0 auto; max-width: 34rem; font-size: 0.9rem; @@ -1333,7 +1340,7 @@ picture.app-screenshot img { } @media (prefers-color-scheme: dark) { - .gk-cta-note { + .gk-cta-note.gk-cta-note { color: #94a3b8; } }