chore: use format=cover

This commit is contained in:
zernonia 2024-10-17 15:22:02 +02:00
parent d48ffcfffb
commit f9615d3657

View File

@ -12,8 +12,9 @@ function init() {
if (!isInitialized) { if (!isInitialized) {
isInitialized = true isInitialized = true
const s = document.createElement('script') const s = document.createElement('script')
s.type = 'text/javascript'
s.id = '_carbonads_js' s.id = '_carbonads_js'
s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}` s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}&format=cover`
s.async = true s.async = true
container.value.appendChild(s) container.value.appendChild(s)
} }
@ -44,40 +45,27 @@ if (carbonOptions) {
<template> <template>
<div <div
ref="container" ref="container"
class="carbon-ads"
/> />
</template> </template>
<style scoped> <style>
.carbon-ads { #carbon-responsive {
@apply !mt-8 w-[238px] flex justify-center items-center p-2 rounded-xl min-h-[256px] text-center leading-[18px] text-xs font-medium bg-card border border-muted; @apply w-[238px] !mt-6;
} }
.carbon-ads :deep(img) { .carbon-responsive-wrap {
@apply mx-auto rounded-md; @apply bg-muted/50 border border-muted p-4 rounded-md flex flex-col items-center !important;
} }
.carbon-ads :deep(.carbon-text) { .carbon-responsive-wrap .carbon-img {
@apply block mx-auto pt-3 text-[var(--vp-carbon-ads-text-color)] transition-colors duration-200; @apply flex-none rounded overflow-hidden !important;
} }
.carbon-ads :deep(.carbon-text:hover) { .carbon-responsive-wrap .carbon-text {
@apply text-[var(--vp-carbon-ads-hover-text-color)]; @apply text-muted-foreground text-sm flex-none text-center !important;
} }
.carbon-ads :deep(.carbon-poweredby) { #carbonads .carbon-poweredby {
@apply block pt-1.5 text-[11px] font-medium text-[var(--vp-carbon-ads-poweredby-color)] uppercase transition-colors duration-200; @apply bg-background text-muted-foreground block text-right text-[10px] uppercase no-underline !important;
}
.carbon-ads :deep(.carbon-poweredby:hover) {
@apply text-[var(--vp-carbon-ads-hover-poweredby-color)];
}
.carbon-ads :deep(> div) {
@apply hidden;
}
.carbon-ads :deep(> div:first-of-type) {
@apply block;
} }
</style> </style>