<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" />
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;
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>
target="_blank"
rel="sponsored noopener"
:style="{ width: size + 'px' }"
+ class="sponsor_wrapper"
>
<img
:src="sponsor.imgSrcLight"
},
}
</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>
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
- 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).