alabaster
alabaster copied to clipboard
Consider switching to pure CSS "Fork me on GitHub" ribbon
The classic "Fork me on GitHub" ribbon has several problems:
- The transparent parts of its bounding box are opaque to clicks
- It's not high-DPI ready
- Having it hosted on Amazon S3 is problematic for people who want to minimize their tracking footprint.
Now, to be fair, CSS-based implementations are at risk of aliasing/quality problems when they rotate things, but the CSS generated by Chris Heilmann's ribbon generator seems to be free from that issue in both Firefox and Chrome.
I've tweaked the output to match the traditional image-based ribbon as closely as possible without requiring a specific font and you can see it in use at https://ssokolow.com/quicktile/
Feel free to use my changes under whatever terms you like. https://github.com/ssokolow/quicktile/commit/1ae5388ac0f2a2bfa494045644b0ba19eb042329 has all the relevant bits neatly together.
The current image based ribbon stopped working even:
https://github.com/sphinx-doc/alabaster/blob/7a9df17b6366c96baba6bf5e14f9b6ff6bf7defa/alabaster/layout.html#L104
that url https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png doesn't load (anymore?) and gives 403 Forbidden
FYI: I also found a SVG based alternative: https://tholman.com/github-corners/