fix(frontend): footer psi logo - #290
Merged
Merged
Conversation
PSI's mark is a stipple — a cloud of ~760 separate dots — and it shipped
as a 91x40 PNG. Scaled into the footer's 20px box on an ordinary 1x
display that dither collapsed into a mottled blob, and it blurred again
on any screen that upscaled it. So it read as a smudge to some people
and as a clean logo to others, decided by nothing but their display.
Nothing was tinting it. Every pixel of that PNG — and of both earlier
versions of the same file — is neutral grey, chroma zero, and the only
filter on it is `invert`, which is neutral in any colour space. The
"brownish" was the dither breaking up, plus whatever warmed the screen
reading it.
Replaced with the vector logo from Wikimedia Commons ({{PD-textlogo}}:
simple shapes and text, below the threshold of originality). Recoloured
white on the root <svg> — the file declares no other fill — so it keeps
the one monochrome rule the other three institution logos follow:
`h-5 invert dark:invert-0` is untouched, and the cap-height arithmetic
in the comment still holds at 50%.
This also takes the only LFS-backed asset out of the four institution
logos. .gitattributes sends *.png to LFS but not *.svg, so a clone
without git-lfs served a 133-byte pointer at that path while EPFL, ETH
and Biopôle rendered fine.
Cost: 83KB raw, 17KB gzipped, against 6KB for the PNG. That is what 760
vector dots weigh; the build already precompresses .svg.
sabinem
force-pushed
the
fix/footer-psi-logo
branch
from
September 2, 2026 05:56
e6db661 to
46f6dd4
Compare
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.
A visitor and their colleague open the same landing page and see the same PSI logo.
Someone reported the PSI logo in the footer looked "brownish" — but only on their colleague's machine, not their own. Same URL, same page, two different-looking logos.
It wasn't a colour problem. I decoded every version of psi.png ever committed, including the two older ones pulled out of Git LFS: every pixel is neutral grey, chroma exactly zero, no embedded colour profile, and the only CSS touching it is invert, which can't tint anything. The real cause was resolution. PSI's logo is a stipple — a cloud of about 760 separate dots — and it was a 91×40 bitmap squeezed into a 20-pixel-tall slot. On a Retina screen that lands near 1:1 and looks fine. On an ordinary monitor the dots moiré into a mottled grey smear, and a warm display or a night-light filter finishes the job and makes the smear look brown.
The logo is now the vector original from Wikimedia Commons, so the dots stay dots at every screen density and zoom level. It's public domain ({{PD-textlogo}} — simple shapes and text, below the threshold of originality); the trademark is PSI's, and naming them as one of the institutions behind SDSC is the same nominative use the three logos beside them already are.