docs: fix layout shift ad

diff --git a/docs/.vitepress/theme/components/CarbonAds.vue b/docs/.vitepress/theme/components/CarbonAds.vue
index 7b51cd0297fa31be2147a5d09bf89579b9574a56..94814564c8e26b6ad46d0a1241a6ea7618dc916a 100644 (file)
--- a/docs/.vitepress/theme/components/CarbonAds.vue
+++ b/docs/.vitepress/theme/components/CarbonAds.vue
@@ -1,95 +1,109 @@
 <template>
-  <div class="carbon-ads" ref="el"></div>
+  <div class="carbon-ads" ref="el" />
 </template>
 
-<script>
-import { onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { defineProps, ref, onMounted } from 'vue'
 
-export default {
-  name: 'CarbonAds',
-  props: {
-    code: {
-      type: String,
-      required: true,
-    },
-    placement: {
-      type: String,
-      required: true,
-    },
-  },
+const { code, placement } = defineProps<{
+  code: string
+  placement: string
+}>()
 
-  setup(props) {
-    const el = ref()
+const el = ref()
 
-    onMounted(() => {
-      const s = document.createElement('script')
-      s.id = '_carbonads_js'
-      s.src = `//cdn.carbonads.com/carbon.js?serve=${props.code}&placement=${props.placement}`
-      el.value.appendChild(s)
-    })
-
-    return { el }
-  },
-}
+onMounted(() => {
+  const s = document.createElement('script')
+  s.id = '_carbonads_js'
+  s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
+  el.value.appendChild(s)
+})
 </script>
 
-<style>
+<style scoped>
 .carbon-ads {
-  min-height: 102px;
+  padding: 1.75rem 0 0;
+  border-radius: 4px;
+  margin: 0 auto;
+  max-width: 280px;
   font-size: 0.75rem;
+  background-color: rgba(255, 255, 255, 0.8);
+}
 
-  width: 130px;
-  position: fixed;
-  z-index: 19;
-  bottom: 0;
-  right: 22px;
-  margin: 10px;
+.carbon-ads::after {
+  clear: both;
+  display: block;
+  content: '';
 }
 
-@media screen and (max-width: 425px) {
+@media (min-width: 420px) {
   .carbon-ads {
-    width: auto;
-    right: 0;
+    position: relative;
+    right: -8px;
+    z-index: 1;
+    float: right;
+    margin: -8px -8px 24px 24px;
+    padding: 8px;
+    width: 146px;
+    max-width: 100%;
   }
 }
 
-@media screen and (max-width: 1300px) {
+@media (max-width: 420px) {
   .carbon-ads {
-    z-index: 1;
-    position: relative;
-    top: 12px;
-    right: 0;
-    float: right;
-    margin: 0 0 20px 30px;
+    /* Avoid layout shift */
+    height: 105px;
   }
 }
 
-.carbon-ads a {
-  color: #444;
-  font-weight: normal;
-  display: inline;
+@media (min-width: 1400px) {
+  .carbon-ads {
+    position: fixed;
+    top: auto;
+    right: 8px;
+    bottom: 8px;
+    float: none;
+    margin: 0;
+  }
 }
 
-.carbon-ads .carbon-img {
+.carbon-ads ::v-deep(.carbon-img) {
   float: left;
-  margin-right: 1rem;
-  border: 1px solid var(--border-color);
+  margin-right: 0.75rem;
+  max-width: 100px;
+  border: 1px solid var(--c-divider);
 }
 
-.carbon-ads .carbon-img img {
-  display: block;
+@media (min-width: 420px) {
+  .carbon-ads ::v-deep(.carbon-img) {
+    float: none;
+    display: block;
+    margin-right: 0;
+    max-width: 130px;
+  }
 }
 
-.carbon-ads .carbon-poweredby {
-  color: #999;
+.carbon-ads ::v-deep(.carbon-img img) {
   display: block;
-  margin-top: 0.5em;
+  width: 100%;
 }
 
-@media (max-width: 719px) {
-  .carbon-ads .carbon-img img {
-    width: 100px;
-    height: 77px;
+@media (min-width: 420px) {
+  .carbon-ads ::v-deep(.carbon-text) {
+    padding-top: 8px;
   }
 }
+
+.carbon-ads ::v-deep(.carbon-text) {
+  display: block;
+  font-weight: 400;
+  color: var(--c-text-light);
+}
+
+.carbon-ads ::v-deep(.carbon-poweredby) {
+  display: block;
+  padding-top: 2px;
+  font-weight: 400;
+  color: var(--c-text-lighter);
+}
 </style>