Switch back to EthicalAds (#701)

* Switch back to EthicalAds

* Update privacy policy

* Cleanup a little

assets/styles/global.scss

@@ -315,18 +315,6 @@ textarea {
   }
 }
 
-.ea-content {
-  background: var(--color-ad) !important;
-  border-radius: var(--size-rounded-card) !important;
-  margin: 0 !important;
-  box-shadow: var(--shadow-faint) !important;
-}
-
-.ea-callout {
-  margin: 0.25rem 0 !important;
-  padding: 0 !important;
-}
-
 button {
   padding: 0.5rem 0;
   //outline: none; Bad for accessibility

components/ads/Advertisement.vue

@@ -1,14 +1,49 @@
 <template>
-  <div class="info-wrapper">
+  <div class="content-wrapper">
+    <div
+      v-if="!isBlocked"
+      data-ea-publisher="modrinth-com"
+      data-ea-type="text"
+    ></div>
+    <div
+      v-else
+      data-ea-publisher="modrinth-com"
+      data-ea-type="text"
+      class="loaded"
+    >
+      <div class="ea-placement ea-type-text">
+        <div class="ea-content">
+          <div class="ea-text">
+            <a
+              href="https://docs.modrinth.com/docs/details/carbon/"
+              rel="nofollow noopener"
+              target="_blank"
+            >
+              <span>
+                Please disable your adblocker. Advertisements support this site
+                and its creators.
+              </span>
+              <strong>View instructions here!</strong>
+            </a>
+          </div>
+        </div>
+        <div class="ea-callout">
+          <a
+            rel="nofollow noopener"
+            target="_blank"
+            href="https://ethicalads.io?ref=ea-text"
+          >
+            Ad by EthicalAds
+          </a>
+        </div>
+      </div>
+    </div>
     <client-only>
       <script
-        id="_carbonads_js"
-        ref="carbon-script"
         async
-        type="text/javascript"
+        src="https://media.ethicalads.io/media/client/ethicalads.min.js"
-        src="//cdn.carbonads.com/carbon.js?serve=CEAIKK3N&placement=modrinthcom"
+        @error="isBlocked = true"
-        @error="onBlocked"
+      />
-      ></script>
     </client-only>
   </div>
 </template>
@@ -16,166 +51,105 @@
 <script>
 export default {
   name: 'Advertisement',
-  methods: {
+  data() {
-    onBlocked() {
+    return {
-      this.$refs['carbon-script'].outerHTML += `
+      isBlocked: false,
-      <div id="info-popup">
+    }
-        <span>
-          <span class="info-popup-wrap">
-            <a
-              class="info-popup-img"
-              href="https://docs.modrinth.com/docs/details/carbon"
-            >
-              <img
-                src="https://cdn.modrinth.com/barrier_fixes.png"
-                alt="ads via Carbon"
-              />
-            </a>
-            <a
-              href="https://docs.modrinth.com/docs/details/carbon"
-              class="info-popup-text"
-            >
-              Please disable your adblocker. Advertisements support this site
-              and its creators.
-            </a>
-          </span>
-          <a
-            href="https://docs.modrinth.com/docs/details/carbon"
-            class="info-popup-poweredby"
-            target="_blank"
-            rel="noopener sponsored"
-            >ads via Carbon
-          </a>
-        </span>
-      </div>
-      `
-    },
   },
 }
 </script>
 
 <style lang="scss">
-.do-not-style {
+.content-wrapper {
-  position: absolute !important;
+  min-height: 46.2px;
+  margin-bottom: var(--spacing-card-md);
 
-  padding: 0 !important;
+  background: var(--color-ad) !important;
+  border: 3px solid var(--color-ad-raised) !important;
+  border-radius: var(--size-rounded-card) !important;
+}
+
+.loaded {
+  position: relative;
+}
+
+.ea-content {
+  color: var(--color-text) !important;
+
+  box-shadow: none !important;
+  background: none !important;
+  border-radius: 0 !important;
   margin: 0 !important;
 
-  top: 0 !important;
+  padding: 1em;
-  left: 0 !important;
-  min-height: 2px !important;
-  height: 2px !important;
-  max-height: 2px !important;
-
-  min-width: 2px !important;
-  width: 2px !important;
-  max-width: 2px !important;
-
-  background: none !important;
-  border: none !important;
-}
-
-.info-wrapper {
-  min-height: 122px;
-  color: var(--color-text);
-  background: var(--color-ad);
-  margin-bottom: var(--spacing-card-md);
-  border-radius: var(--size-rounded-card);
-
-  border: 3px solid var(--color-ad-raised);
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-
-  position: relative;
-
-  & > * {
-    display: none;
-  }
-
-  div:last-child {
-    display: block;
-  }
-}
-
-#carbonads_1 {
-  display: none;
-}
-
-#carbonads,
-#info-popup {
-  overflow: hidden;
-  max-width: 100%;
-
-  font-size: 22px;
-  box-sizing: content-box;
-
-  padding: var(--spacing-card-sm) var(--spacing-card-sm);
-
-  > span {
-    display: block;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-
-    &:hover {
-      color: inherit;
-    }
-  }
-}
-
-.carbon-wrap,
-.info-popup-wrap {
-  display: flex;
-  align-items: center;
-}
-
-.carbon-img,
-.info-popup-img {
-  display: block;
-  margin: 0;
-  line-height: 1;
-
-  img {
-    display: block;
-    height: 100px;
-    width: auto;
-    border-radius: var(--size-rounded-card);
-  }
-}
-
-.carbon-text,
-.info-popup-text {
-  display: block;
-  padding: 0 1em;
-  line-height: 1.35;
   text-align: left;
 }
 
-.carbon-poweredby,
+.ea-callout {
-.info-popup-poweredby {
-  display: block;
-  padding: 8px 10px;
-  background: var(--color-ad-raised);
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 0.1ch;
-  font-weight: 600;
-  font-size: 0.5em;
-  line-height: 1;
-  border-top-left-radius: var(--size-rounded-card);
   position: absolute;
-  bottom: -3px;
+  bottom: -2px;
-  right: -3px;
+  right: -2px;
+  text-align: center;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.8em;
+  background: var(--color-ad-raised);
+  letter-spacing: 0.1ch;
+
+  font-style: normal !important;
+  margin: 0 !important;
+  padding: 2px 10px !important;
+  border-top-left-radius: var(--size-rounded-card);
   border-bottom-right-radius: var(--size-rounded-card);
 }
 
-@media only screen and (max-width: 759px) {
+[data-ea-publisher].loaded .ea-callout a,
-  .carbon-text,
+[data-ea-type].loaded .ea-callout a {
-  .info-popup-text {
+  font-size: 0.8em;
-    font-size: 14px;
+
+  &:hover {
+    color: var(--color-text) !important;
+  }
+
+  &:link {
+    color: var(--color-text) !important;
+  }
+}
+
+[data-ea-publisher].loaded .ea-content a,
+[data-ea-type].loaded .ea-content a {
+  b,
+  strong {
+    color: #088cdb;
+  }
+
+  &:link {
+    color: var(--color-text) !important;
+  }
+}
+
+[data-ea-type='text'].loaded .ea-content,
+.ea-type-text .ea-content {
+  text-align: left;
+}
+
+[data-ea-publisher].loaded .ea-content,
+[data-ea-type].loaded .ea-content {
+  color: #505050;
+}
+
+[data-ea-publisher].loaded,
+[data-ea-type].loaded {
+  font-size: 14px;
+  font-family: var(--font-standard) !important;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1.3em;
+}
+
+@media screen and (max-width: 800px) {
+  .ea-text {
+    margin-bottom: 0.5rem;
   }
 }
 </style>

pages/legal/privacy.vue

@@ -144,10 +144,10 @@
       </p>
 
       <p>
-        Modrinth makes use of external ads providers. These include BuySellAds.
+        Modrinth makes use of external ads providers. These include EthicalAds.
-        You can read BuySellAds's privacy policy here and the data they collect:
+        You can read EthicalAds's privacy policy here and the data they collect:
-        <a href="https://www.buysellads.com/about/privacy"
+        <a href="https://www.ethicalads.io/privacy-policy/"
-          >https://www.buysellads.com/about/privacy</a
+          >https://www.ethicalads.io/privacy-policy/</a
         >
       </p>