feat: add more animations to windows, minor fixes

src/components/window.svelte

@@ -1,9 +1,21 @@
 <script lang="ts">
+	import Layout from "../routes/+layout.svelte";
+
 	export let title: string;
 	export let iconUri: string = '';
 
-	const scaleKeyframes = ["window-open", "window-open-vertical", "window-open-horizontal"];
+	const scaleKeyframes = [
-	const chosenKeyframe = scaleKeyframes.at(Math.floor(Math.random() * 3))
+		"window-open",
+		"window-open-vertical",
+		"window-open-vertical",
+		"window-open-horizontal",
+		"window-open-horizontal",
+		"window-open-move-up",
+		"window-open-move-down",
+		"window-open-move-left",
+		"window-open-move-right",
+	];
+	$: chosenKeyframe = scaleKeyframes.at(Math.floor(Math.random() * scaleKeyframes.length))
 </script>
 
 <div

src/routes/+layout.svelte

@@ -128,11 +128,11 @@
 	</defs>
 </svg>
 
-<div class="md:h-[96vh] pb-[7vh] lg:px-[4vw] 2xl:px-[8vw] lg:py-[4vh]">
+<div class="md:h-[96vh] pb-[8vh] lg:px-[4vw] 2xl:px-[8vw] lg:py-[5.5vh] overflow-x-hidden">
 	<slot />
 </div>
 
-<nav class="w-full min-h-[5vh] max-h-[6vh] fixed bottom-0 z-10 bg-ralsei-black">
+<nav class="w-full min-h-[5vh] max-h-[6vh] fixed bottom-0 z-10 bg-ralsei-black overflow-hidden">
 	<div
 		class="
 			max-w-full max-h-fit p-1

src/routes/entries/+page.svelte

@@ -20,7 +20,7 @@
 				>
 					<div class="flex flex-col gap-y-1 prose prose-ralsei">
 						<ul>
-							<li>published on: <time datetime="2024-08-11 12:00:00">{post.published}</time></li>
+							<li>published on: <time datetime="{post.metadata.date} 00:00:00">{post.published}</time></li>
 							<li class="max-w-80 text-wrap">excerpt: {post.metadata.excerpt}</li>
 						</ul>
 						<strong class="place-self-end text-ralsei-green-light"> read more... </strong>

src/routes/entries/_layout.svelte

@@ -2,11 +2,13 @@
 	import { PUBLIC_BASE_URL } from '$env/static/public';
 	import Window from '../../components/window.svelte';
 	import '../../styles/app.css';
-    import { page } from "$app/stores";
+	import { page } from '$app/stores';
 
 	export let title;
 	export let date;
 	export let excerpt;
+
+	$: showMetadata = excerpt !== undefined && excerpt !== null;
 </script>
 
 <svelte:head>
@@ -15,20 +17,24 @@
 	<meta property="og:title" content={title} />
 </svelte:head>
 
-<article class="flex flex-wrap gap-x-4 pb-[8vh] h-entry">
+<article class="flex flex-wrap gap-4 h-entry">
 	<Window {title} iconUri="/icons/entry.png">
 		<div class="prose prose-ralsei max-w-[80ch] e-content">
 			<slot />
 		</div>
 	</Window>
