Hide overflow portions of the ribbon

Fixes simonwhitaker#8
PatrickJS · Aug 29, 2012 · ffcab6d · ffcab6d
1 parent 0f99ad4
commit ffcab6d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 21 deletions.
diff --git a/gh-fork-ribbon.css b/gh-fork-ribbon.css
@@ -48,35 +48,41 @@
  border-color: rgba(255,255,255,0.7);
 }
 
+.github-fork-ribbon-wrapper {
+ width: 150px;
+ height: 150px;
+ position: absolute;
+ overflow: hidden;
+ top: 0;
+}
+
+.github-fork-ribbon-wrapper.left {
+ left: 0;
+}
+
+.github-fork-ribbon-wrapper.right {
+ right: 0;
+}
 
-.github-fork-ribbon.right {
- /* Attach to the right of the page */
- top: 106px;
- right: -5px;
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+ top: 42px;
+ right: -43px;
 
  /* Rotate the banner 45 degrees */
- -webkit-transform-origin: right bottom;
  -webkit-transform: rotate(45deg);
- -moz-transform-origin: right bottom;
  -moz-transform: rotate(45deg);
- -o-transform-origin: right bottom;
  -o-transform: rotate(45deg);
- transform-origin: right bottom;
  transform: rotate(45deg);
 }
 
-.github-fork-ribbon.left {
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  /* Attach to the left of the page */
- top: 106px;
- left: -5px;
+ top: 42px;
+ left: -43px;
 
  /* Rotate the banner -45 degrees */
- -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(-45deg);
- -moz-transform-origin: left bottom;
  -moz-transform: rotate(-45deg);
- -o-transform-origin: left bottom;
  -o-transform: rotate(-45deg);
- transform-origin: left bottom;
  transform: rotate(-45deg);
 }
diff --git a/gh-fork-ribbon.ie.css b/gh-fork-ribbon.ie.css
@@ -1,6 +1,6 @@
 /* IE voodoo courtesy of http:https://stackoverflow.com/a/4617511/263871 and
  * http:https://www.useragentman.com/IETransformsTranslator */
-.github-fork-ribbon.right {
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
  /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
  top: -22px;
  right: -22px;
@@ -17,7 +17,7 @@
  );
 }
 
-.github-fork-ribbon.left {
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  top: -22px;
  left: -22px;
 

diff --git a/index.html b/index.html
@@ -33,10 +33,21 @@
  <!-- END COPYING HERE -->
 </head>
 <body>
- <!-- START COPYING HERE -->
- <div class="github-fork-ribbon right"><a href="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/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a></div>
- <div class="github-fork-ribbon left"><a href="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/simonwhitaker/github-fork-ribbon-css">Fork me on GitHub</a></div>
- <!-- END COPYING HERE -->
+ <!-- RIGHT-HAND 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>
+ <!-- RIGHT-HAND RIBBON: END COPYING HERE -->
+
+ <!-- LEFT-HAND 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>
+ <!-- LEFT-HAND RIBBON: END COPYING HERE -->
  <div id="content">
 
  <h1>Fork me on GitHub &ndash; CSS ribbon</h1>