revival-archive/src/routes/blog/+page.svelte

41 lines
884 B
Svelte

<script lang="ts">
import when from "$lib/when"
export let data
const posts = data.posts.sort(
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
)
</script>
<svelte:head>
<title>Blog • Revival Archive</title>
</svelte:head>
<h1>Blog Posts</h1>
{#each posts as post, num}
<a
in:fade|global={{ num, total: posts.length }}
href="/post/{post.path}"
class="txt @light:text-dark hover:text-#ccc @light:hover:text-#555 bg-a rounded-3 box-border block text-white transition hover:shadow-xl">
<article class="mb-4 px-6 py-3">
<h2 class="mb-2 mt-1">{post.title}</h2>
<p class="my-2">
{when(post.date)}
</p>
</article>
</a>
{/each}
{#if posts.length == 0}
<h2 class="font-300 mt-35vh text-center tracking-wide">
No blog posts yet. Watch this space!
</h2>
{/if}
<style lang="stylus">
a:hover
transform translateY(-0.15rem)
</style>