feat: add more animations to windows, minor fixes
This commit is contained in:
parent
ff8b96473e
commit
f02cd97626
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -208,57 +208,154 @@ a.app-selected-route {
|
|||||||
animation: 0.5s ease-out window-open-scale-horizontal forwards;
|
animation: 0.5s ease-out window-open-scale-horizontal forwards;
|
||||||
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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user