A Gist to forkify any jekyll page with pure css. See http://antivapor.github.io/code/2013/06/03/fork-me/

readme

See http://antivapor.github.io/code/2013/06/03/fork-me

github.html

{% if {{page.github}} == NULL %}
<div class='fork_this'><a href='https://github.com/antivapor'></a></div>
{% else %}
<div class='fork_this'><a href='{{page.github}}'></a></div>
{% endif %} 

post.html

---
layout: default
---
{% include JB/setup %}
{% if {{page.category}} == "code" %}
{% include github.html %}
{% endif %}
{% include themes/mechanicalape/post.html %}

shape.less

/*border color*/
@bc:"red";
/*background color. original colors: #121621,#6d6d6d,#007200,#ff7600,#aa0000,#ffffff*/
@bgc:#ff7600;
/*font color*/
@fc: white;
/*message*/
@msg:"Fork me on GitHub";
/*depending on msg length, you might want to change the position. use top:70px and right: -100px to line up right next to another ribbon to compare*/
@t:45px;
@r:-115px;
/*min width (diagonally)*/
@mw:300px;
/*shadow*/
@sd:#111;
/*fork this gradient*/
@ftg:"top, @bgc, @bgc 10%, @bgc - @sd 50%, @bgc 90%, @bgc";
.fork_this{
min-width:@mw;
height:34px;
background-color:@bgc;
position:absolute;
top:@t;
right:@r;
transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg);
z-index:999;
text-align:center;
line-height:2.1em;
font-size:1em;
background: -webkit-linear-gradient(@ftg);
background: -moz-linear-gradient(@ftg);
background: -ms-linear-gradient(@ftg);
background: -o-linear-gradient(@ftg);
box-shadow: 0px 1px 3px @sd;
}
.fork_this a:before,
.fork_this a:hover:before,
.fork_this a:active:before,
.fork_this a:focus:before{
content:@msg;
font-family:arial;
font-weight:bold;
color:@fc;
text-shadow:0px 0px 8px @sd*3;
}
.fork_this a,
.fork_this a:hover,
.fork_this a:active,
.fork_this a:focus{
border: 1px dashed @fc;
height: 50;
text-align:center;
padding:5px 100px 5px 100px;
outline: 0;
}