Merge pull request #274 from PickleNik/main

Website Fixes & Improvements

Website/layouts/default.vue

@@ -1,6 +1,8 @@
 <template>
   <v-app dark>
-    <v-app-bar app flat class="topBar fly-in-from-top my-4 mx-auto" >
+
+    <!-- height = 4rem, margin-y = 1rem -->
+    <v-app-bar app flat class="topBar fly-in-from-top my-4 mx-auto">
       <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 }}
@@ -8,29 +10,33 @@
       </v-tabs>
     </v-app-bar>
     
+    <!-- abstract background -->
     <v-img src="/ui/abstract.svg" style="position: absolute; left: 0; right: 0; width: 100%; height: 100%;" />
 
-    <v-main class="pt-4">
-
-      <section class="hidden-chrome-scrollbar" style="height: calc(100vh - 1rem); padding-top: 5rem; padding-bottom: 5rem; overflow-y: auto;">
-          <center
-            class="mx-auto d-flex flex-column justify-center items-center"
-            style="width: 90vw; min-height: 100%;">
-              <nuxt />
-          </center>
-      </section>
-
+    <v-main style="padding-top: 4rem !important;">
+      <!-- min-height helps keep content centered, use .debug to to see it -->
+      <center
+        class="py-8 mx-auto d-flex flex-column justify-center items-center"
+        style="width: 90vw; min-height: calc(100vh - 8rem);">
+          <nuxt />
+      </center>
     </v-main>
   </v-app>
 </template>
 
 <style>
 html, body {
-  overflow: hidden;
+  height: 100%;
+  height: -webkit-fill-available;
+  overflow: auto;
 }
 
