feat: Enhance page transitions with smooth animations

- Add transition class to main content body for improved animation
- Implement new CSS transitions for fade and content body movements
- Adjust transition timing and effects for smoother page loading experience

layout/page.ejs

@@ -15,7 +15,7 @@
 			<%- partial('components/header/navbar') %>
 		</div>
 
-		<div class="main-content-body">
+		<div class="main-content-body transition-main-content-body">
 			<% if (is_home() && theme.home.sidebar.enable === true && theme.home.sidebar.position === "left") { %>
 			<%- partial('pages/home/home-sidebar') %>
 			<% } %>

source/css/layout/page.styl

@@ -147,7 +147,27 @@
   transition 0.4s
   opacity 1
 
+.transition-main-content-body
+  transform translateY(0)
+  opacity 1
+  transition transform 0.4s ease, opacity 0.4s ease
+
+// Define transitions for both classes
+html.is-changing
+  .transition-fade
+    transition opacity 0.4s ease
+    opacity 1
+
+  .transition-main-content-body
+    transition transform 0.4s ease, opacity 0.4s ease
+    transform translateY(0)
+    opacity 1
+
+// Define states for unloaded pages
 html.is-animating
   .transition-fade
     opacity 0
-    transition 0.4s
+
+  .transition-main-content-body
+    transform translateY(20px)
+    opacity 0