Upgrade to Nuxt 3.12, simplify logic

assets/styles/layers.scss

@@ -0,0 +1 @@
+@layer base, vuetify, overrides

assets/styles/main.scss

@@ -1,14 +1,3 @@
-// Libraries.
-@use 'bootstrap' with (
-  $grid-breakpoints: (
-    xs: 0,
-    sm: 601px,
-    md: 961px,
-    lg: 1281px,
-    xl: 1921px,
-    xxl: 2561px
-  )
-);
 @use 'animate.css';
 
 // Modules.
@@ -20,15 +9,12 @@
   --animate-duration: 1s;
   --animate-delay: 0.75s;
   --animate-repeat: 1;
-  --bs-font-sans-serif: 'Lato', 'Times New Roman';
-  --bs-font-monospace: 'JetBrains Mono', 'Courier New';
-  --bs-body-font-size: 20px;
-  --bs-body-line-height: 1.5;
 }
 
 // The HTML page.
 html {
   height: 100%;
+  font-size: 14px;
 }
 
 // The body element.
@@ -54,6 +40,49 @@ body {
   height: 100%;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  @apply font-serif;
+  font-weight: bold;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+a {
+  @apply text-inherit no-underline transition-all;
+
+  color: cornflowerblue;
+
+  &:hover {
+    color: royalblue;
+  }
+}
+
+ul {
+  padding-left: 1.5em;
+}
+
 // Entry point (Vue mount).
 #ender-app {
   flex: 1 1 0;
@@ -61,10 +90,6 @@ body {
 }
 
 // Helper classes that don't exist in Bootstrap.
-.mh-0 {
-  max-height: 100% !important;
-}
-
 .inline {
   display: inline;
 }
@@ -143,7 +168,7 @@ body {
   min-height: 100%;
 }
 
-.separator {
+.accent {
   color: white;
 }
 
@@ -183,41 +208,23 @@ body {
   }
 }
 
-%link {
-  color: inherit;
-  text-decoration: none;
+%transition {
   transition: 0.3s ease;
 }
 
 .link {
-  @extend %link;
-
-  &:hover {
-    color: cornflowerblue;
-  }
-
-  &-hi {
-    @extend %link;
+  &-hi-force-dark {
+    @apply text-inherit no-underline transition-all;
 
     color: cornflowerblue;
 
     &:hover {
       color: royalblue;
     }
-
-    &-force-dark {
-      @extend %link;
-
-      color: cornflowerblue;
-
-      &:hover {
-        color: royalblue;
-      }
-    }
   }
 }
 
-.radial-gradient {
+.accent-gradient {
   background: radial-gradient(
     circle at left,
     rgb(255 255 255 / 80%),
@@ -272,25 +279,19 @@ body {
     background-color: rgb(255 255 255 / 80%);
   }
 
-  .link {
+  a {
+    color: royalblue;
+
     &:hover {
-      color: royalblue;
-    }
-
-    &-hi {
-      color: royalblue;
-
-      &:hover {
-        color: darkblue;
-      }
+      color: darkblue;
     }
   }
 
-  .separator {
+  .accent {
     color: black;
   }
 
-  .radial-gradient {
+  .accent-gradient {
     background: radial-gradient(
       circle at left,
       rgb(0 0 0 / 95%),
@@ -422,7 +423,7 @@ body {
 
     :is(p, li) {
       a {
-        @extend %link;
+        @apply text-inherit no-underline transition-all;
 
         color: cornflowerblue;
 
@@ -452,7 +453,7 @@ body {
       font-weight: 700;
 
       a {
-        @extend %link;
+        @apply text-inherit no-underline transition-all;
 
         &:hover {
           color: indianred;
@@ -549,7 +550,11 @@ body {
 }
 
 // Dynamic classes.
-@include bootstrap.media-breakpoint-up(sm) {
+@screen sm {
+  html {
+    font-size: 16px;
+  }
+
   #ender-app {
     height: 100%;
   }
@@ -586,7 +591,12 @@ body {
   }
 }
 
-@include bootstrap.media-breakpoint-up(md) {
+@screen md {
+  html {
+    font-size: 18px;
+  }
+
+
   .post {
     &-box {
       padding-bottom: 0.6942rem;
@@ -623,19 +633,23 @@ body {
   }
 }
 
-@include bootstrap.media-breakpoint-up(lg) {
+@screen lg {
+  html {
+    font-size: 20px;
+  }
+
   .dimensions {
     width: 75%;
   }
 }
 
-@include bootstrap.media-breakpoint-up(xl) {
+@screen xl {
   .dimensions {
     width: 60%;
   }
 }
 
-@include bootstrap.media-breakpoint-up(xxl) {
+@screen 2xl {
   .dimensions {
     width: 50%;
   }

assets/styles/vuetify.scss

@@ -1,6 +1,6 @@
-@use 'vuetify/settings' with (
+@forward 'vuetify/settings' with (
   $utilities: false,
   $color-pack: false,
-
-  $button-banner-actions-padding: 0 69px,
+  $reset: false,
+  $layers: true,
 );