92 lines
2.1 KiB
Svelte
92 lines
2.1 KiB
Svelte
<!-- Layout for posts -->
|
|
<script lang="ts">
|
|
import { type BlogData } from './+layout';
|
|
|
|
export let data : BlogData
|
|
|
|
const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
|
|
"July", "August", "September", "October", "November", "December"];
|
|
function humanDate(date : Date) : string {
|
|
return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
|
|
}
|
|
</script>
|
|
|
|
<article>
|
|
<div class="body">
|
|
<header>
|
|
<img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} />
|
|
<h3 id="title">{data.post.title}</h3>
|
|
<div class="dates">
|
|
<span class="date">Created {humanDate(new Date(+data.post.creation_date * 1000))}</span>
|
|
<span class="date">Last Modified {humanDate(new Date(+data.post.modification_date * 1000))}</span>
|
|
</div>
|
|
</header>
|
|
<div class="content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<style>
|
|
article {
|
|
margin-top: 25px;
|
|
margin-inline: auto;
|
|
max-width: 1000px;
|
|
|
|
/* background: var(--background1); */
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
#blog-cover-img {
|
|
aspect-ratio: 16 / 9;
|
|
max-width: 100%;
|
|
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
#title {
|
|
font-family: var(--title-font);
|
|
font-size: 36px;
|
|
margin: 0;
|
|
}
|
|
|
|
.dates {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.date {
|
|
color: var(--text3);
|
|
}
|
|
|
|
.body {
|
|
margin-inline: auto;
|
|
max-width: 1200px;
|
|
padding: 25px;
|
|
}
|
|
|
|
.content {
|
|
line-height: 2;
|
|
font-size: 18px;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* CSS for posts - child rooutes. */
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
:global(a) {
|
|
color: var(--text1);
|
|
text-decoration-line: underline;
|
|
}
|
|
</style>
|