feat: surface funder logos (NLnet/NGI Zero PET, Mozilla MOSS) prominently - #102
Merged
Conversation
…ntly Add a "Supported by" band below the hero on the home page, a compact "Funded by" attribution strip in the global footer, and upgrade the About page funder panel from text-only links to logo cards. Each placement includes the EU acknowledgement line as required by NGI Zero PET. Single source of truth is the new Sponsors.astro component with three variants (band / strip / inline). Sponsor SVGs staged under public/assets/sponsors/ from upstream sources: - NLnet hex (nlnet.nl/logo) - NGI Zero PET tag (nlnet.nl/logo) - Mozilla wordmark (Wikimedia Commons, CC-BY-SA) - EU emblem (Wikimedia Commons, public domain) Verified: build passes (66 pages), internal link check clean, all four external funder URLs return 200.
Shorten the home "Supported by" strip to a single horizontal row (label + logos + EU line). Multicolor NLnet/NGI marks sit on light plates so brand colors stay legible in dark mode; Mozilla swaps to a white wordmark under .dark. Drop the muddy band-teal wash in favour of a neutral surface gradient.
Multicolor marks sit bare on the band in light mode; white plates only kick in under .dark so brand colors stay legible.
NLnet/NGI brand marks read fine bare in both themes; keep only the Mozilla light/dark wordmark swap.
Match the home band: no white plate behind marks, and Mozilla swaps to the white wordmark in dark mode.
Stage the geometric Ribose logo (black + white) and render it at a modest size beside the creator/maintainer blurb, matching the other funder cards and swapping to white under .dark.
Stage official partner SVGs (Mozilla already in place; g10 Code rebuilt from official PNG into a clean path; Intevation via the project's own /logo/intevation-logo-text.svg + darkmode variant; NLnet/NGI swapped to the wider banners already used on the Confium project site). Each renders bare in light mode and swaps to a white mark under .dark. Update partners array + render block on /about/ to the same logo-card pattern used for funders.
The funders cards were rendering the mozilla `<img>` with `class="h-5 w-auto w-auto dark:hidden"` — caused by the inline variant's class:list template-literal appending a second ` w-auto` to `f.logoClass` (which already ended in w-auto). Visible glitch: MOSS/funder cards stacked vertically in some browsers; partner cards (using the same markup but via direct template literals) rendered fine. Switch g10 Code partner logo to the official `g10-logo.svg` (same asset in both light and dark mode per the brand — green banner + white wordmark). g10-logo.pdf kept as the original source.
Replace the Wikimedia-sourced mozilla SVGs with Mozilla Logo Library wordmarks (704x146, clean viewBox — the old sources used a negative viewBox which the browser clipped). Bump logo heights: - Mozilla: h-7 (partners), h-6 (funders) - g10 Code: h-8 - Intevation: h-7 - NLnet (funders inline): h-12 - NGI Zero PET (funders inline): h-10 Drop the fixed `w-28` on the logo container; it was clipping wide wordmarks. Container now grows to fit the image, keeps `h-12`, adds a small right-padding.
The Mozilla partner card is now a featured full-row card so the official lockup has room to breathe at h-16. Auto-fit viewBoxes rewritten on both lockup SVGs (996×239 black, 996×239 white) so the wordmark content fills the rendered area instead of floating in a 1080×1080 canvas with 80% whitespace. g10 Code → "Developers of GnuPG", Intevation → "Developers of Gpg4win". The community statement is now a featured blockquote ABOVE the partners / funders columns, with the small inline copy removed.
Killed the featured/non-featured conditional that produced nested anchor tags on the Mozilla card. All three cards now render through one rendering path: one wrapping `<a>`, fixed logo container (`h-12 w-32`), flex-1 text column. Only the logo size and dark-mode swap vary per partner — structure is identical.
The Mozilla partner card had a nested `<a href="thunderbird.net">` inside an outer wrapping `<a href="mozilla.org">` — HTML5 parser auto-closes the outer anchor on seeing the inner one, breaking the card layout (the heading and description dropped out of the card). Restructure all partner and funder cards the same way: - Outer `<div class="card card-hover group flex items-center gap-5 p-5">` - `<a>` around just the logo (with aria-label) - `<a>` around just the heading text - `<p>` description (with any inline `<a>` for related links) All funders and partners share the same `h-12 w-32` logo container and `h-7 w-auto` (NGI/Mozilla/Ribose) or `h-9`/`h-10` (NLnet/g10) logo heights for visual balance. Sponsors.astro inline variant uses the same structure so both columns on /about/ align identically.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Surfaces RNP's funder logos prominently across the site. Verified funding history:
github.com/mozilla/moss-directory(the program page atmozilla.org/en-US/moss/is winding down).Changes
src/components/Sponsors.astro— single source of truth with three variants (band/strip/inline).public/assets/sponsors/:nlnet.svg— NLnet hex (source:nlnet.nl/logo)ngi-zero-pet.svg— NGI Zero PET tag (source:nlnet.nl/logo)mozilla.svg— Mozilla wordmark (source: Wikimedia Commons, CC-BY-SA; trademark — nominative use)eu-flag.svg— EU emblem (source: Wikimedia Commons, public domain)Test plan
npm run build— 66 pages built, no errorsnpm run check:links— all internal href/src targets existnlnet.nl,nlnet.nl/thema/NGIZeroPET.html,github.com/mozilla/moss-directory,ngi.eu)/assets/sponsors/(preview server, 200)npm run check:links:externalin CINotes
public/assets/sponsors/mozilla.svg.dark:variants on semantic utilities; logos render on a light teal band (home) or as text links (footer).