-	<Window title="metadata">
+	{#if showMetadata}
-		<div class="prose prose-ralsei">
+		<Window title="metadata">
-			<ul>
+			<div class="prose prose-ralsei">
-                <link class="u-url" href="{PUBLIC_BASE_URL}{$page.url.pathname}">
+				<ul>
-                <li>author: <a rel="author" href={PUBLIC_BASE_URL}>dusk</a></li>
+					<link class="u-url" href="{PUBLIC_BASE_URL}{$page.url.pathname}" />
-				<li>published on: <time class="dt-published" datetime="{date} 00:00:00">{date}</time></li>
+					<li>author: <a rel="author" class="p-author h-card" href={PUBLIC_BASE_URL}>dusk</a></li>
-				<li class="max-w-80 text-wrap">excerpt: <div class="inline p-summary">{excerpt}</div></li>
+					<li>published on: <time class="dt-published" datetime="{date} 00:00:00">{date}</time></li>
-			</ul>
+					<li class="max-w-80 text-wrap">
-		</div>
+						excerpt: <div class="inline p-summary">{excerpt}</div>
-	</Window>
+					</li>
+				</ul>
+			</div>
+		</Window>
+	{/if}
 </article>

src/styles/app.css

@@ -209,56 +209,153 @@ a.app-selected-route {
         transform-origin: left;
     }
 
+    .animate-window-open-move-up {
+        animation: 0.5s ease-out window-open-move-up forwards;
+    }
+
+    .animate-window-open-move-down {
+        animation: 0.5s ease-out window-open-move-down forwards;
+    }
+
+    .animate-window-open-move-left {
+        animation: 0.5s ease-out window-open-move-left forwards;
+    }
+
+    .animate-window-open-move-right {
+        animation: 0.5s ease-out window-open-move-right forwards;
+    }
+
+    .animate-overflow-keep-hidden {
+        animation: 0.6s linear overflow-keep-hidden forwards;
+    }
+    
     @keyframes window-open-scale {
         0% {
-            transform: scale(0.0);
+            scale: 0.0;
             opacity: 0.0;
         }
-        30% {
+        20% {
-            transform: scale(0.0);
+            scale: 0.0;
         }
         60% {
             opacity: 0.5;
         }
         100% {
-            transform: scale(1.0);
+            scale: 1.0;
             opacity: 1.0;
         }
     }
     
     @keyframes window-open-scale-vertical {
         0% {
-            transform: scale(1.0, 0.0);
+            scale: 1.0 0.0;
             opacity: 0.0;
         }
-        30% {
+        20% {
-            transform: scale(1.0, 0.0);
+            scale: 1.0 0.0;
         }
         60% {
             opacity: 0.5;
         }
         100% {
-            transform: scale(1.0, 1.0);
+            scale: 1.0 1.0;
             opacity: 1.0;
         }
     }
     
     @keyframes window-open-scale-horizontal {
         0% {
-            transform: scale(0.0, 1.0);
+            scale: 0.0 1.0;
             opacity: 0.0;
         }
-        30% {
+        20% {
-            transform: scale(0.0, 1.0);
+            scale: 0.0 1.0;
         }
         60% {
             opacity: 0.5;
         }
         100% {
-            transform: scale(1.0, 1.0);
+            scale: 1.0 1.0;
             opacity: 1.0;
         }
     }
+
+    @keyframes window-open-move-down {
+        0% {
+            translate: 0 10rem;
+            opacity: 0.0;
+        }
+        20% {
+            translate: 0 10rem;
+        }
+        60% {
+            opacity: 0.5;
+        }
+        100% {
+            translate: 0 0;
+            opacity: 1.0;
+        }
+    }
+
+    @keyframes window-open-move-up {
+        0% {
+            translate: 0 -10rem;
+            opacity: 0.0;
+        }
+        20% {
+            translate: 0 -10rem;
+        }
+        60% {
+            opacity: 0.5;
+        }
+        100% {
+            translate: 0 0;
+            opacity: 1.0;
+        }
+    }
+
+    @keyframes window-open-move-left {
+        0% {
+            translate: 10rem 0;
+            opacity: 0.0;
+        }
+        20% {
+            translate: 10rem 0;
+        }
+        60% {
+            opacity: 0.5;
+        }
+        100% {
+            translate: 0 0;
+            opacity: 1.0;
+        }
+    }
+
+    @keyframes window-open-move-right {
+        0% {
+            translate: -10rem 0;
+            opacity: 0.0;
+        }
+        20% {
+            translate: -10rem 0;
+        }
+        60% {
+            opacity: 0.5;
+        }
+        100% {
+            translate: 0 0;
+            opacity: 1.0;
+        }
+    }
+
+    @keyframes overflow-keep-hidden {
+        0% {
+            overflow: hidden;
+        }
+        100% {
+            overflow: auto;
+        }
+    }
 }
 
 .genderfluid-gradient {