removed faq panel jank & adjusted its width, added subtle route transition effect

Website/layouts/default.vue

@@ -16,7 +16,7 @@
           <center
             class="mx-auto d-flex flex-column justify-center items-center"
             style="width: 90vw; min-height: 100%;">
-            <nuxt />
+              <nuxt />
           </center>
       </section>
 
@@ -60,6 +60,44 @@ html, body {
   display: none;
 }
 
+/* animations and all that */
+.swoop-in-enter-active,
+.swoop-in-leave-active,
+.swoop-out-enter-active,
+.swoop-out-leave-active,
+.swoop-left-enter-active,
+.swoop-left-leave-active,
+.swoop-right-enter-active,
+.swoop-right-leave-active {
+  transition-duration: 0.1s;
+  transition-property: opacity, transform;
+  overflow: hidden;
+}
+
+.swoop-left-enter,
+.swoop-right-leave-active {
+  opacity: 0;
+  transform: translate(1rem, 0);
+}
+
+.swoop-left-leave-active,
+.swoop-right-enter {
+  opacity: 0;
+  transform: translate(-1rem, 0);
+}
+
+.swoop-in-enter,
+.swoop-out-leave-active {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.swoop-in-leave-active,
+.swoop-out-enter {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
 .fly-in-from-top {
   opacity: 0;
   transform: scale(0.8) translateY(-200%);

Website/pages/donate.vue

@@ -17,10 +17,16 @@
 
 <script>
   export default {
+    transition(to, from) {
+      if (!from) return 'swoop-in'
+      let routes = ['index', 'install', 'faq', 'donate', 'links']
+      if (routes.indexOf(to.name) < 0) return 'swoop-out'
+      if (routes.indexOf(from.name) < 0) return 'swoop-in'
+      return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+    },
     data: () => ({
       patreonLink: "https://www.patreon.com/returnyoutubedislike",
       yoomoneyLink: "/pay/yoomoney"
-    }),
-  
+    })
   }
 </script>

Website/pages/faq.vue

@@ -1,23 +1,34 @@
 <template>
   <div>
-    
 
     <h1 class="title-text" >Frequently Asked Questions</h1>
     <p style="color: #999; margin-top: .5rem; margin-bottom: 1.5rem;">Still have questions? Feel free to join our Discord!</p>
 
-    <v-expansion-panels focusable>
-      <v-expansion-panel v-for="(item, i) in items" :key="i" style="width: 50vw; min-width: 300px;">
-        <v-expansion-panel-header v-text="item.question">Loading</v-expansion-panel-header>
-        <v-expansion-panel-content v-html="item.answer" style="text-align: left; padding: 24px;">Loading</v-expansion-panel-content>
+    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-7">
+      <v-expansion-panel v-for="(item, i) in items" :key="i" >
+        <v-expansion-panel-header>
+          {{ item.question }}
+        </v-expansion-panel-header>
+        <v-expansion-panel-content class="text-left">
+          <hr style="border-color: #444;">
+          <br>
+          {{ item.answer }}
+        </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
 
-
   </div>
 </template>
 
 <script>
   export default {
+    transition(to, from) {
+      if (!from) return 'swoop-in'
+      let routes = ['index', 'install', 'faq', 'donate', 'links']
+      if (routes.indexOf(to.name) < 0) return 'swoop-out'
+      if (routes.indexOf(from.name) < 0) return 'swoop-in'
+      return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+    },
     data: () => ({
       items: [
         { 

Website/pages/index.vue

@@ -56,6 +56,13 @@
 
 <script>
 export default {
+  transition(to, from) {
+    if (!from) return 'swoop-in'
+    let routes = ['index', 'install', 'faq', 'donate', 'links']
+    if (routes.indexOf(to.name) < 0) return 'swoop-out'
+    if (routes.indexOf(from.name) < 0) return 'swoop-in'
+    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+  },
   data() {
     return {
       installLink: "/install",

Website/pages/install.vue

@@ -58,6 +58,13 @@
 
 <script>
 export default {
+  transition(to, from) {
+    if (!from) return 'swoop-in'
+    let routes = ['index', 'install', 'faq', 'donate', 'links']
+    if (routes.indexOf(to.name) < 0) return 'swoop-out'
+    if (routes.indexOf(from.name) < 0) return 'swoop-in'
+    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+  },
   data() {
     return {
       chromeLink: "https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/",

Website/pages/links.vue

@@ -38,6 +38,13 @@
 
 <script>
 export default {
+  transition(to, from) {
+    if (!from) return 'swoop-in'
+    let routes = ['index', 'install', 'faq', 'donate', 'links']
+    if (routes.indexOf(to.name) < 0) return 'swoop-out'
+    if (routes.indexOf(from.name) < 0) return 'swoop-in'
+    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+  },
   data() {
     return {
       githubLink: "https://github.com/Anarios/return-youtube-dislike",

Website/pages/pay/yoomoney.vue

@@ -2,4 +2,12 @@
   <div>
     <iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&amp;targets=For%20returnyoutubedislike.com&amp;targets-hint=&amp;default-sum=&amp;button-text=13&amp;hint=&amp;successURL=&amp;quickpay=shop&amp;account=410015901550027&amp;" allowtransparency="true" scrolling="no" width="423" height="222" frameborder="0" />
   </div>
-</template>
+</template>
+
+<script>
+export default {
+  transition(to, from) {
+    return to.name == 'yoomoney' ? 'swoop-in' : 'swoop-out'
+  },
+}
+</script>