Skip to content

Commit

Permalink
Merge pull request #40 from BillyNate/gh-pages
Browse files Browse the repository at this point in the history 
The ribbon's HTML is now single element and resizing the ribbon is easier
  • Loading branch information
@simonwhitaker
simonwhitaker committed Feb 11, 2016
2 parents 537c71b + c96ef9b commit 1e9f246
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 168 deletions.
148 changes: 62 additions & 86 deletions gh-fork-ribbon.css
View file
@@ -1,15 +1,48 @@
/*!
* "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
* "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
* https://github.com/simonwhitaker/github-fork-ribbon-css
*/

/* Left will inherit from right (so we don't need to duplicate code) */
.github-fork-ribbon {
width: 12.1em;
height: 12.1em;
position: absolute;
overflow: hidden;
top: 0;
right: 0;
z-index: 9999;
pointer-events: none;
font-size: 13px;
text-decoration: none;
text-indent: -999999px;
}

.github-fork-ribbon.fixed {
position: fixed;
}

.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;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.github-fork-ribbon:before {
content: "";

/* Add a bit of padding to give some substance outside the "stitching" */
padding: 2px 0;
padding: .38em 0;

/* Set the base colour */
background-color: #a00;
Expand All @@ -23,118 +56,61 @@
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));

/* Add a drop shadow */
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);

/* Set the font */
font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;

z-index: 9999;
pointer-events: auto;
}

.github-fork-ribbon a,
.github-fork-ribbon a:hover {
.github-fork-ribbon:after {
/* Set the text from the title attribute */
content: attr(title);

/* Set the text properties */
color: #fff;
font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.54em;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
text-align: center;

/* Set the geometry. If you fiddle with these you'll also need
to tweak the top and right values in .github-fork-ribbon. */
width: 200px;
line-height: 20px;
text-indent: 0;

/* Set the layout properties */
display: inline-block;
padding: 2px 0;
padding: .15em 0;
margin: .15em 0;

/* Add "stitching" effect */
border-width: 1px 0;
border-width: .08em 0;
border-style: dotted;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.7);
}

.github-fork-ribbon-wrapper {
width: 150px;
height: 150px;
position: absolute;
overflow: hidden;
top: 0;
z-index: 9999;
pointer-events: none;
}

.github-fork-ribbon-wrapper.fixed {
position: fixed;
}

