Update ads + careers (#994)

* Update ads + careers

* fix prettier errors

components/ads/Advertisement.vue

@@ -1,94 +1,86 @@
 <template>
-  <div class="modrinth-content-wrapper">
+  <div class="MYYLVTXBPUVWMLVBPVSDLHADDRYFBF">
-    <div data-ea-publisher="modrinth-com" data-ea-type="text" class="loaded">
+    <div class="MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-0">
-      <div class="ea-placement ea-type-text">
+      <div class="MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-1">
-        <div class="ea-content">
+        <div class="MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-2">
-          <div class="ea-text">
-            <a
-              href="https://exaroton.com/?utm_source=modrinth&utm_medium=text&utm_campaign=host&utm_content=top"
-              rel="noopener noreferrer nofollow sponsored"
-              target="_blank"
-            >
-              <LightIcon
-                v-if="$colorMode.value === 'light'"
-                class="brand-icon"
-              />
-              <DarkIcon v-else class="brand-icon" />
-              <span>
-                <span> Host your Minecraft server on </span>
-                <strong>exaroton</strong>
-                <span>
-                  - only pay while the server is running - billed per second.
-                </span>
-              </span>
-            </a>
-          </div>
-        </div>
-        <div class="ea-callout">
           <a
+            href="https://exaroton.com/?utm_source=modrinth&utm_medium=text&utm_campaign=host&utm_content=top"
             rel="noopener noreferrer nofollow sponsored"
             target="_blank"
-            href="https://adrinth.com"
           >
-            Ads via Adrinth
+            <ColorScheme>
+              <LightIcon
+                v-if="$colorMode.value === 'light'"
+                class="MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-3"
+              />
+              <DarkIcon v-else class="MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-3" />
+            </ColorScheme>
+            <span>
+              <span> Host your Minecraft server on </span>
+              <strong>exaroton</strong>
+              <span>
+                - only pay while the server is running - billed per second.
+              </span>
+            </span>
           </a>
         </div>
       </div>
+      <div class="MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-4">
+        <a
+          rel="noopener noreferrer nofollow sponsored"
+          target="_blank"
+          href="https://adrinth.com"
+        >
+          Ads via Adrinth
+        </a>
+      </div>
     </div>
   </div>
 </template>
-
 <script>
 import LightIcon from '~/assets/images/external/exaroton-light.svg?inline'
 import DarkIcon from '~/assets/images/external/exaroton-dark.svg?inline'
 
 export default {
-  name: 'Advertisement',
   components: {
     LightIcon,
     DarkIcon,
   },
-  data() {
-    return {
-      isBlocked: true,
-    }
-  },
 }
 </script>
 
 <style lang="scss">
-.modrinth-content-wrapper {
+.MYYLVTXBPUVWMLVBPVSDLHADDRYFBF {
-  min-height: 46.2px;
-  margin-bottom: var(--spacing-card-md);
-
-  background: var(--color-ad) !important;
-  border: 3px solid var(--color-ad-raised) !important;
-  border-radius: var(--size-rounded-card) !important;
-}
-
-.loaded {
   position: relative;
+  margin-bottom: var(--spacing-card-md);
+  background: var(--color-ad);
+  border: 3px solid var(--color-ad-raised);
+  border-radius: var(--size-rounded-card);
 }
-
+.MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-0 {
-.ea-content {
+  font-size: 14px;
-  color: var(--color-text) !important;
+  line-height: 1.3em;
-
+}
-  box-shadow: none !important;
+.MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-1 {
-  background: none !important;
+  color: var(--color-text);
-  border-radius: 0 !important;
-  margin: 0 !important;
-
   padding: 1em;
   text-align: left;
 }
-
+.MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-2 a {
-.brand-icon {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-2 a b,
+.MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-2 a strong {
+  color: #088cdb;
+}
+.MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-3 {
   padding-top: 1px;
   height: 1.2rem;
   width: auto;
 }
-
+.MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-4 a {
-.ea-callout {
   position: absolute;
   bottom: -2px;
   right: -2px;
@@ -98,75 +90,21 @@ export default {
   font-size: 0.8em;
   background: var(--color-ad-raised);
   letter-spacing: 0.1ch;
-
+  margin: 0;
-  font-style: normal !important;
+  padding: 2px 10px;
-  margin: 0 !important;
-  padding: 2px 10px !important;
   border-top-left-radius: var(--size-rounded-card);
   border-bottom-right-radius: var(--size-rounded-card);
-}
-
-[data-ea-publisher].loaded .ea-callout a,
-[data-ea-type].loaded .ea-callout a {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-
-  font-size: 0.8em;
-
-  &: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 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  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) {
-  [data-ea-publisher].loaded .ea-content a,
+  .MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-2 {
-  [data-ea-type].loaded .ea-content a {
+    margin-bottom: 0.5rem;
+  }
+  .MYYLVTXBPUVWMLVBPVSDLHADDRYFBF-2 a {
     align-items: flex-start;
     flex-direction: column;
   }
-
-  .ea-text {
-    margin-bottom: 0.5rem;
-  }
 }
 </style>

layouts/default.vue

@@ -365,7 +365,7 @@
         <nuxt-link to="/legal/privacy">Privacy</nuxt-link>
         <nuxt-link to="/legal/rules">Rules</nuxt-link>
         <a :target="$external()" href="https://careers.modrinth.com">
-          Careers <span class="count-bubble">2</span>
+          Careers
         </a>
       </div>
       <div class="links links-2" role="region" aria-label="Resources">