refactor: tweak small stylings and refactoring

docs/.vitepress/config.js

@@ -7,16 +7,16 @@ module.exports = {
     repo: 'vuejs/vitepress',
     docsDir: 'docs',
 
+    editLinks: true,
+    editLinkText: 'Edit this page on GitHub',
+    lastUpdated: 'Last Updated',
+
     carbonAds: {
       carbon: 'CEBDT27Y',
       custom: 'CKYD62QM',
       placement: 'vuejsorg'
     },
 
-    editLinks: true,
-    editLinkText: 'Edit this page on GitHub',
-    lastUpdated: 'Last Updated',
-
     nav: [
       { text: 'Guide', link: '/' },
       { text: 'Config Reference', link: '/config/basics' },

src/client/theme-default/components/BuySellAds.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="bsa-cpc-wrapper">
-    <div class="bsa-cpc"></div>
+  <div class="buy-sell-ads">
+    <div class="bsa-cpc" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineProps, onMounted } from 'vue'
 
-/* global _bsa */
+// global _bsa
 const ID = 'bsa-cpc-script'
-const { code, placement } = defineProps<{ code: string; placement: string }>()
 
 declare global {
   var _bsa: BSA | undefined
+
   interface BSA {
     init(
       name: string,
@@ -27,99 +27,120 @@ declare global {
   }
 }
 
-function load() {
-  if (typeof _bsa !== 'undefined' && _bsa) {
-    _bsa.init('default', code, `placement:${placement}`, {
-      target: '.bsa-cpc',
-      align: 'horizontal',
-      disable_css: 'true'
-    })
-  }
-}
+const { code, placement } = defineProps<{
+  code: string
+  placement: string
+}>()
 
 onMounted(() => {
   if (!document.getElementById(ID)) {
     const s = document.createElement('script')
+
     s.id = ID
-    s.src = `//m.servedby-buysellads.com/monetization.js`
+    s.src = '//m.servedby-buysellads.com/monetization.js'
+
     document.head.appendChild(s)
-    s.onload = () => {
-      load()
-    }
+
+    s.onload = () => { load() }
   } else {
     load()
   }
 })
-</script>
 
-<style>
-.bsa-cpc-wrapper {
-  font-size: 0.95rem;
-  /* from Page.vue */
-  max-width: 50rem;
-  margin: 0px auto;
-  padding: 1rem 2rem 0;
-  margin-bottom: -1rem;
+function load() {
+  if (typeof _bsa !== 'undefined' && _bsa) {
+    _bsa.init('default', code, `placement:${placement}`, {
+      target: '.bsa-cpc',
+      align: 'horizontal',
+      disable_css: 'true'
+    })
+  }
 }
+</script>
 
-@media (max-width: 419px) {
-  .bsa-cpc-wrapper {
-    padding: 0 1.5rem;
-  }
+<style scoped>
+.buy-sell-ads {
+  margin: 0 auto;
+  padding-top: 2rem;
+  font-size: .85rem;
 }
 
 .bsa-cpc {
-  font-size: 0.9em;
-  background-color: #f8f8f8;
   border-radius: 6px;
+  background-color: #f8f8f8;
 }
 
-.bsa-cpc .default-text {
-  display: inline;
-}
-
-.bsa-cpc a._default_ {
-  text-align: left;
-  display: block;
-  text-decoration: none;
-  padding: 10px 15px 12px;
+.bsa-cpc ::v-deep(a._default_) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
   margin-bottom: 20px;
-  color: #666;
+  padding: 12px;
+  text-decoration: none;
+  line-height: 1.4;
   font-weight: 400;
-  line-height: 18px;
+  color: var(--c-text-light);
 }
 
-.bsa-cpc a._default_ .default-image img {
-  height: 20px;
-  border-radius: 3px;
-  vertical-align: middle;
-  position: relative;
-  top: -1px;
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(a._default_) {
+    flex-wrap: nowrap;
+  }
 }
 
-.bsa-cpc a._default_ .default-title {
-  font-weight: 600;
+.bsa-cpc ::v-deep(.default-ad) {
+  display: none;
 }
 
-.bsa-cpc a._default_ .default-description:after {
-  font-size: 0.85em;
-  content: 'Sponsored';
-  color: #1c90f3;
+.bsa-cpc ::v-deep(a._default_ .default-image) {
+  flex-shrink: 0;
+  margin-right: 12px;
+  width: 24px;
+}
+
+.bsa-cpc ::v-deep(a._default_ .default-image img) {
+  border-radius: 4px;
+  height: 24px;
+  vertical-align: middle;
+}
+
+.bsa-cpc ::v-deep(._default_::after) {
   border: 1px solid #1c90f3;
-  border-radius: 3px;
-  padding: 0 4px 1px;
-  margin-left: 6px;
+  border-radius: 4px;
+  margin-top: 8px;
+  margin-left: 36px;
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: .85em;
+  font-weight: 500;
+  color: #1c90f3;
+  content: 'Sponsored';
 }
 
-.bsa-cpc .default-ad {
-  display: none;
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(._default_::after) {
+    margin-top: 0px;
+    margin-left: 12px;
+  }
 }
 
-.bsa-cpc a._default_ .default-image,
-.bsa-cpc a._default_ .default-title,
-.bsa-cpc a._default_ .default-description {
-  display: inline;
-  vertical-align: middle;
-  margin-right: 6px;
+.bsa-cpc ::v-deep(.default-text) {
+  flex-grow: 1;
+  align-self: center;
+  width: calc(100% - 36px);
+}
+
+@media (min-width: 512px) {
+  .bsa-cpc ::v-deep(.default-text) {
+    width: auto;
+  }
+}
+
+.bsa-cpc ::v-deep(.default-title) {
+  font-weight: 600;
+}
+
+.bsa-cpc ::v-deep(.default-description) {
+  padding-left: 8px;
 }
 </style>

src/client/theme-default/components/CarbonAds.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="carbon-ads" ref="el"></div>
+  <div class="carbon-ads" ref="el" />
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref } from 'vue'
+import { defineProps, ref, onMounted } from 'vue'
 
 const { code, placement } = defineProps<{
   code: string
@@ -20,62 +20,83 @@ onMounted(() => {
 })
 </script>
 
-<style>
+<style scoped>
 .carbon-ads {
-  min-height: 102px;
-  font-size: 0.75rem;
-
-  width: 130px;
-  position: fixed;
-  z-index: 1;
-  bottom: 0;
-  right: 22px;
-  margin: 10px;
+  padding: 1.75rem 0 0;
+  border-radius: 4px;
+  margin: 0 auto;
+  max-width: 280px;
+  font-size: .75rem;
+  background-color: rgba(255, 255, 255, .8);
 }
 
-@media screen and (max-width: 425px) {
-  .carbon-ads {
-    width: auto;
-    right: 0;
-  }
+.carbon-ads::after {
+  clear: both;
+  display: block;
+  content: "";
 }
 
-@media screen and (max-width: 1300px) {
+@media (min-width: 420px) {
   .carbon-ads {
     position: relative;
-    top: 12px;
-    right: 0;
+    right: -8px;
+    z-index: 1;
     float: right;
-    margin: 0 0 20px 30px;
+    margin: -8px -8px 24px 24px;
+    padding: 8px;
+    width: 146px;
+    max-width: 100%;
   }
 }
 
-.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: .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>

src/client/theme-default/styles/vars.css

@@ -13,6 +13,7 @@
 
   --c-text-light-1: #2c3e50;
   --c-text-light-2: #476582;
+  --c-text-light-3: #90a4b7;
 
   --c-brand: #3eaf7c;
   --c-brand-light: #4abf8a;
@@ -45,6 +46,7 @@
 
   --c-text: var(--c-text-light-1);
   --c-text-light: var(--c-text-light-2);
+  --c-text-lighter: var(--c-text-light-3);
 
   --c-bg: var(--c-white);