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.
 
 
 
 

70 lines
1.5 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/howto").reverse();
</script>
<style>
main h2 {
text-align: center;
}
main {
font-size: 1.3em;
padding: 3rem;
}
tile left {
width: 200px;
min-width: 200px;
max-width: 200px;
}
posts {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: auto;
grid-gap: 1rem;
}
@media only screen and (max-width: 800px) {
main {
font-size: 1.3em;
padding: 1rem;
}
}
</style>
<Layout bare={ true }>
<main>
<callout class="warning">
<span>These recipes are only stubs at the moment. I'll be writing them mostly in order as I test out the rest of the documentation.</span>
</callout>
<posts>
{#each posts as post}
<tile>
<left>
<a href="/docs/howto/{ post.metadata.slug }/">
<IconImage width="100%" height="100%" name={ post.metadata.icon } pattern={ false }/>
</a>
</left>
<middle>
<h4>
<a href="/docs/howto/{ post.metadata.slug }/">
{post.metadata.title}
</a>
</h4>
<p>{ post.metadata.summary }</p>
</middle>
<right>
<a href="/docs/howto/{ post.metadata.slug }/"><Icon name="arrow-right" /></a>
</right>
</tile>
{/each}
</posts>
</main>
</Layout>