From f02cd9762608293f17a9d2b9aa3dd7fbbef068af Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Thu, 26 Sep 2024 03:30:26 +0300
Subject: [PATCH] feat: add more animations to windows, minor fixes

---
 src/components/window.svelte      |  16 +++-
 src/routes/+layout.svelte         |   4 +-
 src/routes/entries/+page.svelte   |   2 +-
 src/routes/entries/_layout.svelte |  30 +++++---
 src/styles/app.css                | 121 +++++++++++++++++++++++++++---
 5 files changed, 144 insertions(+), 29 deletions(-)

diff --git a/src/components/window.svelte b/src/components/window.svelte
index 9e6854f..6ceaeb1 100644
--- a/src/components/window.svelte
+++ b/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 chosenKeyframe = scaleKeyframes.at(Math.floor(Math.random() * 3))
+	const scaleKeyframes = [
+		"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
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4ad1f27..c2046e1 100644
--- a/src/routes/+layout.svelte
+++ b/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
diff --git a/src/routes/entries/+page.svelte b/src/routes/entries/+page.svelte
index 26e2a9f..45e6db7 100644
--- a/src/routes/entries/+page.svelte
+++ b/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>
diff --git a/src/routes/entries/_layout.svelte b/src/routes/entries/_layout.svelte
index 04f0090..aed51c8 100644
--- a/src/routes/entries/_layout.svelte
+++ b/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">
-		<div class="prose prose-ralsei">
-			<ul>
-                <link class="u-url" href="{PUBLIC_BASE_URL}{$page.url.pathname}">
-                <li>author: <a rel="author" href={PUBLIC_BASE_URL}>dusk</a></li>
-				<li>published on: <time class="dt-published" datetime="{date} 00:00:00">{date}</time></li>
-				<li class="max-w-80 text-wrap">excerpt: <div class="inline p-summary">{excerpt}</div></li>
-			</ul>
-		</div>
-	</Window>
+	{#if showMetadata}
+		<Window title="metadata">
+			<div class="prose prose-ralsei">
+				<ul>
+					<link class="u-url" href="{PUBLIC_BASE_URL}{$page.url.pathname}" />
+					<li>author: <a rel="author" class="p-author h-card" href={PUBLIC_BASE_URL}>dusk</a></li>
+					<li>published on: <time class="dt-published" datetime="{date} 00:00:00">{date}</time></li>
+					<li class="max-w-80 text-wrap">
+						excerpt: <div class="inline p-summary">{excerpt}</div>
+					</li>
+				</ul>
+			</div>
+		</Window>
+	{/if}
 </article>
diff --git a/src/styles/app.css b/src/styles/app.css
index eaa9f24..bcdcdc2 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -208,57 +208,154 @@ a.app-selected-route {
         animation: 0.5s ease-out window-open-scale-horizontal forwards;
         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% {
-            transform: scale(0.0);
+        20% {
+            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% {
-            transform: scale(1.0, 0.0);
+        20% {
+            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% {
-            transform: scale(0.0, 1.0);
+        20% {
+            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 {