- - published on:
+ - published on:
- excerpt: {post.metadata.excerpt}
read more...
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;
@@ -15,20 +17,24 @@
-
+
-
-
-
-
- - author: dusk
- - published on:
- - excerpt:
{excerpt}
-
-
-
+ {#if showMetadata}
+
+
+
+
+ - author: dusk
+ - published on:
+ -
+ excerpt:
{excerpt}
+
+
+
+
+ {/if}
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 {