bandolier-template/commands/templates/rendered/Footer.svelte

<script>
  import markdown from "$/lib/blog.js";

  const posts = markdown.load("rendered/posts");
</script>

<style>
  footer {
    display: flex;
    min-height: 400px;
    color: var(--value9);
    background-color: var(--value2);
    padding: 1rem;
  }

  footer a {
    color: var(--value9);
  }

  footer > column {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  footer > column h5 {
    margin: 0px;
  }

  @media only screen and (max-width: 700px) {
    footer {
      flex-direction: column;
    }
  }
</style>

<footer>
  <column>
  <a id="logo" style="color: var(--value9);" href="/blockstart/demos/">LJSTHW</a>

  <p>
    Learn JavaScript the Hard Way, a
    complete course in full stack web
    development.
  </p>

  <span><a href="https://twitter.com/lzsthw">follow me @lzsthw</a></span>

  <p>Copyright &copy; 2020-2022. Zed A. Shaw. All Rights Reserved.</p>
  </column>

  <column>
  <h5>COMPANY</h5>

  <ol>
    <li><a href="/curriculum/">PRODUCT</a></li>
    <li><a href="/#pricing">PRICING</a></li>
    <li><a href="/client/#/login/">LOGIN</a></li>
    <li><a href="mailto:help@learnjsthehardway.com">help@learnjsthehardway.com</a></li>
  </ol>
  </column>

  <column>
  <h5>RESOURCES</h5>

  <ol>
    <li><a href="/client/#/live/">LIVE STREAMS</a></li>
    <li><a href="/curriculum/">CURRICULUM</a></li>
    <li><a href="/blog/">BLOG</a></li>
  </ol>

  </column>

  <column>
  <h5>RECENT POSTS</h5>

  <ol>
    {#each posts.slice(0, 10) as post}
      <li><a href="/blog/{post.metadata.slug}/">{post.metadata.title}</a></li>
    {/each}
  </ol>

  </column>
</footer>