From 44add78161ac8f8a3322b27af04cdccd9df18aca Mon Sep 17 00:00:00 2001 From: Sergio Oliveira Date: Mon, 3 Nov 2014 18:54:05 -0200 Subject: [PATCH] Added fork me ribbon --- colab/static/third-party/ribbon/gh-fork-ribbon.css | 140 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ colab/static/third-party/ribbon/gh-fork-ribbon.ie.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ colab/templates/base.html | 13 +++++++++++++ 3 files changed, 231 insertions(+), 0 deletions(-) create mode 100644 colab/static/third-party/ribbon/gh-fork-ribbon.css create mode 100644 colab/static/third-party/ribbon/gh-fork-ribbon.ie.css diff --git a/colab/static/third-party/ribbon/gh-fork-ribbon.css b/colab/static/third-party/ribbon/gh-fork-ribbon.css new file mode 100644 index 0000000..5806121 --- /dev/null +++ b/colab/static/third-party/ribbon/gh-fork-ribbon.css @@ -0,0 +1,140 @@ +/*! + * "Fork me on GitHub" CSS ribbon v0.1.1 | 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 { + /* The right and left classes determine the side we attach our banner to */ + position: absolute; + + /* Add a bit of padding to give some substance outside the "stitching" */ + padding: 2px 0; + + /* Set the base colour */ + background-color: #a00; + + /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */ + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15))); + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); + background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); + 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); + + /* 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 { + /* Set the text properties */ + color: #fff; + text-decoration: none; + text-shadow: 0 -1px 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; + + /* Set the layout properties */ + display: inline-block; + padding: 2px 0; + + /* Add "stitching" effect */ + border-width: 1px 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 { + left: 0; +} + +.github-fork-ribbon-wrapper.right { + 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; + + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} + +.github-fork-ribbon-wrapper.left .github-fork-ribbon { + top: 42px; + 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.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); +} diff --git a/colab/static/third-party/ribbon/gh-fork-ribbon.ie.css b/colab/static/third-party/ribbon/gh-fork-ribbon.ie.css new file mode 100644 index 0000000..9bfbd06 --- /dev/null +++ b/colab/static/third-party/ribbon/gh-fork-ribbon.ie.css @@ -0,0 +1,78 @@ +/*! + * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License + * https://github.com/simonwhitaker/github-fork-ribbon-css +*/ + +/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and + * http://www.useragentman.com/IETransformsTranslator */ + + .github-fork-ribbon { + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000'); +} + +.github-fork-ribbon-wrapper.right .github-fork-ribbon { + /* IE positioning hack (couldn't find a transform-origin alternative for IE) */ + top: -22px; + right: -62px; + + /* 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; + + /* 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-wrapper.right-bottom .github-fork-ribbon { + top: 12px; + right: -62px; + + /* 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' + ); +} diff --git a/colab/templates/base.html b/colab/templates/base.html index e65e3ad..dde1a47 100644 --- a/colab/templates/base.html +++ b/colab/templates/base.html @@ -22,6 +22,12 @@ href="{% static 'third-party/font-awesome/css/font-awesome.min.css' %}" type="text/css" media="screen" /> + + + + @@ -46,6 +52,13 @@ {% browserid_info %} + {% block ribbon %} +
+
+ {% trans 'Fork me!' %} +
+
+ {% endblock %} {% block navbar %}