Add middleware for background and browser title

app.vue

@@ -14,11 +14,7 @@ AOS.init();
 
 <style lang="scss">
 .app-background { 
-  background: rgba(41, 31, 68, 0.9);
-}
-
-.app-background-solid {
-  background: rgb(41, 31, 68);
+  background: rgba(41, 31, 68, 1);
 }
 
 .aos-fix[data-aos][data-aos].aos-animate {
@@ -61,6 +57,7 @@ html {
 
   position: relative;
   z-index: 0;
+  transition: all 1s ease-out;
 }
 
 body {
@@ -90,7 +87,7 @@ svg {
 }
 
 table {
-  @extend .app-background-solid;
+  @extend .app-background;
 }
 
 thead, tbody, th, td {
@@ -103,7 +100,7 @@ table > tbody > tr:nth-of-type(2n+1) > * {
 
 
 ul.dropdown-menu {
-  @extend .app-background-solid;
+  @extend .app-background;
 }
 
 .list-group-item {

middleware/background.global.ts

@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  useHead({
+    htmlAttrs: {
+      style: to.fullPath == "/" ? "background: url('/clean-cuts/img/background.jpg');" : "background: rgb(21, 11, 48)"
+    },
+  });
+});

middleware/title.global.ts

@@ -0,0 +1,12 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  useHead({
+    title: to.fullPath == "/" ? "Clean Cuts" : to.fullPath
+      .split("/")
+      .filter(x => x != "")
+      .map(x => x
+        .split("-") // Remove hypens
+        .map(x => x.charAt(0).toUpperCase() + x.slice(1)) // Titlecase words
+        .join(" "))
+      .join(" • ")
+  })
+});

nuxt.config.ts

@@ -2,7 +2,6 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   ssr: false,
-
   app: {
     baseURL: "/clean-cuts/",
     pageTransition: {
@@ -16,7 +15,6 @@ export default defineNuxtConfig({
     head: {
       htmlAttrs: {
         "data-bs-theme": "dark",
-        "style": "background-image: url('/clean-cuts/img/background.jpg');"
       },
       bodyAttrs: {
         class: "h-100"