docs: update sponsors

vuejs · Sep 27, 2021 · 0206162 · 0206162
1 parent f71352a
commit 0206162
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 33 deletions.
diff --git a/docs/.vitepress/components/HomeSponsors.vue b/docs/.vitepress/components/HomeSponsors.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="sponsors_outer">
     <div>
-      <HomeSponsorsGroup v-if="sponsors.platinum" name="Platinum" size="160" />
+      <HomeSponsorsGroup v-if="sponsors.platinum" name="Platinum" size="96" />
 
-      <HomeSponsorsGroup v-if="sponsors.gold" name="Gold" size="140" />
+      <HomeSponsorsGroup v-if="sponsors.gold" name="Gold" size="48" />
 
-      <HomeSponsorsGroup v-if="sponsors.silver" name="Silver" size="120" />
+      <HomeSponsorsGroup v-if="sponsors.silver" name="Silver" size="32" />
 
       <a
         class="become-sponsor button white"

diff --git a/docs/.vitepress/components/HomeSponsorsGroup.vue b/docs/.vitepress/components/HomeSponsorsGroup.vue
@@ -9,7 +9,6 @@
       :title="sponsor.alt"
       target="_blank"
       rel="sponsored noopener"
-      :style="{ width: size + 'px' }"
       class="sponsor_wrapper"
     >
       <img
@@ -20,7 +19,7 @@
           'invert-colors'
         "
         :alt="sponsor.alt"
-        :style="{ width: size + 'px' }"
+        :style="{ height: size + 'px' }"
       />
     </a>
   </p>
@@ -52,7 +51,6 @@ const list = computed(() =>
   padding: 5px;
   margin: 0 3px;
 
-  width: 100px;
   display: inline-block;
   text-decoration: none;
   vertical-align: middle;

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
@@ -1,21 +1,26 @@
 <template>
-  <div
-    class="main-container"
-    :class="{ 'has-top-banner': showTopBanner }"
-  >
-    <BannerTop
-      v-if="showTopBanner"
-      @close="closeBannerTop"
-    />
+  <div class="main-container" :class="{ 'has-top-banner': showTopBanner }">
+    <BannerTop v-if="showTopBanner" @close="closeBannerTop" />
     <ParentLayout>
-      <template #sidebar-bottom>
-        <div class="sponsors">
+      <template #sidebar-top>
+        <div class="sponsors sponsors-top">
+          <span>Platinum Sponsors</span>
+
           <a
-            href="https://github.com/sponsors/posva"
+            v-for="sponsor in sponsors.platinum"
+            :href="sponsor.href"
+            :key="sponsor.href"
             target="_blank"
             rel="noopener"
-            >Sponsors</a
           >
+            <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
+          </a>
+        </div>
+      </template>
+
+      <template #sidebar-bottom>
+        <div class="sponsors">
+          <span>Sponsors</span>
 
           <a
             v-for="sponsor in sponsors.gold"
@@ -37,29 +42,31 @@ import { defineAsyncComponent } from 'vue'
 import DefaultTheme from 'vitepress/dist/client/theme-default'
 import sponsors from '../components/sponsors.json'
 
-const BannerTop = defineAsyncComponent(() => import('../components/BannerTop.vue'))
+const BannerTop = defineAsyncComponent(() =>
+  import('../components/BannerTop.vue')
+)
 
 export default {
   name: 'Layout',
   components: {
     ParentLayout: DefaultTheme.Layout,
-    BannerTop
+    BannerTop,
   },
-  data () {
+  data() {
     return {
       sponsors,
-      showTopBanner: false
+      showTopBanner: false,
     }
   },
-  mounted () {
+  mounted() {
     this.showTopBanner = !localStorage.getItem('VS_BTS_BANNER_CLOSED')
   },
   methods: {
-    closeBannerTop () {
+    closeBannerTop() {
       this.showTopBanner = false
       localStorage.setItem('VS_BTS_BANNER_CLOSED', 1)
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -79,18 +86,32 @@ form {
 
 <style scoped>
 .sponsors {
-  padding: 0 1.5rem 2rem;
-  font-size: 0.8rem;
+  margin: 0 0 1rem 1.35rem;
 }
 
-.sponsors a {
+.sponsors-top {
+  margin-top: 1rem;
+  /* workaround padding in vitepress */
+  margin-bottom: -2rem;
+}
+
+.sponsors > span {
+  /* margin: 1.25rem 0; */
+  display: block;
   color: #999;
+  font-size: 0.8rem;
+}
+
+.sponsors a:last-child {
+  margin-bottom: 20px;
+}
+.sponsors a:first-child {
+  margin-top: 18px;
 }
 
-.sponsors img {
-  max-width: 200px;
-  max-height: 40px;
+.sponsors a {
+  margin-top: 10px;
+  width: 125px;
   display: block;
-  margin: 1.25rem 0;
 }
 </style>