API Docs better layout

Website/pages/docs.vue

@@ -1,11 +1,25 @@
 <template>
-  <div>
+  <div class="row wrap justify-center full-width">
     <!--   Top Section // "Sections" Card   -->
-    <v-card max-width="600px" class="rounded-lg">
-      <v-card-title style="padding-bottom: 0">Sections</v-card-title>
-      <v-list>
+    <v-card
+      max-width="600px"
+      class="mx-2"
+      style="background: transparent; width: max-content; height: max-content"
+    >
+      <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa">
+        Sections
+      </v-card-title> -->
+      <v-list style="background: transparent">
         <!--   Dynamically Generate Links From Below   -->
-        <v-list-item v-for="(item, i) in links" :key="i" router :to="item.to">
+        <v-list-item
+          v-for="(item, i) in links"
+          :key="i"
+          :to="item.to"
+          router
+          class="mt-4"
+          color="primary"
+          style="overflow: hidden; border-radius: 0.75rem"
+        >
           <v-list-item-icon>
             <v-icon v-text="item.icon" />
           </v-list-item-icon>
@@ -19,8 +33,12 @@
     <!--   Child Pages // Card   -->
     <v-card
       max-width="600px"
-      class="rounded-lg"
-      style="margin: 1em; padding: 0.75em; text-align: left"
+      class="col-xs col-md col-6 text-left mx-2 my-6 pa-8"
+      style="
+        height: max-content;
+        background-color: #222;
+        border-radius: 0.75rem;
+      "
     >
       <NuxtChild />
     </v-card>

Website/pages/docs/index.vue

@@ -3,6 +3,6 @@
     <h1>
       Welcome to the <span class="primary--text">official RYD docs</span>!
     </h1>
-    <p>To get started, select a section.</p>
+    <p>&lt;- To get started, select a section on the left.</p>
   </div>
 </template>

Website/pages/help.vue

@@ -18,10 +18,15 @@
       </li>
       <li>
         Make sure that this link opens:
-        <a href="https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14">
+        <a
+          class="px-2 py-1"
+          style="background: #222; border-radius: 0.25rem"
+          href="https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14"
+        >
           https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14
         </a>
-        , you should see plain text: <br />
+        , <br />
+        you should see plain text: <br />
         <span style="color: #eee">
           {"id":"QOFEgexls14", "dateCreated":"2021-12-15T16:54:12.250813Z",
           "likes":2907, "dislikes":215, "rating":4.725641025641026,
@@ -36,21 +41,20 @@
           style="
             font-size: 0.5rem;
             height: 1.5rem;
+            color: #aaa;
             padding-left: 0.25rem !important;
+            padding-right: 0.5rem !important;
           "
           :href="discordLink"
           target="_blank"
         >
-          <v-icon size="1.25rem" style="margin-right: 0.5em"
-            >mdi-discord</v-icon
-          >
+          <v-icon size="1rem" style="margin-right: 0.5em">mdi-discord</v-icon>
           Discord
         </v-btn>
         <ol type="a">
           <li>
             Tell us your <b>Operating System</b>, <b>Browser Name</b> and
             <b>Browser Version</b>.
-            <span style="color: #f44"> Detected: </span>
             <v-btn
               class="mainAltButton"
               style="
@@ -63,10 +67,11 @@
               target="_blank"
               @click="copyToClipboard(platform)"
             >
-              {{ platform }}
-              <v-icon size="1rem" style="margin-left: 0.5em"
+              <v-icon size=".75rem" color="primary" style="margin-right: 0.5em"
                 >mdi-content-copy</v-icon
               >
+              <span style="color: #f44"> Detected: </span>
+              &nbsp;{{ platform }}
             </v-btn>
           </li>