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

5 files changed, 29 insertions, 2 deletions

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 0aea7bd..e9da921 100644
--- a/Website/layouts/default.vue
+++ b/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>
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index fefffc5..3aed240 100644
--- a/Website/pages/index.vue
+++ b/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>
diff --git a/Website/pages/install.vue b/Website/pages/install.vue
index ff00eec..580a459 100644
--- a/Website/pages/install.vue
+++ b/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>
diff --git a/Website/static/ui/brave-logo.png b/Website/static/ui/brave-logo.png
new file mode 100644
index 0000000..91bb05f
--- /dev/null
+++ b/Website/static/ui/brave-logo.png
diff --git a/Website/static/ui/brave-mono.svg b/Website/static/ui/brave-mono.svg
new file mode 100644
index 0000000..a71807f
--- /dev/null
+++ b/Website/static/ui/brave-mono.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Brave</title><path d="M15.68 0l2.096 2.38s1.84-.512 2.709.358c.868.87 1.584 1.638 1.584 1.638l-.562 1.381.715 2.047s-2.104 7.98-2.35 8.955c-.486 1.919-.818 2.66-2.198 3.633-1.38.972-3.884 2.66-4.293 2.916-.409.256-.92.692-1.38.692-.46 0-.97-.436-1.38-.692a185.796 185.796 0 01-4.293-2.916c-1.38-.973-1.712-1.714-2.197-3.633-.247-.975-2.351-8.955-2.351-8.955l.715-2.047-.562-1.381s.716-.768 1.585-1.638c.868-.87 2.708-.358 2.708-.358L8.321 0h7.36zm-3.679 14.936c-.14 0-1.038.317-1.758.69-.72.373-1.242.637-1.409.742-.167.104-.065.301.087.409.152.107 2.194 1.69 2.393 1.866.198.175.489.464.687.464.198 0 .49-.29.688-.464.198-.175 2.24-1.759 2.392-1.866.152-.108.254-.305.087-.41-.167-.104-.689-.368-1.41-.741-.72-.373-1.617-.69-1.757-.69zm0-11.278s-.409.001-1.022.206-1.278.46-1.584.46c-.307 0-2.581-.434-2.581-.434S4.119 7.152 4.119 7.849c0 .697.339.881.68 1.243l2.02 2.149c.192.203.59.511.356 1.066-.235.555-.58 1.26-.196 1.977.384.716 1.042 1.194 1.464 1.115.421-.08 1.412-.598 1.776-.834.364-.237 1.518-1.19 1.518-1.554 0-.365-1.193-1.02-1.413-1.168-.22-.15-1.226-.725-1.247-.95-.02-.227-.012-.293.284-.851.297-.559.831-1.304.742-1.8-.089-.495-.95-.753-1.565-.986-.615-.232-1.799-.671-1.947-.74-.148-.068-.11-.133.339-.175.448-.043 1.719-.212 2.292-.052.573.16 1.552.403 1.632.532.079.13.149.134.067.579-.081.445-.5 2.581-.541 2.96-.04.38-.12.63.288.724.409.094 1.097.256 1.333.256s.924-.162 1.333-.256c.408-.093.329-.344.288-.723-.04-.38-.46-2.516-.541-2.961-.082-.445-.012-.45.067-.579.08-.129 1.059-.372 1.632-.532.573-.16 1.845.009 2.292.052.449.042.487.107.339.175-.148.069-1.332.508-1.947.74-.615.233-1.476.49-1.565.986-.09.496.445 1.241.742 1.8.297.558.304.624.284.85-.02.226-1.026.802-1.247.95-.22.15-1.413.804-1.413 1.169 0 .364 1.154 1.317 1.518 1.554.364.236 1.355.755 1.776.834.422.079 1.08-.4 1.464-1.115.384-.716.039-1.422-.195-1.977-.235-.555.163-.863.355-1.066l2.02-2.149c.341-.362.68-.546.68-1.243 0-.697-2.695-3.96-2.695-3.96s-2.274.436-2.58.436c-.307 0-.972-.256-1.585-.461-.613-.205-1.022-.206-1.022-.206z"/></svg>
\ No newline at end of file