Merge pull request #8621 from readthedocs/davidfischer/floating-ad-placement

Floating ad placement for docs.readthedocs.io

Author: davidfischer

docs/_static/css/custom.css

@@ -2,4 +2,46 @@
   border-radius: 50%;
   box-shadow: 0 0 0 7px #fff, 0 0 0 8px #cecece;
   margin: 9px 17px 9px 3px;
-}
+}
+
+
+/* RTD docs ad placement in the lower right */
+#rtd-stickybox {
+  z-index: 1000;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
+#rtd-stickybox .ea-content {
+  background: rgba(230, 230, 230);
+}
+#rtd-stickybox .stickybox-hide {
+  cursor: pointer;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+
+  background-color: #fefefe;
+  border: 1px solid #088cdb;
+  border-radius: 50%;
+  color: #088cdb;
+  font-size: 0.75rem;
+  text-align: center;
+  height: 1rem;
+  width: 1rem;
+}
+
+/* Placement under content on smaller screens/tablets/mobile */
+@media (max-width: 1340px) {
+  #rtd-stickybox {
+    position: static;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    text-align: center;
+  }
+
+  #rtd-stickybox .stickybox-hide {
+    display: none;
+  }
+}

docs/_templates/ethicalads.html

@@ -0,0 +1,4 @@
+<div id="rtd-stickybox">
+  <div class="stickybox-hide" onclick="document.querySelector('#rtd-stickybox').remove();">&#215;</div>
+  <div class="raised" data-ea-publisher="readthedocs" data-ea-type="image"></div>
+</div>

docs/_templates/layout.html

@@ -0,0 +1,8 @@
+{% extends "sphinx_rtd_theme/layout.html" %}
+
+
+{% block document %}
+  {{ super() }}
+
+  {% include "ethicalads.html" %}
+{% endblock document %}