added brave button, reduced navbar width on desktop, added navbar animation

Website/layouts/default.vue

@@ -1,6 +1,10 @@
 <template>
   <v-app id="inspire" dark>
-    <v-app-bar app color="ma-4 glassy" flat style="border-radius: 1rem; overflow: hidden">
+    <v-app-bar app flat class="glassy fly-in-from-top"
+      :class="$vuetify.breakpoint.mobile ? 'ma-4' : 'my-4 mx-auto'"
+      :style="$vuetify.breakpoint.mobile ? '' : 'width: 50%'"
+      style="border-radius: 1rem; overflow: hidden;"
+      >
       <v-tabs centered center-active color="primary" router show-arrows>
         <v-tab v-for="link in links" :key="link.path" :to="link.path">
           {{ link.name }}
@@ -43,6 +47,23 @@ html, body {
   border-radius: 12px;
   /* border: 1px solid rgba(255, 255, 255, 0.125); */
 }
+
+.fly-in-from-top {
+  opacity: 0;
+  transform: scale(0.8) translateY(-200%);
+  animation: fly-in-from-top 0.5s .3s ease forwards;
+}
+
+@keyframes fly-in-from-top {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(-200%);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
 </style>
 
 <script>

Website/pages/index.vue

@@ -3,7 +3,7 @@
 
     <svg id="thumbslogo" width="150" height="150" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M139.113,65.266l-57.339,-0c-5.288,-0 -9.812,3.185 -11.723,7.772l-19.241,44.916c-0.573,1.466 -0.892,2.995 -0.892,4.651l0,12.742c0,7.009 5.734,12.743 12.742,12.743l40.202,-0l-6.053,29.115l-0.191,2.039c0,2.612 1.083,5.033 2.803,6.754l6.754,6.689l41.985,-41.985c2.294,-2.294 3.695,-5.479 3.695,-8.984l0,-63.71c0,-7.009 -5.734,-12.742 -12.742,-12.742Zm25.485,-0l-0,76.452l25.484,0l-0,-76.452l-25.484,-0Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/><g id="Thumb-Down--m.io-" serif:id="Thumb Down (m.io)"></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(152.906,153.295,-153.295,152.906,43.6442,45.958)"><stop offset="0" style="stop-color:#ff4444;stop-opacity:1"/><stop offset="0.56" style="stop-color:#440000;stop-opacity:1"/><stop offset="1" style="stop-color:#000;stop-opacity:1"/></linearGradient></defs></svg>
 
-    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Return YouTube Dislike</h1>
+    <h1 style="font-size: 3rem;" >Return YouTube Dislike</h1>
     <div class="mb-10" style="color: #999">
       <p style="margin-top: 0">Browser extension and an API that show you dislikes on youtube</p>
     </div>

Website/pages/install.vue

@@ -28,6 +28,11 @@
       Opera
     </v-btn>
 
+    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+      <v-img style="margin-right: 1rem;" src="ui/brave-mono.svg" height="20" width="20" />
+      Brave
+    </v-btn>
+
     <h3 style="margin-top: 3em; margin-bottom:0">Other Platforms</h3>
     <div style="color: #999">
       <p style="margin-top: .5rem; margin-bottom:.5rem;">If your browser is not yet supported, try this UserScript.</p>