Added some animations and tweaked some styles

app/assets/css/main.css

@@ -25,8 +25,8 @@
 
 .dark-mode {
     --text: #fbfbf7;
-    --bg: #111111;
-    --muted: #d1d1d1;
+    --bg: #0c0c0c;
+    --muted: #a3a3a3;
 
     --color-white-500: #fbfbf7;
 }
@@ -73,6 +73,34 @@ body {
     line-height: 1.6;
 }
 
+/* full-page film grain */
+body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    pointer-events: none;
+    opacity: 0.06;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    mix-blend-mode: multiply;
+}
+
+.dark-mode body::after {
+    mix-blend-mode: screen;
+    opacity: 0.045;
+}
+
+/* quick page transition */
+.page-enter-active,
+.page-leave-active {
+    transition: opacity 0.18s ease;
+}
+
+.page-enter-from,
+.page-leave-to {
+    opacity: 0;
+}
+
 .basic-link {
     color: var(--text);
     transition: opacity 0.2s ease;
@@ -92,7 +120,10 @@ body {
     transition: all 200ms ease;
     padding: 0 4px;
     margin: 0 -4px;
-    background-image: linear-gradient(var(--color-white-500), var(--color-white-500));
+    background-image: linear-gradient(
+        var(--color-white-500),
+        var(--color-white-500)
+    );
     background-size: 100% 1px;
     background-position: bottom;
     background-repeat: no-repeat;