bandolier-website/rendered/pages/docs/howto/index.svelte

<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 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>