feat: add more animations to windows, minor fixes

This commit is contained in:
dusk 2024-09-26 03:30:26 +03:00
parent ff8b96473e
commit f02cd97626
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
5 changed files with 144 additions and 29 deletions

View File

@ -1,9 +1,21 @@
<script lang="ts"> <script lang="ts">
import Layout from "../routes/+layout.svelte";
export let title: string; export let title: string;
export let iconUri: 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> </script>
<div <div

View File

@ -128,11 +128,11 @@
</defs> </defs>
</svg> </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 /> <slot />
</div> </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 <div
class=" class="
max-w-full max-h-fit p-1 max-w-full max-h-fit p-1

View File

@ -20,7 +20,7 @@
> >
<div class="flex flex-col gap-y-1 prose prose-ralsei"> <div class="flex flex-col gap-y-1 prose prose-ralsei">
<ul> <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> <li class="max-w-80 text-wrap">excerpt: {post.metadata.excerpt}</li>
</ul> </ul>
<strong class="place-self-end text-ralsei-green-light"> read more... </strong> <strong class="place-self-end text-ralsei-green-light"> read more... </strong>

View File

@ -2,11 +2,13 @@
import { PUBLIC_BASE_URL } from '$env/static/public'; import { PUBLIC_BASE_URL } from '$env/static/public';
import Window from '../../components/window.svelte'; import Window from '../../components/window.svelte';
import '../../styles/app.css'; import '../../styles/app.css';
import { page } from "$app/stores"; import { page } from '$app/stores';
export let title; export let title;
export let date; export let date;
export let excerpt; export let excerpt;
$: showMetadata = excerpt !== undefined && excerpt !== null;
</script> </script>
<svelte:head> <svelte:head>
@ -15,20 +17,24 @@
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
</svelte:head> </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"> <Window {title} iconUri="/icons/entry.png">
<div class="prose prose-ralsei max-w-[80ch] e-content"> <div class="prose prose-ralsei max-w-[80ch] e-content">
<slot /> <slot />
</div> </div>
</Window> </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> </article>

View File

@ -209,56 +209,153 @@ a.app-selected-route {
transform-origin: left; 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 { @keyframes window-open-scale {
0% { 0% {
transform: scale(0.0); scale: 0.0;
opacity: 0.0; opacity: 0.0;
} }
30% { 20% {
transform: scale(0.0); scale: 0.0;
} }
60% { 60% {
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
transform: scale(1.0); scale: 1.0;
opacity: 1.0; opacity: 1.0;
} }
} }
@keyframes window-open-scale-vertical { @keyframes window-open-scale-vertical {
0% { 0% {
transform: scale(1.0, 0.0); scale: 1.0 0.0;
opacity: 0.0; opacity: 0.0;
} }
30% { 20% {
transform: scale(1.0, 0.0); scale: 1.0 0.0;
} }
60% { 60% {
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
transform: scale(1.0, 1.0); scale: 1.0 1.0;
opacity: 1.0; opacity: 1.0;
} }
} }
@keyframes window-open-scale-horizontal { @keyframes window-open-scale-horizontal {
0% { 0% {
transform: scale(0.0, 1.0); scale: 0.0 1.0;
opacity: 0.0; opacity: 0.0;
} }
30% { 20% {
transform: scale(0.0, 1.0); scale: 0.0 1.0;
} }
60% { 60% {
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
transform: scale(1.0, 1.0); scale: 1.0 1.0;
opacity: 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 { .genderfluid-gradient {