added proper page transition for API docs, chrome scrollbar hover, removed jank from background illustration

Website/layouts/default.vue

@@ -12,7 +12,7 @@
     <!-- abstract background -->
     <v-img
       src="/ui/abstract.svg"
-      style="position: absolute; left: 0; right: 0; width: 100%; height: 100%"
+      style="position: absolute; left: 0; right: 0; width: 100vw; height: 100vh"
     />
 
     <v-main style="padding-top: 4rem !important">
@@ -33,11 +33,11 @@ export default {
     links: [
       { name: "Home", path: "/" },
       { name: "Install", path: "/install" },
+      { name: "API", path: "/docs" },
       { name: "Help", path: "/help" },
       { name: "FAQ", path: "/faq" },
       { name: "Donate", path: "/donate" },
       { name: "Links", path: "/links" },
-      { name: "API", path: "/documentation" },
     ],
   }),
 };
@@ -62,7 +62,13 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #ff4444; /* color of the scroll thumb */
+  background-color: #333; /* color of the scroll thumb */
+  border-radius: 20px; /* roundness of the scroll thumb */
+  border: 4px solid #111; /* creates padding around scroll thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #f22; /* color of the scroll thumb */
   border-radius: 20px; /* roundness of the scroll thumb */
   border: 4px solid #111; /* creates padding around scroll thumb */
 }

Website/package-lock.json

@@ -14,7 +14,6 @@
         "vuetify": "^2.5.5"
       },
       "devDependencies": {
-        "@nuxtjs/device": "^2.1.0",
         "@nuxtjs/vuetify": "^1.12.1",
         "babel-eslint": "^10.1.0",
         "eslint": "^7.32.0",
@@ -2645,21 +2644,6 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
-    "node_modules/@nuxtjs/device": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/device/-/device-2.1.0.tgz",
-      "integrity": "sha512-TYBdt1w2bmCCWp+MhgcBATZtqyUBi3nSdNpcLGILw5USLwCsC/yZtIkq9YisuEzuRnod9w/RZpoE80MxLftEuA==",
-      "dev": true,
-      "dependencies": {
-        "defu": "^3.2.2"
-      }
-    },
-    "node_modules/@nuxtjs/device/node_modules/defu": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-3.2.2.tgz",
-      "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==",
-      "dev": true
-    },
     "node_modules/@nuxtjs/vuetify": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz",
@@ -16658,23 +16642,6 @@
         }
       }
     },
-    "@nuxtjs/device": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/device/-/device-2.1.0.tgz",
-      "integrity": "sha512-TYBdt1w2bmCCWp+MhgcBATZtqyUBi3nSdNpcLGILw5USLwCsC/yZtIkq9YisuEzuRnod9w/RZpoE80MxLftEuA==",
-      "dev": true,
-      "requires": {
-        "defu": "^3.2.2"
-      },
-      "dependencies": {
-        "defu": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/defu/-/defu-3.2.2.tgz",
-          "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==",
-          "dev": true
-        }
-      }
-    },
     "@nuxtjs/vuetify": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz",

Website/pages/debug.vue

@@ -40,6 +40,9 @@
 
 <script>
 export default {
+  transition(to) {
+    return to.name == "debug" ? "swoop-in" : "swoop-out";
+  },
   data() {
     return {
       device: this.$ua,

Website/pages/documentation.vue → Website/pages/docs.vue

@@ -29,6 +29,15 @@
 
 <script>
 export default {
+  transition(to, from) {
+    if (!from) return "swoop-in";
+    let routes = ["index", "install", "docs", "help", "faq", "donate", "links"];
+    if (routes.indexOf(to.name) < 0) return "swoop-out";
+    if (routes.indexOf(from.name) < 0) return "swoop-in";
+    return routes.indexOf(to.name) > routes.indexOf(from.name)
+      ? "swoop-left"
+      : "swoop-right";
+  },
   data() {
     return {
       //---   Links To Generate Above    ---//
@@ -36,22 +45,22 @@ export default {
         {
           text: "Usage Rights",
           icon: "mdi-book-open-variant",
-          to: "/documentation/usage-rights",
+          to: "/docs/usage-rights",
         },
         {
           text: "URL Information",
           icon: "mdi-web",
-          to: "/documentation/url",
+          to: "/docs/url",
         },
         {
           text: "Available Endpoints",
           icon: "mdi-transit-connection-variant",
-          to: "/documentation/endpoints",
+          to: "/docs/endpoints",
         },
         {
           text: "Basic Fetching Tutorial",
           icon: "mdi-school",
-          to: "/documentation/fetching",
+          to: "/docs/fetching",
         },
       ],
     };

Website/pages/donate.vue

@@ -23,7 +23,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "help", "faq", "donate", "links"];
+    let routes = ["index", "install", "docs", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)

Website/pages/faq.vue

@@ -24,7 +24,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "help", "faq", "donate", "links"];
+    let routes = ["index", "install", "docs", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)

Website/pages/help.vue

@@ -101,7 +101,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "help", "faq", "donate", "links"];
+    let routes = ["index", "install", "docs", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)

Website/pages/index.vue

@@ -81,7 +81,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "help", "faq", "donate", "links"];
+    let routes = ["index", "install", "docs", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)

Website/pages/install.vue

@@ -76,7 +76,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "help", "faq", "donate", "links"];
+    let routes = ["index", "install", "docs", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)

Website/pages/links.vue

@@ -41,7 +41,7 @@
 export default {
   transition(to, from) {
     if (!from) return "swoop-in";
-    let routes = ["index", "install", "help", "faq", "donate", "links"];
+    let routes = ["index", "install", "docs", "help", "faq", "donate", "links"];
     if (routes.indexOf(to.name) < 0) return "swoop-out";
     if (routes.indexOf(from.name) < 0) return "swoop-in";
     return routes.indexOf(to.name) > routes.indexOf(from.name)