Added stylelint, improved code readability, implemented swipe controls

assets/styles/main.css

@@ -15570,16 +15570,6 @@ textarea.form-control-lg {
   filter: blur(1em);
 }
 
-.expand-enter-active,
-.expand-leave-active {
-  transition-property: opacity, height;
-}
-
-.expand-enter,
-.expand-leave-to {
-  opacity: 0;
-}
-
 @counter-style do {
   system: fixed;
   symbols: "💻" "📌" "👻" "📷";
@@ -15623,7 +15613,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: white;
-  font-family: "Lato", sans-serif;
+  font-family: Lato, sans-serif;
   font-size: 18px;
   height: 100%;
 }
@@ -15655,7 +15645,7 @@ body {
 }
 
 .alex {
-  font-family: "Alexandria", sans-serif;
+  font-family: Alexandria, sans-serif;
 }
 
 .smooth-glide {
@@ -15776,7 +15766,6 @@ body {
   }
   .animate__animated-sm {
     animation-duration: var(--animate-duration);
-    -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
   .animate__delay-1-5s {

assets/styles/main.scss

@@ -33,24 +33,18 @@ html {
 body {
   display: flex;
   flex-direction: column;
-
-  background-color: rgb(6, 25, 28);
+  background-color: rgb(6 25 28);
   background-image: url('~/assets/images/sky.png');
-
   background-attachment: fixed;
   background-blend-mode: multiply;
   background-size: cover;
   background-repeat: no-repeat;
-
   image-rendering: pixelated;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
   color: white;
-  font-family: 'Lato', sans-serif;
-
+  font-family: Lato, sans-serif;
   font-size: 18px;
-
   height: 100%;
 }
 
@@ -83,7 +77,7 @@ body {
 }
 
 .alex {
-  font-family: 'Alexandria', sans-serif;
+  font-family: Alexandria, sans-serif;
 }
 
 .smooth-glide {
@@ -92,7 +86,7 @@ body {
 
 // Query-overridable classes.
 .background {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 50%);
 }
 
 .dimensions {
@@ -111,6 +105,7 @@ body {
 
   &-hi {
     @extend .link;
+
     color: cornflowerblue;
 
     &:hover {
@@ -132,17 +127,16 @@ body {
 .radial-gradient {
   background: radial-gradient(
     circle at left,
-    rgba(255, 255, 255, 0.8),
-    rgba(255, 255, 255, 0.75),
-    rgba(255, 255, 255, 0)
+    rgb(255 255 255 / 80%),
+    rgb(255 255 255 / 75%),
+    rgb(255 255 255 / 0%)
   );
 }
 
 .scrollbar {
   min-height: 128px;
-
   scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.2);
+  scrollbar-color: rgb(255 255 255 / 15%) rgb(0 0 0 / 20%);
 
   &::-webkit-scrollbar {
     width: 8px;
@@ -150,12 +144,12 @@ body {
 
   &::-webkit-scrollbar-track {
     border-radius: 8px;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgb(0 0 0 / 20%);
   }
 
   &::-webkit-scrollbar-thumb {
     border-radius: 8px;
-    background-color: rgba(255, 255, 255, 0.15);
+    background-color: rgb(255 255 255 / 15%);
   }
 }
 
@@ -165,20 +159,20 @@ body {
   }
 
   .scrollbar {
-    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
+    scrollbar-color: rgb(0 0 0 / 20%) rgb(255 255 255 / 20%);
 
     &::-webkit-scrollbar-track {
-      background-color: rgba(255, 255, 255, 0.2);
+      background-color: rgb(255 255 255 / 20%);
     }
 
     &::-webkit-scrollbar-thumb {
       border-radius: 8px;
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: rgb(0 0 0 / 20%);
     }
   }
 
   .background {
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: rgb(255 255 255 / 80%);
   }
 
   .link {
@@ -198,23 +192,20 @@ body {
   .radial-gradient {
     background: radial-gradient(
       circle at left,
-      rgba(0, 0, 0, 0.95),
-      rgba(0, 0, 0, 0.8),
-      rgba(0, 0, 0, 0)
+      rgb(0 0 0 / 95%),
+      rgb(0 0 0 / 80%),
+      rgb(0 0 0 / 0%)
     );
   }
 }
 
 .floaty {
   position: fixed;
-
   bottom: 0;
   left: 0;
   right: 0;
-
   width: fit-content;
   height: fit-content;
-
   margin: auto;
 }
 
@@ -231,12 +222,11 @@ body {
   .dimensions {
     width: 80%;
     min-height: fit-content;
-
     max-height: 90%;
   }
 
   .fade-mask-sm {
-    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
+    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%));
   }
 
   .rounded-1 {
@@ -249,7 +239,6 @@ body {
 
   .animate__animated-sm {
     animation-duration: var(--animate-duration);
-    -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
 

assets/styles/scrollbar.css

@@ -1,14 +0,0 @@
-body::-webkit-scrollbar {
-  width: 1em;
-}
-
-body::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-}
-
-body::-webkit-scrollbar-thumb {
-  background-color: darkgrey;
-  outline: 1px solid slategrey;
-}
-
-/*# sourceMappingURL=scrollbar.css.map */

assets/styles/scrollbar.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["scrollbar.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;;;AAGJ;EACE;EACA","file":"scrollbar.css"}

assets/styles/transitions.scss

@@ -10,13 +10,3 @@
     filter: blur(1em);
   }
 }
-
-.expand-enter-active,
-.expand-leave-active {
-  transition-property: opacity, height;
-}
-
-.expand-enter,
-.expand-leave-to {
-  opacity: 0;
-}