Versatile auth URLs & many UI fixes (#199)

* Make project cards right-align their last element

Spaces out elements in a `.project-card` using `justify-content: space-between;`.

Fixes modrinth/knossos#170

* Automatically set URL for auth redirect

* Make login button use base url or current origin

Allows the login button to work in dev environment

* Remove Axios base URL trailing slash

* Update authUrl() on dashboard to match default

* Remove 'code' query from URL on page load
Allow non-exact paths to highlight mod & dashboard tabs

Fixes modrinth/knossos#200

* Make page 5 button visible on page 4 (pagination)

Fixes modrinth/knossos#184

* Color links on legal pages

Fixes modrinth/knossos#166

* Set max notifications to 5 and ignore duplicates

Fixes modrinth/knossos#175

* Add space above report button when no user desc

Fixes modrinth/knossos#143

* Better text spacing from edge of mobile screen

Fixes modrinth/knossos#179

* Fix slanted bars in modrinth/knossos#57

* Fix checkbox grid and role label

Fixes modrinth/knossos#191

* Move mod 'settings' button to the far right

Fixes modrinth/knossos#138

* Abbreviate minutes to min. when time is too long

Not a perfect solution imo, but works for now

Fixes modrinth/knossos#193

* Fix mobile header margins & add breakpoints

Fixes modrinth/knossos#203

* Clean up nuxt config
Silence babel warning & styleResources

* Upgrade sass-loader to 10.1.1 and remove warning

* Remove added horizontal footer padding

https://github.com/modrinth/knossos/pull/199#discussion_r629011624

* Improve mobile header fix

* Fix up minor inconsistencies in mod header

* Remove hard coded date

* Cleans up pagination to be more intuitive

* Fixes member invite input on moble

* Fix login button when searching mods

* Improved mobile mod search

Consistently sized pagination buttons

Breakpoint for sort buttons on smaller screens

* Consistent link style on text-only pages

* Better 4k support

* Slightly better mobile project-card support

Shuffles categories under mod icon when there is room

* Animate homepage typewriter effect backwards

* Tiny commit to align mod icons in mod headers

* Make processing status include 'Under Review'

This can be later updated once the backend has a separate status

* Create vercel.json

* Update domain auto detection

* Test vercel NODE_ENV

* Remove console.log for debugging hosting services

* Make mobile first + fix shrinked text circle size

* Optimize SVG

* Change media queries to be more mobile first

* Remove `|| window.location.origin`

* re-deploy vercel

* Change "Processing" message to "Under review"

pages/index.vue

@@ -171,7 +171,7 @@ fetch('https://api.modrinth.com/api/v1/mod').then(res => res.json()).then(data =
         </pre>
       </div>
     </div>
-    <m-footer class="footer" centered />
+    <m-footer class="footer" centered padded />
   </div>
 </template>
 
@@ -188,6 +188,7 @@ export default {
   data() {
     return {
       currentText: 'Open source',
+      increasing: true,
       texts: ['Open source', 'Easy to use', 'Developer focused', 'API Based'],
     }
   },
@@ -205,16 +206,29 @@ export default {
       })
     },
     typeWriter(text, i, callback) {
-      if (!text || i >= text.length) {
-        setTimeout(callback, 1000 + Math.random() * 500)
+      if (!this.increasing && i <= 0) {
+        this.increasing = true
+        setTimeout(callback, 300 + Math.random() * 50)
         return
       }
 
-      this.currentText = text.substring(0, i + 1)
-      setTimeout(
-        () => this.typeWriter(text, i + 1, callback),
-        150 + Math.random() * 50
-      )
+      const step = this.increasing ? 1 : -1
+
+      if (i >= text.length && this.increasing) {
+        this.increasing = false
+
+        setTimeout(
+          () => this.typeWriter(text, i + step, callback),
+          1300 + Math.random() * 500
+        )
+      } else {
+        this.currentText = text.substring(0, i + step)
+        const speed = this.increasing ? 140 : 50
+        setTimeout(
+          () => this.typeWriter(text, i + step, callback),
+          speed + Math.random() * 20
+        )
+      }
     },
   },
 }
@@ -233,6 +247,9 @@ export default {
   .left {
     padding-top: 75px;
     padding-left: 100px;
+    @media screen and (min-width: 1500px) {
+      padding-left: 15%;
+    }
 
     .typewriter {
       display: inline-block;
@@ -287,6 +304,11 @@ export default {
       font-weight: bold;
     }
   }
+  &.left {
+    @media screen and (min-width: 2048px) {
+      max-width: 15vw;
+    }
+  }
 }
 
 .hero-image {
@@ -311,7 +333,7 @@ export default {
     background: inherit;
     content: '';
     display: block;
-    height: 50%;
+    height: 100%;
     left: 0;
     position: absolute;
     right: 0;
@@ -323,12 +345,18 @@ export default {
   &:before {
     top: 0;
     transform: skewY(5deg);
+    @media screen and (min-width: 2048px) {
+      transform: skewY(2deg);
+    }
     transform-origin: 100% 0;
   }
 
   &:after {
     bottom: 0;
     transform: skewY(-5deg);
+    @media screen and (min-width: 2048px) {
+      transform: skewY(-2deg);
+    }
     transform-origin: 100%;
   }
 }
@@ -388,6 +416,12 @@ export default {
     padding-left: 0 !important;
     text-align: center;
     width: 100%;
+
+    h1,
+    h3,
+    p {
+      padding: 0 5vw;
+    }
   }
 
   .hero {