fix: Fix the in-document advertising styles.

pull/2973/head
Neo 10 months ago committed by Evan You
parent ca478f19b1
commit e4b5026060

@ -3,26 +3,25 @@ import icon from './documate.vue'
</script> </script>
<template> <template>
<a class="ad-component" target="_blank" href="https://documate.site/"> <div class="ad-component">
<icon class="icon"/> <a target="_blank" href="https://documate.site/">
<span>Embed AI chat in your VitePress using your own content. Open-source.</span> <icon class="icon"/>
<span class="cta">Try now </span> <span>Embed AI chat in your VitePress using your own content. Open-source.</span>
</a> <span class="cta">Try now </span>
</a>
</div>
</template> </template>
<style scoped> <style scoped>
.ad-component { .ad-component {
margin-bottom: 2rem; margin-bottom: 2rem;
padding: .65rem 1rem; padding: .5rem .85rem;
border: 1px solid var(--vp-c-divider); border: 1px solid var(--vp-c-divider);
border-radius: 4px; border-radius: 4px;
text-align: center;
display: flex;
align-items: center;
text-decoration: none; text-decoration: none;
color: var(--vp-c-text-2); color: var(--vp-c-text-2);
transition: color 0.4s ease-in-out; transition: color 0.4s ease-in-out;
font-size: 0.9rem; font-size: 0.8rem;
} }
.ad-component:hover { .ad-component:hover {
@ -30,13 +29,14 @@ import icon from './documate.vue'
} }
.ad-component .icon { .ad-component .icon {
width: 1rem; display: inline-block;
height: 1rem; width: .75rem;
margin-right: 0.45rem; height: .75rem;
margin-right: 0.3rem;
} }
.ad-component .cta { .ad-component .cta {
margin-left: 0.2rem; margin-left: 0.3rem;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }

Loading…
Cancel
Save