Changed timing a bit for smoother animation.

Create Test Branch testing site updates

assets/css/main.css

@@ -21,6 +21,13 @@ main {
   margin-bottom: 0;
   margin-top: 0;
   min-height: calc(100vh - 10vh);
+  view-transition-name: main-page;
+  transition-property: opacity, display;
+  transition-duration: 1s;
+  opacity: 1;
+  @starting-style {
+    opacity: 0;
+  }
 }
 
 .main-page {
@@ -950,3 +957,32 @@ textfield {
     }
   }
 }
+
+@view-transition {
+  navigation: none;
+  animation: none;
+  
+}
+
+::view-transition-group(main-page) {
+  animation-timing-function: ease-out;
+}
+::view-transition-old(main-page) {
+  animation-name: fade-out;
+}
+
+::view-transition-new(main-page) {
+  animation-name: fade-in;
+}
+
+@keyframes fade-out {
+  0% { opacity: 1;}
+  50% { opacity: 0;}
+  100% { opacity: 0;}
+}
+
+@keyframes fade-in {
+  0% { opacity: 0;}
+  50% { opacity: 0;}
+  100% { opacity: 1;}
+}

assets/js/index.js

@@ -18,6 +18,7 @@ import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js
 
 const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
 const supabaseKey = "sb_publishable_b0fMYw5I1X97gQXJLVBnrA_-0L4qHGv";
+
 //anon key, you cant access private stuffs or add hilarious stuffs w/ this...
 //(unless sending me some malicious links but I delete your msg)
 //the moment you notice you need an API endpoint.