From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 4 Jan 2022 22:47:50 +0000 (+0100)
Subject: docs: fix titles sponsors
X-Git-Tag: v4.0.13~39
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=141230fb23c90ae82bd0fe953230533109736abf;p=thirdparty%2Fvuejs%2Frouter.git

docs: fix titles sponsors
---

diff --git a/docs/.vitepress/components/HomeSponsors.vue b/docs/.vitepress/components/HomeSponsors.vue
index 8bcfa4ae..05295d63 100644
--- a/docs/.vitepress/components/HomeSponsors.vue
+++ b/docs/.vitepress/components/HomeSponsors.vue
@@ -1,17 +1,16 @@
 <template>
   <div class="sponsors_outer">
     <div>
-      <HomeSponsorsGroup v-if="sponsors.platinum" name="Platinum" size="96" />
+      <HomeSponsorsGroup v-if="sponsors.platinum.length" name="Platinum" size="96" />
 
-      <HomeSponsorsGroup v-if="sponsors.gold" name="Gold" size="48" />
+      <HomeSponsorsGroup v-if="sponsors.gold.length" name="Gold" size="48" />
 
-      <HomeSponsorsGroup v-if="sponsors.silver" name="Silver" size="24" />
+      <HomeSponsorsGroup v-if="sponsors.silver.length" name="Silver" size="24" />
 
       <a
         class="become-sponsor button white"
         href="https://github.com/sponsors/posva"
-        >{{ translations[site.lang] || translations.en }}</a
-      >
+      >{{ translations[site.lang] || translations.en }}</a>
     </div>
   </div>
 </template>
@@ -37,26 +36,4 @@ const translations = {
   /* transition when toggling dark mode */
   transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
 }
-
-.become-sponsor {
-  margin-top: 1.5rem;
-  display: inline-block;
-  font-size: 0.9em;
-  font-weight: 700;
-  width: auto;
-  background-color: transparent;
-  padding: 0.75em 2em;
-  border-radius: 2em;
-  transition: all 0.15s ease;
-  box-sizing: border-box;
-  border: 2px solid var(--c-text);
-  color: var(--c-text);
-}
-
-.become-sponsor:hover {
-  background-color: var(--c-brand);
-  text-decoration: none;
-  border-color: var(--c-brand);
-  color: var(--c-brand-text);
-}
 </style>
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index fc27648a..f98e23c9 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -1,23 +1,30 @@
 <template>
   <div class="main-container">
-    <BannerTop
-      v-if="showTopBanner"
-      @close="closeBannerTop"
-    />
+    <BannerTop v-if="showTopBanner" @close="closeBannerTop" />
     <ParentLayout>
       <template #sidebar-top>
         <div class="sponsors sponsors-top">
           <span>Platinum Sponsors</span>
 
+          <template v-if="sponsors.platinum.length">
+            <a
+              v-for="sponsor in sponsors.platinum"
+              :href="sponsor.href"
+              :key="sponsor.href"
+              target="_blank"
+              rel="noopener"
+            >
+              <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
+            </a>
+          </template>
           <a
-            v-for="sponsor in sponsors.platinum"
-            :href="sponsor.href"
-            :key="sponsor.href"
+            v-else
+            class="become-sponsor"
+            href="https://github.com/sponsors/posva"
             target="_blank"
             rel="noopener"
-          >
-            <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
-          </a>
+            alt="Your logo here"
+          >Become a Sponsor!</a>
         </div>
       </template>
 
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 21fb2394..b7ffacd7 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,5 +1,6 @@
 import DefaultTheme from 'vitepress/dist/client/theme-default'
 import Layout from './Layout.vue'
+import './sponsors.css'
 import VueSchoolLink from '../components/VueSchoolLink.vue'
 
 export default {
diff --git a/docs/.vitepress/theme/sponsors.css b/docs/.vitepress/theme/sponsors.css
new file mode 100644
index 00000000..919af73f
--- /dev/null
+++ b/docs/.vitepress/theme/sponsors.css
@@ -0,0 +1,29 @@
+.become-sponsor {
+  margin-top: 1.5rem;
+  display: inline-block;
+  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.15s ease;
+  box-sizing: border-box;
+  border: 2px solid var(--c-text);
+  color: var(--c-text);
+}
+
+.become-sponsor:hover {
+  background-color: var(--c-brand);
+  text-decoration: none;
+  border-color: var(--c-brand);
+  color: var(--c-brand-text);
+}
+
+.sponsors-top .become-sponsor.become-sponsor {
+  font-size: 0.75em;
+  padding: 0.2em;
+  width: auto;
+  max-width: 150px;
+}