Skip to content

Commit

Permalink
The ribbon's HTML is now single element and resizing the ribbon is ea…
Browse files Browse the repository at this point in the history
…sier

Resize the ribbon by adjusting the font-size of the ribbon element.

Dropped IE6/7 support and unfortunately had to drop the IE8 gradient.
  • Loading branch information
BillyNate committed Jun 11, 2015
1 parent 2c6ab76 commit c96ef9b
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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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:https://stackoverflow.com/a/4617511/263871 and
* http:https://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
Original file line number Diff line number Diff line change
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="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/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
<a class="github-fork-ribbon right-top" href="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/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="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/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
<a class="github-fork-ribbon left-top" href="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/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="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" /&gt;<br/>
&lt;link rel="stylesheet" href="https://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="https://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="https://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:https://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="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/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
<a class="github-fork-ribbon right-bottom fixed" href="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/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="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/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a>
</div>
</div>
<a class="github-fork-ribbon left-bottom fixed" href="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/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 c96ef9b

Please sign in to comment.