vue mastery banner mobile fix (vuejs-translations#204) (vuejs-translations#205)

Co-authored-by: skirtle <[email protected]>
Co-authored-by: Andy Li <[email protected]>

Author: 3 people

.vitepress/theme/components/VueMasteryBanner.vue

@@ -71,6 +71,20 @@ function close () {
   width: 100%;
 }
 
+@media (max-width:400px) {
+  .vuemastery-banner--wrapper .text {
+    /* color: red; */
+    font-size: 0.6rem;
+  }
+}
+
+@media (max-width:330px) {
+  .vuemastery-banner--wrapper .text {
+    /* color: yellow; */
+    margin-left:10px;
+  }
+}
+
 @media (min-width:1001px) {
 
   .vuemastery-banner:hover:after,
@@ -326,6 +340,7 @@ function close () {
   cursor: pointer;
   position: relative;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .vuemastery-button:after,

src/about/faq.md

@@ -8,7 +8,7 @@ Vue's development is primarily funded through sponsorships and we have been fina
 
 ## What's the difference between Vue 2 and Vue 3?
 
-Vue 3 is the current, latest major version of Vue. It contains new features that are not present in Vue 2, for example Teleport, Suspense, and multiple root elements per template. It also contains breaking changes that makes it incompatible with Vue 2. Full details are documented in the [Vue 3 Migration Guide](https://v3-migration.vuejs.org/).
+Vue 3 is the current, latest major version of Vue. It contains new features that are not present in Vue 2, such as Teleport, Suspense, and multiple root elements per template. It also contains breaking changes that make it incompatible with Vue 2. Full details are documented in the [Vue 3 Migration Guide](https://v3-migration.vuejs.org/).
 
 Despite the differences, the majority of Vue APIs are shared between the two major versions, so most of your Vue 2 knowledge will continue to work in Vue 3. Notably, Composition API was originally a Vue-3-only feature, but has now been backported to Vue 2 and is available in [Vue 2.7](https://github.com/vuejs/vue/blob/main/CHANGELOG.md#270-2022-07-01).
 
@@ -40,7 +40,7 @@ Vue is used in production by renowned organizations in varying capacities all ar
 
 Vue 3 is one of the most performant mainstream frontend frameworks, and handles most web application use cases with ease, without the need for manual optimizations.
 
-In stress-testing scenarios, Vue out-performs React and Angular by a decent margin in the [js-framework-benchmark](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html). It also goes neck-and-neck against some of the fastest production-level non-Virtual-DOM frameworks in the benchmark.
+In stress-testing scenarios, Vue outperforms React and Angular by a decent margin in the [js-framework-benchmark](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html). It also goes neck-and-neck against some of the fastest production-level non-Virtual-DOM frameworks in the benchmark.
 
 Do note that synthetic benchmarks like the above focus on raw rendering performance with dedicated optimizations and may not be fully representative of real-world performance results. If you care more about page load performance, you are welcome to audit this very website using [WebPageTest](https://www.webpagetest.org/lighthouse) or [PageSpeed Insights](https://pagespeed.web.dev/). This website is powered by Vue itself, with SSG pre-rendering, full page hydration and SPA client-side navigation. It scores 100 in performance on an emulated Moto G4 with 4x CPU throttling over slow 4G networks.