Added bottom positions

PatrickJS · Dec 27, 2012 · f77fd78 · f77fd78
1 parent 88b2f9d
commit f77fd78
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/gh-fork-ribbon.css b/gh-fork-ribbon.css
@@ -22,6 +22,7 @@
  -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
 }
+
 .github-fork-ribbon a {
  /* Set the font */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -64,6 +65,20 @@
  right: 0;
 }
 
+.github-fork-ribbon-wrapper.left-bottom {
+ position: fixed;
+ top: inherit;
+ bottom: 0;
+ left: 0;
+}
+
+.github-fork-ribbon-wrapper.right-bottom {
+ position: fixed;
+ top: inherit;
+ bottom: 0;
+ right: 0;
+}
+
 .github-fork-ribbon-wrapper.right .github-fork-ribbon {
  top: 42px;
  right: -43px;
@@ -86,3 +101,34 @@
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
 }
+
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+ /* Attach to the left of the page */
+ top: 75px;
+ left: -64px;
+
+ /* Rotate the banner -45 degrees */
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon a {
+ padding-left: 18px;
+}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+ /* Attach to the left of the page */
+ top: 89px;
+ left: -10px;
+
+ /* Rotate the banner -45 degrees */
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon a {
+ padding-left: 15px;
+}
diff --git a/index.html b/index.html
@@ -74,5 +74,19 @@ <h2>About</h2>
  It is not endorsed in any way by GitHub.
  </p>
  </div>
+ <!-- RIGHT-HAND Bottom 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>
+ <!-- RIGHT-HAND RIBBON: END COPYING HERE -->
+
+ <!-- LEFT-HAND Bottom 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>
 </body>
 </html>