more tweaks to video card, watch page, about page and into animation

NUXT/components/CompactRenderers/compactChannelRenderer.vue

@@ -2,17 +2,6 @@
   <v-card
     class="entry gridVideoRenderer background"
     :to="`/watch?v=${video.videoId}`"
-    :class="
-      $store.state.tweaks.roundTweak > 0
-        ? $vuetify.theme.dark
-          ? 'lighten-1'
-          : 'darken-1'
-        : ''
-    "
-    :style="{
-      borderRadius: `${roundTweak / 2}rem`,
-      margin: $store.state.tweaks.roundTweak > 0 ? '0.5rem 1rem' : '0',
-    }"
     flat
   >
     <div id="details">

NUXT/components/UtilRenderers/baseVideoRenderer.vue

@@ -1,10 +1,13 @@
 <template>
   <v-card
-    class="entry videoRenderer background mb-2"
+    class="entry videoRenderer background"
     :to="`/watch?v=${vidId}`"
     :style="{
       borderRadius: `${roundTweak / 2.5}rem`,
-      margin: $store.state.tweaks.roundTweak > 0 ? '1rem' : '0',
+      margin:
+        $store.state.tweaks.roundTweak > 0
+          ? '0 1rem 1rem 1rem'
+          : '0 0 0.25rem 0',
     }"
     flat
   >

NUXT/pages/index.vue

@@ -77,7 +77,7 @@ export default {
   opacity: 0;
   transform: scale(0.5);
   transition-property: opacity, transform;
-  animation: bounce 0.66s ease infinite alternate;
+  animation: bounce 0.66s 0.5s ease 1 forwards;
 }
 /* triangles aren't very good at spinning :c */
 @keyframes bounce {

NUXT/pages/mods/about.vue

@@ -1,18 +1,15 @@
 <template>
   <div style="padding: 1rem">
     <center>
-      <div class="d-flex justify-center pa-4">
+      <div class="d-flex flex-column justify-center pa-4">
         <div>
           <v-img
-            width="27px"
+            width="69px"
             src="/icon.svg"
-            style="transform: rotate(90deg); filter: drop-shadow(0.1px 0.1px 0px #fff) drop-shadow(0.1px -0.1px 0px #fff);"
             :class="$vuetify.theme.dark ? '' : 'invert'"
           />
         </div>
-        <h1 style="font-size: 2rem; margin-left: -1px; margin-top: -9px">
+        <h1 style="font-size: 2rem">VueTube</h1>
-          ueTube
-        </h1>
       </div>
     </center>
 
@@ -61,10 +58,10 @@
     <!--   End Device Information   -->
 
     <!--   App Links   --->
-    <div class="obj d-flex flex-row gap-1">
+    <div class="obj d-flex flex-row gap-1 full-width">
       <v-btn
         depressed
-        class="action col"
+        class="action flex-grow-1"
         :class="
           $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
         "
@@ -76,7 +73,7 @@
       </v-btn>
       <v-btn
         depressed
-        class="action col ml-4"
+        class="action flex-grow-1 ml-4"
         :class="
           $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
         "

NUXT/pages/watch.vue

@@ -22,13 +22,13 @@
     </div>
 
     <div
-      v-bind:class="{
+      id="content-container"
+      :class="{
         'overflow-y-auto': !showComments,
         'overflow-y-hidden': showComments,
       }"
-      id="content-container"
     >
-      <v-card v-if="loaded" class="px-2 background rounded-0" flat>
+      <v-card v-if="loaded" class="background rounded-0" flat>
         <div
           v-ripple
           class="d-flex justify-space-between align-start px-3 pt-3"
@@ -61,13 +61,13 @@
           <v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
           <v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
         </div>
-        <div class="d-flex">
+        <div class="d-flex pl-4">
           <v-btn
             v-for="(item, index) in interactions"
             :key="index"
             text
             fab
-            class="vertical-button ma-1"
+            class="vertical-button mx-1"
             elevation="0"
             style="width: 4.2rem !important; height: 4.2rem !important"
             :disabled="item.disabled"
@@ -111,10 +111,10 @@
       <v-divider />
 
       <!--   Channel Bar   -->
-      <div class="channel-container" v-if="loaded">
+      <div v-if="loaded">
         <v-card
           flat
-          class="channel-section background px-3 rounded-0"
+          class="channel-section background py-2 px-3 rounded-0"
           :to="video.channelUrl"
         >
           <div id="details">
@@ -151,7 +151,7 @@
 
       <!-- Comments -->
       <div v-if="loaded && video.commentData" @click="toggleComment">
-        <v-card flat tile class="background comment-renderer py-0">
+        <v-card flat tile class="background comment-renderer px-3">
           <v-card-text class="comment-count keep-spaces px-0">
             <template v-for="text in video.commentData.headerText.runs">
               <template v-if="text.bold">
@@ -187,13 +187,19 @@
     ></swipeable-bottom-sheet> -->
 
       <!-- Related Videos -->
-      <div class="loaders" v-if="!loaded">
+      <div v-if="!loaded">
         <v-skeleton-loader
           type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
         />
         <vid-load-renderer :count="5" />
       </div>
-      <item-section-renderer v-else :render="recommends" />
+      <item-section-renderer
+        v-else
+        :render="recommends"
+        :style="{
+          marginTop: $store.state.tweaks.roundTweak > 0 ? '1rem' : '0',
+        }"
+      />
     </div>
   </div>
 </template>
@@ -447,7 +453,6 @@ export default {
 .comment-renderer {
   display: flex;
   align-items: center;
-  padding: 12px;
 }
 
 .channel-section #details,