76 lines
1.6 KiB
Svelte
76 lines
1.6 KiB
Svelte
<script>
|
|
import { formatDate } from '$lib/datefmt.js';
|
|
import { postData } from '../_posts/all.js';
|
|
</script>
|
|
|
|
<style>
|
|
#posts {
|
|
/*text-align: center;*/
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
hr {
|
|
margin: 2rem 0;
|
|
border-color: #eee;
|
|
}
|
|
|
|
.post-date {
|
|
color: #808080;
|
|
}
|
|
|
|
.draft-notice {
|
|
vertical-align: 0.3rem;
|
|
font-size: 0.6rem;
|
|
padding: 0 0.3rem;
|
|
color: #e00;
|
|
background-color: #ffd9d9;
|
|
border: 1px solid red;
|
|
border-radius: 20%/50%;
|
|
margin: 0 0.2rem;
|
|
}
|
|
|
|
.post-link {
|
|
text-decoration: none;
|
|
}
|
|
.post-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25rem;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
h2 a {
|
|
color: currentcolor;
|
|
}
|
|
</style>
|
|
|
|
<svelte:head>
|
|
<title>Posts</title>
|
|
</svelte:head>
|
|
|
|
<div id="posts">
|
|
<h1 style:text-align="center">All Posts</h1>
|
|
{#each postData as post, idx}
|
|
<div class="post">
|
|
<div class="post-date">{new Date(post.date).toISOString().split('T')[0]}</div>
|
|
<h2>
|
|
<a data-sveltekit-preload-data="hover" class="post-link" href="/{post.slug}">
|
|
{post.title}
|
|
</a>
|
|
{#if post.draft}
|
|
<span class="draft-notice">Draft</span>
|
|
{/if}
|
|
</h2>
|
|
<p>{post.description}</p>
|
|
</div>
|
|
|
|
{#if idx < postData.length - 1}
|
|
<hr>
|
|
{/if}
|
|
{/each}
|
|
</div>
|