You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.6 KiB
88 lines
1.6 KiB
<script>
|
|
import Layout from '$/rendered/Layout.svelte';
|
|
import IconImage from '$/client/components/IconImage.svelte';
|
|
import Icon from '$/client/components/Icon.svelte';
|
|
import markdown from "$/lib/blog.js";
|
|
|
|
const posts = markdown.index("rendered/posts");
|
|
|
|
|
|
markdown.render_feed("./feed_index.json", posts);
|
|
</script>
|
|
|
|
|
|
<style>
|
|
main h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
main {
|
|
font-size: 1.3em;
|
|
padding: 3rem;
|
|
}
|
|
|
|
posts card middle {
|
|
height: 100%;
|
|
}
|
|
|
|
posts card bottom {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
min-height: min-content;
|
|
}
|
|
|
|
posts {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-gap: 1rem;
|
|
}
|
|
|
|
@media only screen and (min-width: 1600px) {
|
|
posts {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1100px) {
|
|
posts {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
posts {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
|
|
main {
|
|
font-size: 1.3em;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<Layout bare={ true }>
|
|
<main>
|
|
<posts>
|
|
{#each posts as post}
|
|
<card>
|
|
<top>
|
|
<a href="/blog/{ post.metadata.slug }/">
|
|
<IconImage name={ post.metadata.icon } pattern={ false }/>
|
|
</a>
|
|
</top>
|
|
<middle>
|
|
<h4>{post.metadata.title}</h4>
|
|
<p>{ post.metadata.summary }</p>
|
|
</middle>
|
|
<bottom>
|
|
<button>
|
|
<a href="/blog/{ post.metadata.slug }/"><Icon name="arrow-right" light={true} /></a>
|
|
</button>
|
|
</bottom>
|
|
</card>
|
|
{/each}
|
|
</posts>
|
|
</main>
|
|
</Layout>
|
|
|