.github-fork-ribbon-wrapper.left {
.github-fork-ribbon.left-top, .github-fork-ribbon.left-bottom {
right: auto;
left: 0;
}

.github-fork-ribbon-wrapper.right {
right: 0;
}

.github-fork-ribbon-wrapper.left-bottom {
position: fixed;
top: inherit;
.github-fork-ribbon.left-bottom, .github-fork-ribbon.right-bottom {
top: auto;
bottom: 0;
left: 0;
}

.github-fork-ribbon-wrapper.right-bottom {
position: fixed;
top: inherit;
bottom: 0;
right: 0;
.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after {
right: auto;
left: -3.23em;
}

.github-fork-ribbon-wrapper.right .github-fork-ribbon {
top: 42px;
right: -43px;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
.github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
top: auto;
bottom: 3.23em;
}

.github-fork-ribbon-wrapper.left .github-fork-ribbon {
top: 42px;
left: -43px;

.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}


.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
top: 80px;
left: -43px;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
top: 80px;
right: -43px;

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
83 changes: 27 additions & 56 deletions gh-fork-ribbon.ie.css
View file
@@ -1,78 +1,49 @@
/*!
* "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
* "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
* https://github.com/simonwhitaker/github-fork-ribbon-css
*/

/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
* http://www.useragentman.com/IETransformsTranslator */

.github-fork-ribbon {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
html {
overflow: auto;
}

.github-fork-ribbon-wrapper.right .github-fork-ribbon {
body {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}

.github-fork-ribbon {
width: 15.38em;
height: 5.62em;

/* IE positioning hack (couldn't find a transform-origin alternative for IE) */
top: -22px;
right: -62px;
top: -3.92em;
right: -4.46em;

/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865474,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865474,
SizingMethod='auto expand'
);
}

.github-fork-ribbon-wrapper.left .github-fork-ribbon {
top: -22px;
left: -22px;

.github-fork-ribbon.left-top, .github-fork-ribbon.right-bottom {
/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865483,
M12=0.7071067811865467,
M21=-0.7071067811865467,
M22=0.7071067811865483,
SizingMethod='auto expand'
);
}

.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
/* IE positioning hack (couldn't find a transform-origin alternative for IE) */
top: 12px;
left: -22px;


/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
/* IE6 and 7 */
/* filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865474,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865474,
SizingMethod='auto expand'
);
*/}
.github-fork-ribbon:before, .github-fork-ribbon:after {
left: auto !important;
right: auto !important;
font-size: inherit;
}

.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
top: 12px;
right: -62px;
.github-fork-ribbon.left-top, .github-fork-ribbon.left-bottom {
left: -3.92em;
}

/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865483,
M12=0.7071067811865467,
M21=-0.7071067811865467,
M22=0.7071067811865483,
SizingMethod='auto expand'
);
.github-fork-ribbon.left-bottom, .github-fork-ribbon.right-bottom {
bottom: 4.77em;
}
43 changes: 17 additions & 26 deletions index.html
View file
Expand Up @@ -39,15 +39,15 @@
}

/* The default background color is #c00 */
.right-bottom .github-fork-ribbon {
.github-fork-ribbon.right-bottom:before {
background-color: #090;
}

.right .github-fork-ribbon {
.github-fork-ribbon.right-top:before {
background-color: #f80;
}

.left-bottom .github-fork-ribbon {
.github-fork-ribbon.left-bottom:before {
background-color: #333;
}
</style>
Expand All @@ -61,19 +61,11 @@
</head>
<body>
<!-- TOP RIGHT RIBBON: START COPYING HERE -->
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
<a class="github-fork-ribbon right-top" href="https://github.com/simonwhitaker/github-fork-ribbon-css" title="Fork me on GitHub">Fork me on GitHub</a>
<!-- TOP RIGHT RIBBON: END COPYING HERE -->

<!-- TOP LEFT RIBBON: START COPYING HERE -->
<div class="github-fork-ribbon-wrapper left">
<div class="github-fork-ribbon">
<a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
<a class="github-fork-ribbon left-top" href="https://github.com/simonwhitaker/github-fork-ribbon-css" title="Fork me on GitHub">Fork me on GitHub</a>
<!-- TOP LEFT RIBBON: END COPYING HERE -->
<div class="content">

Expand All @@ -100,14 +92,21 @@ <h2>Using with Bower</h2>
<pre>bower install github-fork-ribbon-css</pre>
<h2>Using with cdnjs</h2>
<p>
You can use github-fork-ribbon-css without installation via <a href="https://cdnjs.com/libraries/github-fork-ribbon-css">cdnjs.com</a>.
You can use github-fork-ribbon-css without installation via <a href="https://cdnjs.com/libraries/github-fork-ribbon-css">cdnjs.com</a>.<br />
Copy the following code into the <strong>&lt;head&gt;</strong> of your page:
</p>
<code>
&lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" /&gt;<br/>
&lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" /&gt;<br/>
&lt;!--[if lt IE 9]&gt;<br/>
&nbsp;&nbsp;&lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" /&gt;<br/>
&nbsp;&nbsp;&lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.ie.min.css" /&gt;<br/>
&lt;![endif]--&gt;
</code>
<p>
And this into the <strong>&lt;body&gt;</strong> of your page:
</p>
<code>
&lt;a class="github-fork-ribbon" href="http://url.to-your.repo" title="Fork me on GitHub"&gt;Fork me on GitHub&lt;/a&gt;
</code>

<h2>About</h2>
<p>
Expand All @@ -117,19 +116,11 @@ <h2>About</h2>
</p>
</div>
<!-- BOTTOM RIGHT RIBBON: START COPYING HERE -->
<div class="github-fork-ribbon-wrapper right-bottom">
<div class="github-fork-ribbon">
<a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
<a class="github-fork-ribbon right-bottom fixed" href="https://github.com/simonwhitaker/github-fork-ribbon-css" title="Fork me on GitHub">Fork me on GitHub</a>
<!-- BOTTOM RIGHT RIBBON: END COPYING HERE -->

<!-- BOTTOM LEFT RIBBON: START COPYING HERE -->
<div class="github-fork-ribbon-wrapper left-bottom">
<div class="github-fork-ribbon">
<a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
<a class="github-fork-ribbon left-bottom fixed" href="https://github.com/simonwhitaker/github-fork-ribbon-css" title="Fork me on GitHub">Fork me on GitHub</a>
<!-- BOTTOM LEFT RIBBON: END COPYING HERE -->
</body>
</html>

0 comments on commit 1e9f246

Please sign in to comment.