docs: refactor and fix become sponsor button colors

packages/docs/.vitepress/theme/components/HomeSponsors.vue

@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
+import sponsors from './sponsors.json'
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const translations = {
+  en: 'Become a sponsor',
+  'en-US': 'Become a Sponsor!',
+  'zh-CN': '成为赞助者！',
+}
+</script>
+
 <template>
   <div class="sponsors_outer">
     <div>
@@ -24,20 +37,35 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
-import sponsors from './sponsors.json'
-import { useData } from 'vitepress'
 
-const { site } = useData()
-const translations = {
-  en: 'Become a sponsor',
-  'en-US': 'Become a Sponsor!',
-  'zh-CN': '成为赞助者！',
+<style scoped>
+.become-sponsor {
+  font-size: 0.9em;
+  font-weight: 700;
+  width: auto;
+  text-align: center;
+  background-color: transparent;
+  padding: 0.75em 2em;
+  border-radius: 2em;
+  transition: all 0.30s ease;
+  box-sizing: border-box;
+  border: 2px solid var(--vp-c-brand-1);
+  text-decoration: none;
+}
+
+.become-sponsor:hover {
+  background-color: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: var(--vp-button-brand-text) !important;
+}
+
+.sponsors-top .become-sponsor {
+  font-size: 0.75em;
+  padding: 0.2em;
+  width: auto;
+  max-width: 150px;
 }
-</script>
 
-<style scoped>
 .sponsors_outer {
   text-align: center;
   padding: 35px 40px 45px;

packages/docs/.vitepress/theme/index.ts

@@ -5,7 +5,6 @@ import AsideSponsors from './components/AsideSponsors.vue'
 // import HomeSponsors from './components/HomeSponsors.vue'
 import TranslationStatus from 'vitepress-translation-helper/ui/TranslationStatus.vue'
 import './styles/vars.css'
-import './styles/sponsors.css'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 import status from '../translation-status.json'