]> git.ipfire.org Git - thirdparty/vuejs/router.git/commitdiff
docs: wip
authorEduardo San Martin Morote <posva13@gmail.com>
Mon, 8 Mar 2021 07:52:54 +0000 (08:52 +0100)
committerEduardo San Martin Morote <posva13@gmail.com>
Wed, 10 Mar 2021 13:48:34 +0000 (14:48 +0100)
docs/.vitepress/components/HomeSponsors.vue
docs/.vitepress/components/HomeSponsorsGroup.vue
docs/index.md
docs/introduction.md

index a480aca0c749266e66f9b1387c044d733b7ab62a..d67bd884752f4d6cf4ca07aed37b21658c281c50 100644 (file)
@@ -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>
index d89605709c9e81c0edb46fcce8e50b8500a0718f..b7b3ba40c623d0aebf5c589533c250097c12ffb9 100644 (file)
@@ -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>
index 984bd84457be95babaec3cf932fa462c6031bbd2..5f6941ff992265d454e09c6f047241853c696638 100644 (file)
@@ -6,10 +6,10 @@ actionText: Get Started →
 actionLink: /introduction.html
 
 features:
-  - title: ð\9f\92¡ Intuitive
-    details: Stores are as familiar as components. API designed to let you write well organized stores.
-  - title: ð\9f\94\91 Type Safe
-    details: Types are inferred, which means stores provide you with autocompletion even in JavaScript!
+  - title: ð\9f\9b£ Expressive route syntax
+    details: Define static and dynamic routes with an intuitive syntax.
+  - title: ð\9f\9b\91 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
index d130c532af19077fa8e8d9aa77a80f353c50b14a..afb30ecefe51ebb27bb3de66884b1bea986d7667 100644 (file)
@@ -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).