HN Explorer

21 comments

[ 3.1 ms ] story [ 61.5 ms ] thread
dannyw
Design suggestion: increase the padding of the GitHub logo. It looks quite crowded.
Tepix
FYI, the "original" ribbons are at

https://github.com/blog/273-github-ribbons

They use PNG images which are around 8kb. The SVG from this project (which lacks the text) is 1kb.

TazeTSchnitzel
One of the annoying things about images of this kind is their bounding box is twice the size it should be.
muzzammildotxyz
Thanks, but I knew that already and didn't like it. So I thought an OctoCat would send the same message as "Fork me on Github" :) That's why it does not have any text.
BenjaminBini
On my screen I can see color difference between the Octocat and the background (on your demo website).
deam
That's correct. The svg background-color should be changed to #F9F9F9.
zichy
Here's another minimalistic approach:

    <a href="https://github.com/yourname">Fork me on GitHub</a>
You can now use the <a> tag anywhere in your code.
asuzuki
Unbelievable! It just works. </sarcasm>
nebabyte
It even works with fluid designs. We call it liquid courage
hashmal
"minimal*" is a word that is used a lot nowadays, but you sir, really got the gist of it.
muzzammildotxyz
That, sir, is truly <em>THE</em> minimalistic, easy, and with cross-browser compatibility approach I have ever seen. Thanks :)
chrismorgan
http://tholman.com/github-corners/ is another, which gives you straight SVG to inline. This one with a couple of minutes of minification and inlining comes to about 1 170 bytes (no gzip); that one after similar time comes to about 985 bytes and more accessible (see its aria-label/aria-hidden) if you remove the fancy animation which is a bonus.

(I confess I’m addicted to shaving bytes.)

muzzammildotxyz
Yes it looks good with the animation... If I knew about this one I probably would not have wrote OctoCSS... Thanks anyway... :)
[deleted]
(comment deleted)