Skip to content

Commit aad3f3d

Browse files
lefticuslefticus
committed
Add gh fork ribbon
1 parent 4846a58 commit aad3f3d

3 files changed

Lines changed: 228 additions & 0 deletions

File tree

‎gh-fork-ribbon.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/* Left will inherit from right (so we don't need to duplicate code) */
2+
.github-fork-ribbon {
3+
/* The right and left classes determine the side we attach our banner to */
4+
position: absolute;
5+
6+
/* Add a bit of padding to give some substance outside the "stitching" */
7+
padding: 2px 0;
8+
9+
/* Set the base colour */
10+
background-color: #a00;
11+
12+
/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
13+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
14+
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
15+
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
16+
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
17+
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
18+
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
19+
20+
/* Add a drop shadow */
21+
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
22+
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
23+
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
24+
25+
z-index: 9999;
26+
pointer-events: auto;
27+
}
28+
29+
.github-fork-ribbon a,
30+
.github-fork-ribbon a:hover {
31+
/* Set the font */
32+
font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
33+
color: #fff;
34+
35+
/* Set the text properties */
36+
text-decoration: none;
37+
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
38+
text-align: center;
39+
40+
/* Set the geometry. If you fiddle with these you'll also need
41+
to tweak the top and right values in .github-fork-ribbon. */
42+
width: 200px;
43+
line-height: 20px;
44+
45+
/* Set the layout properties */
46+
display: inline-block;
47+
padding: 2px 0;
48+
49+
/* Add "stitching" effect */
50+
border-width: 1px 0;
51+
border-style: dotted;
52+
border-color: #fff;
53+
border-color: rgba(255, 255, 255, 0.7);
54+
}
55+
56+
.github-fork-ribbon-wrapper {
57+
width: 150px;
58+
height: 150px;
59+
position: absolute;
60+
overflow: hidden;
61+
top: 0;
62+
z-index: 9999;
63+
pointer-events: none;
64+
}
65+
66+
.github-fork-ribbon-wrapper.fixed {
67+
position: fixed;
68+
}
69+
70+
.github-fork-ribbon-wrapper.left {
71+
left: 0;
72+
}
73+
74+
.github-fork-ribbon-wrapper.right {
75+
right: 0;
76+
}
77+
78+
.github-fork-ribbon-wrapper.left-bottom {
79+
position: fixed;
80+
top: inherit;
81+
bottom: 0;
82+
left: 0;
83+
}
84+
85+
.github-fork-ribbon-wrapper.right-bottom {
86+
position: fixed;
87+
top: inherit;
88+
bottom: 0;
89+
right: 0;
90+
}
91+
92+
.github-fork-ribbon-wrapper.right .github-fork-ribbon {
93+
top: 42px;
94+
right: -43px;
95+
96+
-webkit-transform: rotate(45deg);
97+
-moz-transform: rotate(45deg);
98+
-ms-transform: rotate(45deg);
99+
-o-transform: rotate(45deg);
100+
transform: rotate(45deg);
101+
}
102+
103+
.github-fork-ribbon-wrapper.left .github-fork-ribbon {
104+
top: 42px;
105+
left: -43px;
106+
107+
-webkit-transform: rotate(-45deg);
108+
-moz-transform: rotate(-45deg);
109+
-ms-transform: rotate(-45deg);
110+
-o-transform: rotate(-45deg);
111+
transform: rotate(-45deg);
112+
}
113+
114+
115+
.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
116+
top: 80px;
117+
left: -43px;
118+
119+
-webkit-transform: rotate(45deg);
120+
-moz-transform: rotate(45deg);
121+
-ms-transform: rotate(45deg);
122+
-o-transform: rotate(45deg);
123+
transform: rotate(45deg);
124+
}
125+
126+
.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
127+
top: 80px;
128+
right: -43px;
129+
130+
-webkit-transform: rotate(-45deg);
131+
-moz-transform: rotate(-45deg);
132+
-ms-transform: rotate(-45deg);
133+
-o-transform: rotate(-45deg);
134+
transform: rotate(-45deg);
135+
}

‎gh-fork-ribbon.ie.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
2+
* http://www.useragentman.com/IETransformsTranslator */
3+
4+
.github-fork-ribbon {
5+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
6+
}
7+
8+
.github-fork-ribbon-wrapper.right .github-fork-ribbon {
9+
/* IE positioning hack (couldn't find a transform-origin alternative for IE) */
10+
top: -22px;
11+
right: -62px;
12+
13+
/* IE8+ */
14+
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
15+
/* IE6 and 7 */
16+
filter: progid:DXImageTransform.Microsoft.Matrix(
17+
M11=0.7071067811865474,
18+
M12=-0.7071067811865477,
19+
M21=0.7071067811865477,
20+
M22=0.7071067811865474,
21+
SizingMethod='auto expand'
22+
);
23+
}
24+
25+
.github-fork-ribbon-wrapper.left .github-fork-ribbon {
26+
top: -22px;
27+
left: -22px;
28+
29+
/* IE8+ */
30+
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
31+
/* IE6 and 7 */
32+
filter: progid:DXImageTransform.Microsoft.Matrix(
33+
M11=0.7071067811865483,
34+
M12=0.7071067811865467,
35+
M21=-0.7071067811865467,
36+
M22=0.7071067811865483,
37+
SizingMethod='auto expand'
38+
);
39+
}
40+
41+
.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
42+
/* IE positioning hack (couldn't find a transform-origin alternative for IE) */
43+
top: 12px;
44+
left: -22px;
45+
46+
47+
/* IE8+ */
48+
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
49+
/* IE6 and 7 */
50+
/* filter: progid:DXImageTransform.Microsoft.Matrix(
51+
M11=0.7071067811865474,
52+
M12=-0.7071067811865477,
53+
M21=0.7071067811865477,
54+
M22=0.7071067811865474,
55+
SizingMethod='auto expand'
56+
);
57+
*/}
58+
59+
.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
60+
top: 12px;
61+
right: -62px;
62+
63+
/* IE8+ */
64+
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
65+
/* IE6 and 7 */
66+
filter: progid:DXImageTransform.Microsoft.Matrix(
67+
M11=0.7071067811865483,
68+
M12=0.7071067811865467,
69+
M21=-0.7071067811865467,
70+
M22=0.7071067811865483,
71+
SizingMethod='auto expand'
72+
);
73+
}

‎index.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,30 @@ title: Home Page
44

55
# Hello World
66

7+
<head>
8+
<!-- START COPYING HERE -->
9+
<link rel="stylesheet" href="gh-fork-ribbon.css">
10+
<!--[if lt IE 9]>
11+
<link rel="stylesheet" href="gh-fork-ribbon.ie.css">
12+
<![endif]-->
13+
<!-- END COPYING HERE -->
14+
</head>
15+
16+
<body>
17+
<!-- TOP RIGHT RIBBON: START COPYING HERE -->
18+
<div class="github-fork-ribbon-wrapper right">
19+
<div class="github-fork-ribbon">
20+
<a href="https://github.com/ChaiScript/ChaiScript">Fork me on GitHub</a>
21+
</div>
22+
</div>
23+
24+
725
<ul>
826
{% for post in site.posts %}
927
<li>
1028
<a href="{{ post.url }}">{{ post.title }}</a>
1129
</li>
1230
{% endfor %}
1331
</ul>
32+
33+
</body>

0 commit comments

Comments
 (0)