feat: add transitions between pages

src/scss/base.scss

@@ -43,6 +43,8 @@
   --page-background-image: url(@/assets/layered-waves-light.svg);
   --page-background-image-height: 100vw;
   --page-background-image-max-height: 50vh;
+  --page-transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  --page-transform: translateY(5em);
 
   --paragraph-margin: 1rem;
 
@@ -286,3 +288,10 @@
     --navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left));
   }
 }
+
+@media (prefers-reduced-motion) {
+  :root {
+    --page-transition: opacity 0.5s ease;
+    --page-transform: none;
+  }
+}

src/scss/main.scss

@@ -171,3 +171,14 @@ table {
     }
   }
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: var(--page-transition);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: var(--page-transform);
+}