EthicalAds: use theme-logic to decide position

package.json

@@ -16,9 +16,9 @@
   "author": "Read the Docs, Inc",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-syntax-import-assertions": "^7.24.1",
-    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-env": "^7.24.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@open-wc/testing": "^4.0.0",
@@ -28,7 +28,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@web/dev-server-import-maps": "^0.2.0",
     "@web/test-runner": "^0.18.1",
-    "ajv": "^8.12.0",
+    "ajv": "^8.13.0",
     "babel-loader": "^9.1.3",
     "css-loader": "^7.1.1",
     "diff-match-patch": "1.0.5",
@@ -39,7 +39,7 @@
     "object-path": "^0.11.8",
     "prettier": "^3.2.5",
     "rollup-plugin-lit-css": "^5.0.0",
-    "sinon": "^17.0.1",
+    "sinon": "^17.0.2",
     "tippy.js": "^6.3.7",
     "tslib": "^2.6.2",
     "unfetch": "^4.2.0",

src/ethicalads.css

@@ -0,0 +1,230 @@
+/* Read the Docs promotional block, only applicable to RTD.org
+
+To support sphinx_rtd_theme, a `wy-menu` element is added. Other themes are
+targeted using the theme identifier and use custom elements instead of a CSS
+framework html structure.
+
+*/
+
+div.ethical-sidebar,
+div.ethical-footer {
+  display: block !important;
+}
+.ethical-sidebar,
+.ethical-footer {
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.ethical-sidebar img,
+.ethical-footer img {
+  width: 120px;
+  height: 90px;
+  display: inline-block;
+}
+.ethical-sidebar .ethical-callout,
+.ethical-footer .ethical-callout {
+  padding-top: 1em;
+  clear: both;
+}
+.ethical-sidebar .ethical-pixel,
+.ethical-footer .ethical-pixel,
+.ethical-fixedfooter .ethical-pixel {
+  display: none !important;
+}
+.ethical-sidebar .ethical-text,
+.ethical-footer .ethical-text {
+  margin-top: 1em;
+}
+.ethical-sidebar .ethical-image-link,
+.ethical-footer .ethical-image-link {
+  border: 0;
+}
+
+.ethical-sidebar,
+.ethical-footer {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  color: #0a0a0a;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* Techstack badging */
+.ethical-sidebar ul {
+  margin: 0 !important;
+  padding-left: 0;
+  list-style: none;
+}
+.ethical-sidebar ul li {
+  display: inline-block;
+  background-color: lightskyblue;
+  color: black;
+  padding: 0.25em 0.4em;
+  font-size: 75%;
+  font-weight: 700;
+  margin: 0.25em;
+  border-radius: 0.25rem;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+  line-height: 1.41;
+}
+.ethical-sidebar ul li:not(:last-child) {
+  margin-right: 0.25rem;
+}
+
+.ethical-sidebar a,
+.ethical-sidebar a:visited,
+.ethical-sidebar a:hover,
+.ethical-sidebar a:active,
+.ethical-footer a,
+.ethical-footer a:visited,
+.ethical-footer a:hover,
+.ethical-footer a:active {
+  color: #0a0a0a;
+  text-decoration: none !important;
+  border-bottom: 0 !important;
+}
+
+.ethical-callout a {
+  color: #707070 !important;
+  text-decoration: none !important;
+}
+
+/* Sidebar promotions */
+.ethical-sidebar {
+  text-align: center;
+  max-width: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Footer promotions */
+.ethical-footer {
+  text-align: left;
+
+  font-size: 14px;
+  line-height: 20px;
+}
+.ethical-footer img {
+  float: right;
+  margin-left: 25px;
+}
+.ethical-footer .ethical-callout {
+  text-align: center;
+}
+.ethical-footer small {
+  font-size: 10px;
+}
+
+/* Fixed footer promotions */
+.ethical-fixedfooter {
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  background-color: #eee;
+  border-top: 1px solid #bfbfbf;
+  font-size: 12px;
+  line-height: 1.5;
+  padding: 0.5em 1.5em;
+  text-align: center;
+  color: #404040;
+  width: 100%; /* Fallback for Opera Mini */
+  width: 100vw;
+}
+@media (min-width: 769px) {
+  /* Improve viewing on non-mobile */
+  .ethical-fixedfooter {
+    font-size: 13px;
+    padding: 1em 1.5em;
+  }
+}
+.ethical-fixedfooter .ethical-text:before {
+  margin-right: 4px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background-color: #4caf50;
+  color: #fff;
+  content: "Sponsored";
+}
+.ethical-fixedfooter .ethical-callout {
+  color: #999;
+  padding-left: 6px;
+  white-space: nowrap;
+}
+.ethical-fixedfooter a,
+.ethical-fixedfooter a:hover,
+.ethical-fixedfooter a:active,
+.ethical-fixedfooter a:visited {
+  color: #404040;
+  text-decoration: none;
+}
+.ethical-fixedfooter .ethical-close {
+  position: absolute;
+  top: 0;
+  right: 5px;
+  font-size: 20px;
+  line-height: 20px;
+}
+
+/* RTD Theme specific customizations */
+.wy-nav-side .ethical-rtd {
+  /* RTD theme doesn't correctly set the sidebar width */
+  max-width: 300px;
+  padding: 0 1em;
+}
+.ethical-rtd .ethical-sidebar {
+  /* RTD theme doesn't set sidebar text color */
+  color: #b3b3b3;
+
+  font-size: 14px;
+  line-height: 20px;
+}
+
+@media (min-width: 769px) {
+  /* Make sure the fixed footer ad is under the RTD theme version selector */
+  .wy-body-for-nav .ethical-fixedfooter {
+    padding-left: 300px;
+  }
+}
+
+/* Alabaster specific customizations */
+.ethical-alabaster a.ethical-image-link {
+  /* Alabaster adds a border even to image links on hover */
+  border: 0 !important;
+}
+.ethical-alabaster hr {
+  /* Alabaster needs some extra spacing before the footer ad */
+  margin-top: 2em;
+}
+.ethical-alabaster::before {
+  /* Alabaster's search box above the ad is floating */
+  clear: both;
+  content: "";
+  display: table;
+  margin-top: 3em;
+}
+
+/* Dark theme */
+.ethical-dark-theme .ethical-sidebar {
+  background-color: #4e4b4b;
+  border: 1px solid #a0a0a0;
+  color: #c2c2c2 !important;
+}
+.ethical-dark-theme a,
+.ethical-dark-theme a:visited {
+  color: #e6e6e6 !important;
+  border-bottom: 0 !important;
+}
+.ethical-dark-theme .ethical-callout a {
+  color: #b3b3b3 !important;
+}
+
+/* Docusaurus */
+.ethical-docusaurus {
+  margin-left: 10% !important;
+  margin-right: 10% !important;
+}