gazesys/website
gazesys/website
1
0
Fork 1
Code Actions Releases 1 Activity

feat: add more animations to windows, minor fixes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/window.svelte
View File

@ -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

4
src/routes/+layout.svelte
View File

@ -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

2
src/routes/entries/+page.svelte
View File

@ -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>

30
src/routes/entries/_layout.svelte
View File

@ -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>

121
src/styles/app.css
View File

@ -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% {
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 {