-.title-text {
-  font-size: 3rem;
+.debug { /* usage: add class="debug" to the element */
+  outline: 2px solid red;
+}
+
+.mainAltButton {
+  margin: 0.25em;
 }
 
 .topBar {
@@ -41,25 +47,19 @@ html, body {
   border-radius: .75rem;
   overflow: hidden;
 }
-
+.title-text {
+  font-size: 3rem;
+}
 @media (max-width: 768px) { /* mobile */
   .title-text {
     font-size: 2rem;
   }
   .topBar { 
-    width: calc(100vw - 2rem) !important; /* (2rem = mx-4) */
+    width: calc(100vw - 2rem) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
     padding: 0;
   } 
 }
 
-.mainAltButton {
-  margin: 0.25em;
-}
-
-.hidden-chrome-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
 /* animations and all that */
 .swoop-in-enter-active,
 .swoop-in-leave-active,
@@ -71,7 +71,7 @@ html, body {
 .swoop-right-leave-active {
   transition-duration: 0.1s;
   transition-property: opacity, transform;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 .swoop-left-enter,
@@ -100,14 +100,14 @@ html, body {
 
 .fly-in-from-top {
   opacity: 0;
-  transform: scale(0.8) translateY(-200%);
+  transform: scale(0.8) translateY(-12rem);
   animation: fly-in-from-top 0.5s .3s ease forwards;
 }
 
 @keyframes fly-in-from-top {
   0% {
     opacity: 0;
-    transform: scale(0.8) translateY(-200%);
+    transform: scale(0.8) translateY(-12rem);
   }
   100% {
     opacity: 1;

Website/pages/donate.vue

@@ -3,15 +3,15 @@
 
     <h1 class="title-text" >Donate</h1>
     <p style="color: #999; margin-top: .5rem; margin-bottom: 1.5rem;">You can support our efforts to keep the internet free with a donation!</p>
-    <v-btn class="mainAltButton" :href="patreonLink" target="_blank">
+    <v-btn class="mainAltButton mb-2" :href="patreonLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-patreon</v-icon>
       Patreon
     </v-btn>
-    <v-btn class="mainAltButton" :to="yoomoneyLink">
+    <v-btn class="mainAltButton mb-2" :to="yoomoneyLink">
       <v-icon style="margin-right: 0.5em;">mdi-cash-multiple</v-icon>
       Yoomoney
     </v-btn>
-    <v-btn class="mainAltButton" :to="cryptoLink">
+    <v-btn class="mainAltButton mb-2" :to="cryptoLink">
       <v-icon style="margin-right: 0.5em;">mdi-bitcoin</v-icon>
       Crypto
     </v-btn>

Website/pages/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
 
-    <svg id="thumbslogo" class="mb-4" width="150" viewBox="0 0 24 24"><path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"/><path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" stroke="none"/></svg>
+    <svg id="thumbslogo" class="mb-4" width="150" height="150" viewBox="0 0 24 24" overflow="visible" >
+      <path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"/>
+      <path id="plarrow" d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" stroke="none"/>
+    </svg>
 
     <h1 class="title-text" >Return YouTube Dislike</h1>
     <div class="mb-4" style="color: #999">
@@ -35,7 +38,24 @@
   stroke: #f44;
   transition-property: opacity, transform;
   transform: scale(0) rotate(180deg);
-  animation: popin 1s 1s ease-in-out 1 forwards, tap .3s 2.5s ease-in-out 1 forwards;
+  animation: popin 1s .3s ease-in-out 1 forwards, tap .3s 1.7s ease-in-out 1 forwards;
+}
+
+#plarrow {
+  opacity: 0;
+  transform: translateX(-0.25rem);
+  transition-property: opacity, transform;
+  animation: slidin .5s 1.7s ease 1 forwards;
+}
+
+@keyframes slidin {
+  0% {
+    opacity: 0;
+    transform: translateX(-0.25rem);
+  } 100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes popin {
@@ -48,6 +68,14 @@
   }
 }
 
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  } 100% {
+    opacity: 1;
+  }
+}
+
 @keyframes tap {
   0% {
     fill: transparent;
@@ -56,7 +84,7 @@
   } 25% {
     fill: #f44;
     stroke: none;
-    transform: scale(.8);
+    transform: scale(.85);
   } 100% {
     fill: #f44;
     stroke: none;
@@ -73,6 +101,17 @@
     transform: none;
     animation: none;
   }
+  #thumbsripple {
+    opacity: 0;
+    transform: none;
+    animation: none;
+  }
+  #plarrow {
+    opacity: 0;
+    transform: none;
+    transition-property: opacity;
+    animation: fadein .5s .5s ease 1 forwards;
+  }
 }
 </style>
 

Website/pages/install.vue

@@ -29,7 +29,8 @@
     </v-btn>
 
     <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
-      <v-img style="margin-right: 1rem;" src="ui/brave-mono.svg" height="20" width="20" />
+      <!-- brave logo icon -->
+      <svg style="margin-right: 1rem;" height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="m15.68 0 2.1 2.38s1.84-.51 2.7.36c.87.87 1.59 1.64 1.59 1.64l-.56 1.38.71 2.04-2.35 8.96c-.48 1.92-.82 2.66-2.2 3.63-1.38.97-3.88 2.66-4.29 2.92-.4.25-.92.69-1.38.69-.46 0-.97-.44-1.38-.7a185.8 185.8 0 0 1-4.3-2.9c-1.37-.98-1.7-1.72-2.19-3.64L1.78 7.8l.71-2.04-.56-1.38s.72-.77 1.59-1.64c.87-.87 2.7-.36 2.7-.36L8.33 0h7.36zM12 14.94c-.14 0-1.04.31-1.76.69-.72.37-1.24.63-1.4.74-.17.1-.07.3.08.4.15.11 2.2 1.7 2.4 1.87.2.18.48.47.68.47.2 0 .5-.3.69-.47.2-.17 2.24-1.76 2.4-1.86.14-.11.24-.3.08-.41l-1.41-.74a8.18 8.18 0 0 0-1.76-.7zm0-11.28s-.4 0-1.02.2-1.28.46-1.59.46c-.3 0-2.58-.43-2.58-.43s-2.7 3.26-2.7 3.96c0 .7.35.88.69 1.24l2.02 2.15c.2.2.59.51.35 1.07-.23.55-.58 1.26-.2 1.97.4.72 1.05 1.2 1.47 1.12.42-.08 1.42-.6 1.78-.83.36-.24 1.52-1.2 1.52-1.56 0-.36-1.2-1.02-1.42-1.17-.22-.15-1.22-.72-1.24-.95-.02-.22-.02-.29.28-.85.3-.56.83-1.3.74-1.8-.09-.5-.95-.75-1.56-.98-.62-.24-1.8-.67-1.95-.74-.15-.07-.1-.14.34-.18.45-.04 1.72-.21 2.3-.05.57.16 1.54.4 1.62.53.08.13.15.14.07.58-.08.45-.5 2.58-.54 2.96-.04.38-.12.63.29.72.4.1 1.1.26 1.33.26s.93-.16 1.33-.26c.41-.09.33-.34.3-.72-.05-.38-.47-2.51-.55-2.96-.08-.45-.01-.45.07-.58.08-.13 1.06-.37 1.63-.53.57-.16 1.85 0 2.3.05.44.04.48.1.33.18-.15.07-1.33.5-1.95.74-.61.23-1.47.49-1.56.98-.1.5.44 1.24.74 1.8s.3.63.29.85c-.02.23-1.03.8-1.25.95-.22.15-1.41.8-1.41 1.17 0 .37 1.15 1.32 1.51 1.56.37.23 1.36.75 1.78.83.42.08 1.08-.4 1.46-1.12.39-.71.04-1.42-.2-1.97-.23-.56.17-.87.36-1.07L19.2 9.1c.34-.36.68-.54.68-1.24s-2.7-3.96-2.7-3.96-2.27.43-2.57.43c-.3 0-.97-.25-1.59-.46-.61-.2-1.02-.2-1.02-.2z"/></svg>
       Brave
     </v-btn>
 
@@ -40,7 +41,7 @@
 
     <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-script-text-outline</v-icon>
-      Userscript (Tampermonkey)
+      Userscript &nbsp;<div style="font-size: .55rem;"> (Tampermonkey)</div>
     </v-btn>
 
     <h3 style="margin-top: 3em;">Third Party Implementations</h3>

Website/pages/links.vue

@@ -24,7 +24,11 @@
       Email
     </v-btn>
 
-    <p id="credits">Site by <v-icon color="#555">mdi-discord</v-icon> Front#2990</p>
+    <p id="credits" class="flex-row no-wrap">
+      Site by <v-icon color="#555">mdi-discord</v-icon> Front#2990
+      <br>
+      <span style="color: #444; font-size: 0.75rem">& <v-icon color="#333" size="1rem">mdi-discord</v-icon> PickleNik#0864</span>
+    </p>
 
   </div>
 </template>

Website/static/ui/brave-mono.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><path d="m15.68 0 2.1 2.38s1.84-.51 2.7.36c.87.87 1.59 1.64 1.59 1.64l-.56 1.38.71 2.04-2.35 8.96c-.48 1.92-.82 2.66-2.2 3.63-1.38.97-3.88 2.66-4.29 2.92-.4.25-.92.69-1.38.69-.46 0-.97-.44-1.38-.7a185.8 185.8 0 0 1-4.3-2.9c-1.37-.98-1.7-1.72-2.19-3.64L1.78 7.8l.71-2.04-.56-1.38s.72-.77 1.59-1.64c.87-.87 2.7-.36 2.7-.36L8.33 0h7.36zM12 14.94c-.14 0-1.04.31-1.76.69-.72.37-1.24.63-1.4.74-.17.1-.07.3.08.4.15.11 2.2 1.7 2.4 1.87.2.18.48.47.68.47.2 0 .5-.3.69-.47.2-.17 2.24-1.76 2.4-1.86.14-.11.24-.3.08-.41l-1.41-.74a8.18 8.18 0 0 0-1.76-.7zm0-11.28s-.4 0-1.02.2-1.28.46-1.59.46c-.3 0-2.58-.43-2.58-.43s-2.7 3.26-2.7 3.96c0 .7.35.88.69 1.24l2.02 2.15c.2.2.59.51.35 1.07-.23.55-.58 1.26-.2 1.97.4.72 1.05 1.2 1.47 1.12.42-.08 1.42-.6 1.78-.83.36-.24 1.52-1.2 1.52-1.56 0-.36-1.2-1.02-1.42-1.17-.22-.15-1.22-.72-1.24-.95-.02-.22-.02-.29.28-.85.3-.56.83-1.3.74-1.8-.09-.5-.95-.75-1.56-.98-.62-.24-1.8-.67-1.95-.74-.15-.07-.1-.14.34-.18.45-.04 1.72-.21 2.3-.05.57.16 1.54.4 1.62.53.08.13.15.14.07.58-.08.45-.5 2.58-.54 2.96-.04.38-.12.63.29.72.4.1 1.1.26 1.33.26s.93-.16 1.33-.26c.41-.09.33-.34.3-.72-.05-.38-.47-2.51-.55-2.96-.08-.45-.01-.45.07-.58.08-.13 1.06-.37 1.63-.53.57-.16 1.85 0 2.3.05.44.04.48.1.33.18-.15.07-1.33.5-1.95.74-.61.23-1.47.49-1.56.98-.1.5.44 1.24.74 1.8s.3.63.29.85c-.02.23-1.03.8-1.25.95-.22.15-1.41.8-1.41 1.17 0 .37 1.15 1.32 1.51 1.56.37.23 1.36.75 1.78.83.42.08 1.08-.4 1.46-1.12.39-.71.04-1.42-.2-1.97-.23-.56.17-.87.36-1.07L19.2 9.1c.34-.36.68-.54.68-1.24s-2.7-3.96-2.7-3.96-2.27.43-2.57.43c-.3 0-.97-.25-1.59-.46-.61-.2-1.02-.2-1.02-.2z"/></svg>