Merge pull request #8628 from QuLogic/css-fork-ribbon

tacaswell · web-flow · commit 0d0b1c194b81 · 2017-08-03T21:26:37.000-04:00
DOC: Use CSS-based Fork-on-GitHub ribbon.
diff --git a/doc/_static/mpl.css b/doc/_static/mpl.css
@@ -710,6 +710,58 @@ figcaption {
   text-align: center;
 }
 
+/* Fork me on GitHub "button" */
+#forkongithub a{
+  background:#FF7F0E;
+  color:#fff !important;
+  text-decoration:none;
+  text-align:center;
+  font-weight:bold;
+  padding:5px 40px;
+  line-height:1.5rem;
+  position:relative;
+  transition:background .25s ease;
+}
+#forkongithub a:hover{
+  background:#CA7900;
+}
+#forkongithub a::before,#forkongithub a::after{
+  content:"";
+  width:100%;
+  display:block;
+  position:absolute;
+  top:1px;
+  left:0;
+  height:1px;
+  background:#fff;
+}
+#forkongithub a::after{
+  bottom:1px;
+  top:auto;
+}
+@media screen and (min-width:700px){
+  #forkongithub{
+    position:absolute;
+    top:0;
+    right:0;
+    width:150px;
+    overflow:hidden;
+    height:150px;
+    z-index:9999;
+  }
+  #forkongithub a{
+    width:150px;
+    position:absolute;
+    top:40px;
+    right:-60px;
+    transform:rotate(45deg);
+    -webkit-transform:rotate(45deg);
+    -ms-transform:rotate(45deg);
+    -moz-transform:rotate(45deg);
+    -o-transform:rotate(45deg);
+    box-shadow:4px 4px 10px rgba(0,0,0,0.8);
+  }
+}
 
 .donate_button {
     background:#11557C;
diff --git a/doc/_templates/layout.html b/doc/_templates/layout.html
@@ -162,18 +162,15 @@ <h3>{{ _('Navigation') }}</h3>
 
 {% block relbar1 %}
 
-<!-- The "Fork me on github" ribbon -->
-<img style="float: right; margin-bottom: -40px; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" usemap="#ribbonmap"/>
-<map name="ribbonmap">
-    <area shape="poly" coords="15,0,148,-1,148,135" href="https://github.com/matplotlib/matplotlib" title="Fork me on GitHub" />
-</map>
-
-<div style="background-color: white; text-align: left; padding: 10px 10px 15px 15px">
+<div style="background-color: white; text-align: left; padding: 10px 10px 15px 15px; position: relative;">
 {%- if builder in ('htmlhelp', 'devhelp', 'latex') %}
 <a href="{{ pathto('index') }}"><img src="{{pathto("_static/logo2.png", 1) }}" width="540px" border="0" alt="matplotlib"/></a>
 {%- else %}
 <a href="{{ pathto('index') }}"><img src="{{pathto("_static/logo2.svg", 1) }}" width="540px" border="0" alt="matplotlib"/></a>
 {%- endif %}
+
+<!-- The "Fork me on github" ribbon -->
+<div id="forkongithub"><a href="https://github.com/matplotlib/matplotlib">Fork me on GitHub</a></div>
 </div>
 
 {% endblock %}
