Dockerized the application, fixed fonts, improved SEO, upgraded to Nuxt 3.8.2

assets/styles/list-types.css

@@ -1,22 +0,0 @@
-@charset "UTF-8";
-@counter-style do {
-  system: cyclic;
-  symbols: "💻" "📌" "👻" "📷";
-  suffix: " ";
-}
-@counter-style enjoy {
-  system: cyclic;
-  symbols: "💻" "📌" "👻" "📷" "♟" "⛄";
-  suffix: " ";
-}
-.list-style-type-none {
-  list-style-type: none;
-}
-.list-style-type-do {
-  list-style-type: do;
-}
-.list-style-type-enjoy {
-  list-style-type: enjoy;
-}
-
-/*# sourceMappingURL=list-types.css.map */

assets/styles/list-types.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["list-types.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE","file":"list-types.css"}

assets/styles/lists.scss

@@ -10,6 +10,12 @@
   suffix: " ";
 }
 
+@counter-style faq {
+  system: cyclic;
+  symbols: "\2753" "\1F4A1";
+  suffix: " ";
+}
+
 .list-style-type {
   &-none {
     list-style-type: none;
@@ -22,4 +28,8 @@
   &-enjoy {
     list-style-type: enjoy;
   }
+
+  &-faq {
+    list-style-type: faq;
+  }
 }

assets/styles/main.scss

@@ -1,21 +1,20 @@
-// Fonts.
-@import '@fontsource/Lato/index.css';
-@import '@fontsource/Alexandria/700.css';
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 601px,
-  md: 996px,
-  lg: 1281px,
-  xl: 1921px,
-  xxl: 2561px
+// Libraries.
+@use '@fortawesome/fontawesome-svg-core/styles.css' as fontawesome;
+@use 'bootstrap' with (
+  $grid-breakpoints: (
+    xs: 0,
+    sm: 601px,
+    md: 996px,
+    lg: 1281px,
+    xl: 1921px,
+    xxl: 2561px
+  )
 );
+@use 'animate.css';
 
-// Bootstrap & animations.
-@import '../../node_modules/bootstrap/scss/bootstrap';
-@import '../../node_modules/animate.css/animate';
-@import 'transitions';
-@import 'list-types';
+// Modules.
+@use 'transitions';
+@use 'lists';
 
 // CSS Variables.
 :root {
@@ -33,18 +32,25 @@ html {
 body {
   display: flex;
   flex-direction: column;
+
+  position: sticky;
+
   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-size: 18px;
+
   height: 100%;
 }
 
@@ -78,6 +84,7 @@ body {
 
 .alex {
   font-family: Alexandria, sans-serif;
+  font-weight: 700;
 }
 
 .smooth-glide {
@@ -94,17 +101,21 @@ body {
   min-height: 100%;
 }
 
-.link {
+%link {
   color: inherit;
   text-decoration: none;
   transition: 0.3s ease;
+}
+
+.link {
+  @extend %link;
 
   &:hover {
     color: cornflowerblue;
   }
 
   &-hi {
-    @extend .link;
+    @extend %link;
 
     color: cornflowerblue;
 
@@ -113,7 +124,7 @@ body {
     }
 
     &-force-dark {
-      @extend .link;
+      @extend %link;
 
       color: cornflowerblue;
 
@@ -210,7 +221,7 @@ body {
 }
 
 // Dynamic classes.
-@include media-breakpoint-up(sm) {
+@include bootstrap.media-breakpoint-up(sm) {
   #ender-app {
     height: 100%;
   }
@@ -247,22 +258,23 @@ body {
   }
 }
 
-@include media-breakpoint-up(md) {
+@include bootstrap.media-breakpoint-up(md) {
+  /* TODO: Fill it up :) */
 }
 
-@include media-breakpoint-up(lg) {
+@include bootstrap.media-breakpoint-up(lg) {
   .dimensions {
     width: 60%;
   }
 }
 
-@include media-breakpoint-up(xl) {
+@include bootstrap.media-breakpoint-up(xl) {
   .dimensions {
     width: 40%;
   }
 }
 
-@include media-breakpoint-up(xxl) {
+@include bootstrap.media-breakpoint-up(xxl) {
   .dimensions {
     width: 30%;
   }

assets/styles/transitions.css

@@ -1,9 +0,0 @@
-.page-enter-active, .page-leave-active {
-  transition: all 0.4s;
-}
-.page-enter-from, .page-leave-to {
-  opacity: 0;
-  filter: blur(1rem);
-}
-
-/*# sourceMappingURL=transitions.css.map */

assets/styles/transitions.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["transitions.scss"],"names":[],"mappings":"AACE;EAEE;;AAGF;EAEE;EACA","file":"transitions.css"}