From 6e4c030111fd4e011d82c60543a8a55435159804 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 8 Mar 2021 08:52:54 +0100
Subject: [PATCH] docs: wip

---
 docs/.vitepress/components/HomeSponsors.vue   | 41 +++++--------------
 .../components/HomeSponsorsGroup.vue          | 38 +++++++++++++++++
 docs/index.md                                 |  8 ++--
 docs/introduction.md                          |  2 -
 4 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/docs/.vitepress/components/HomeSponsors.vue b/docs/.vitepress/components/HomeSponsors.vue
index a480aca0..d67bd884 100644
--- a/docs/.vitepress/components/HomeSponsors.vue
+++ b/docs/.vitepress/components/HomeSponsors.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="sponsors">
-    <div class="inner">
+  <div class="sponsors_outer">
+    <div>
       <HomeSponsorsGroup v-if="sponsors.platinum" name="Platinum" size="160" />
 
       <HomeSponsorsGroup v-if="sponsors.gold" name="Gold" size="140" />
@@ -21,38 +21,17 @@ import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
 import sponsors from './sponsors.json'
 </script>
 
-<style>
-#sponsors {
+<style scoped>
+.sponsors_outer {
   text-align: center;
   padding: 35px 40px 45px;
   margin: 0 -2.5rem;
-  background-color: #f6f6f6;
+  background-color: var(--c-bg-accent);
+  /* transition when toggling dark mode */
+  transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
 }
 
-#sponsors h3 {
-  margin: 0 0 10px;
-}
-
-#sponsors a,
-#sponsors img {
-  width: 100px;
-  text-decoration: none;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-#sponsors img {
-  transition: all 0.3s ease;
-  filter: grayscale(100%);
-  opacity: 0.66;
-}
-
-#sponsors img:hover {
-  filter: none;
-  opacity: 1;
-}
-
-#sponsors .become-sponsor {
+.become-sponsor {
   margin-top: 40px;
   font-size: 0.9em;
   font-weight: 700;
@@ -66,8 +45,10 @@ import sponsors from './sponsors.json'
   color: var(--c-text);
 }
 
-#sponsors .become-sponsor:hover {
+.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/components/HomeSponsorsGroup.vue b/docs/.vitepress/components/HomeSponsorsGroup.vue
index d8960570..b7b3ba40 100644
--- a/docs/.vitepress/components/HomeSponsorsGroup.vue
+++ b/docs/.vitepress/components/HomeSponsorsGroup.vue
@@ -9,6 +9,7 @@
     target="_blank"
     rel="sponsored noopener"
     :style="{ width: size + 'px' }"
+    class="sponsor_wrapper"
   >
     <img
       :src="sponsor.imgSrcLight"
@@ -44,3 +45,40 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.sponsor_wrapper {
+  padding: 5px;
+  margin: 0 3px;
+
+  width: 100px;
+  display: inline-block;
+  text-decoration: none;
+  vertical-align: middle;
+
+  transition: background-color 300ms ease-in-out;
+}
+
+h3 {
+  margin: 0 0 10px;
+}
+
+img {
+  transition: all 0.3s ease;
+  filter: grayscale(100%);
+  opacity: 0.66;
+}
+
+html.dark img {
+  filter: invert(1) grayscale(100%);
+}
+
+img:hover {
+  filter: none !important;
+  opacity: 1;
+}
+
+/* html.dark .sponsor_wrapper:hover {
+  background-color: var(--c-text-light);
+}*/
+</style>
diff --git a/docs/index.md b/docs/index.md
index 984bd844..5f6941ff 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -6,10 +6,10 @@ actionText: Get Started →
 actionLink: /introduction.html
 
 features:
-  - title: 💡 Intuitive
-    details: Stores are as familiar as components. API designed to let you write well organized stores.
-  - title: 🔑 Type Safe
-    details: Types are inferred, which means stores provide you with autocompletion even in JavaScript!
+  - title: 🛣 Expressive route syntax
+    details: Define static and dynamic routes with an intuitive syntax.
+  - title: 🛑 Fine-grained Navigation control
+    details: Intercept any navigation and precisely control its outcome.
   - title: ⚙️ Devtools support
     details: Pinia hooks into Vue devtools to give you a enhanced development experience in both Vue 2 and Vue 3.
   - title: 🔌 Extensible
diff --git a/docs/introduction.md b/docs/introduction.md
index d130c532..afb30ece 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -13,6 +13,4 @@ Vue Router is the official router for [Vue.js](http://v3.vuejs.org). It deeply i
 - Customizable Scroll Behavior
 - Proper encoding for URLs
 
-<HomeSponsors />
-
 [Get started](/guide/) or play with the [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) (see [`README.md`](https://github.com/vuejs/vue-router-next) to run them).
-- 
2.47.3