Pure-css "Fork me on GitHub"

This commit is contained in:
Matthias Bussonnier 2016-10-31 07:20:59 -07:00
parent c82848edf3
commit 5a866781ba

View file

@ -266,10 +266,63 @@ Helpful Links
.. raw:: html
<a href="https://github.com/xonsh/xonsh" style="position: absolute; top: 0; right: 0; border: 0;" id="forkmeongithub"><img src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
<a href="https://github.com/xonsh/xonsh" class='github-fork-ribbon' title='Fork me on GitHub'>Fork me on GitHub</a>
<style>
#forkmeongithub:hover {
background: none;
/*!
* Adapted from
* "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
* https://github.com/simonwhitaker/github-fork-ribbon-css
*/
.github-fork-ribbon, .github-fork-ribbon:hover, .github-fork-ribbon:hover:active {
background:none;
left: inherit;
width: 12.1em;
height: 12.1em;
position: absolute;
overflow: hidden;
top: 0;
right: 0;
z-index: 9999;
pointer-events: none;
text-decoration: none;
text-indent: -999999px;
}
.github-fork-ribbon:before, .github-fork-ribbon:after {
/* The right and left classes determine the side we attach our banner to */
position: absolute;
display: block;
width: 15.38em;
height: 1.54em;
top: 3.23em;
right: -3.23em;
box-sizing: content-box;
transform: rotate(45deg);
}
.github-fork-ribbon:before {
content: "";
padding: .38em 0;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
box-shadow: 0 0.07em 0.4em 0 rgba(0, 0, 0, 0.3);
pointer-events: auto;
}
.github-fork-ribbon:after {
content: attr(title);
color: #000;
font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.54em;
text-decoration: none;
text-align: center;
text-indent: 0;
padding: .15em 0;
margin: .15em 0;
border-width: .08em 0;
border-style: dotted;
border-color: #777;
}
</style>