alabaster icon indicating copy to clipboard operation
alabaster copied to clipboard

Consider switching to pure CSS "Fork me on GitHub" ribbon

Open ssokolow opened this issue 5 years ago • 2 comments

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.

ssokolow avatar Feb 12 '20 05:02 ssokolow

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

soxofaan avatar Jul 19 '23 07:07 soxofaan

FYI: I also found a SVG based alternative: https://tholman.com/github-corners/

soxofaan avatar Jul 19 '23 07:07 soxofaan