Skip to content

Commit 84a9223

Browse files
64json64json
committed
add fork-me-on-github
1 parent dfb7000 commit 84a9223

File tree

3 files changed

+123
-1
lines changed

3 files changed

+123
-1
lines changed

‎css/gh-fork-ribbon.css

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/*!
2+
* "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
3+
* https://github.com/simonwhitaker/github-fork-ribbon-css
4+
*/
5+
6+
.github-fork-ribbon {
7+
width: 12.1em;
8+
height: 12.1em;
9+
position: absolute;
10+
overflow: hidden;
11+
top: 0;
12+
right: 0;
13+
z-index: 9999;
14+
pointer-events: none;
15+
font-size: 13px;
16+
text-decoration: none;
17+
text-indent: -999999px;
18+
}
19+
20+
.github-fork-ribbon.fixed {
21+
position: fixed;
22+
}
23+
24+
.github-fork-ribbon:before, .github-fork-ribbon:after {
25+
/* The right and left classes determine the side we attach our banner to */
26+
position: absolute;
27+
display: block;
28+
width: 15.38em;
29+
height: 1.54em;
30+
31+
top: 3.23em;
32+
right: -3.23em;
33+
34+
-webkit-transform: rotate(45deg);
35+
-moz-transform: rotate(45deg);
36+
-ms-transform: rotate(45deg);
37+
-o-transform: rotate(45deg);
38+
transform: rotate(45deg);
39+
}
40+
41+
.github-fork-ribbon:before {
42+
content: "";
43+
44+
/* Add a bit of padding to give some substance outside the "stitching" */
45+
padding: .38em 0;
46+
47+
/* Set the base colour */
48+
background-color: #a00;
49+
50+
/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
51+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
52+
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
53+
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
54+
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
55+
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
56+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
57+
58+
/* Add a drop shadow */
59+
-webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
60+
-moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
61+
box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
62+
63+
pointer-events: auto;
64+
}
65+
66+
.github-fork-ribbon:after {
67+
/* Set the text from the title attribute */
68+
content: attr(title);
69+
70+
/* Set the text properties */
71+
color: #fff;
72+
font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
73+
line-height: 1.54em;
74+
text-decoration: none;
75+
text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
76+
text-align: center;
77+
text-indent: 0;
78+
79+
/* Set the layout properties */
80+
padding: .15em 0;
81+
margin: .15em 0;
82+
83+
/* Add "stitching" effect */
84+
border-width: .08em 0;
85+
border-style: dotted;
86+
border-color: #fff;
87+
border-color: rgba(255, 255, 255, 0.7);
88+
}
89+
90+
.github-fork-ribbon.left-top, .github-fork-ribbon.left-bottom {
91+
right: auto;
92+
left: 0;
93+
}
94+
95+
.github-fork-ribbon.left-bottom, .github-fork-ribbon.right-bottom {
96+
top: auto;
97+
bottom: 0;
98+
}
99+
100+
.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after {
101+
right: auto;
102+
left: -3.23em;
103+
}
104+
105+
.github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
106+
top: auto;
107+
bottom: 3.23em;
108+
}
109+
110+
.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
111+
-webkit-transform: rotate(-45deg);
112+
-moz-transform: rotate(-45deg);
113+
-ms-transform: rotate(-45deg);
114+
-o-transform: rotate(-45deg);
115+
transform: rotate(-45deg);
116+
}

‎css/stylesheet.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ button.active {
4343
}
4444

4545
button.indent {
46-
padding-left: 24px;
46+
padding-left: 36px;
4747
}
4848

4949
.divider {
@@ -234,6 +234,10 @@ pre {
234234
background: rgba(120, 0, 0, .8);
235235
}
236236

237+
.github-fork-ribbon.left-bottom:before {
238+
background-color: #333;
239+
}
240+
237241
.mtbl-wrapper {
238242
width: 100%;
239243
height: 100%;

‎index.html

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
77
<link rel="stylesheet" href="css/font-awesome.min.css">
88
<link rel="stylesheet" href="css/stylesheet.css">
9+
<link rel="stylesheet" href="css/gh-fork-ribbon.css"/>
910
</head>
1011
<body>
1112
<nav>
@@ -78,6 +79,7 @@ <h3>Reference</h3>
7879
</div>
7980
<div class="toast_container">
8081
</div>
82+
<a class="github-fork-ribbon left-bottom" href="http://github.com/parkjs814/AlgorithmVisualizer" title="Fork me on GitHub">Fork me on GitHub</a>
8183
<script src="js/jquery-2.2.3.min.js"></script>
8284
<script src="js/sigma/sigma.min.js"></script>
8385
<script src="js/sigma/plugins/sigma.plugins.dragNodes.min.js"></script>

0 commit comments

Comments
 (0)