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.
 
 
 
 

85 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.load("rendered/docs");
</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="/docs/{ 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="/docs/{ post.metadata.slug }/"><Icon name="arrow-right" light={true} /></a>
</button>
</bottom>
</card>
{/each}
</posts>
</main>
</Layout>