bandolier-website/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;
  }

  #logo {
    font-size: 1.5em;
    font-family: computer;
    color: var(--value9);
  }

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

<footer>
  <column>
  <a id="logo" href="/">The Bandolier</a>

  <p>
    The Bandolier project. An educational fullstack web framework in JavaScript.
  </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>DOCS</h5>

  <ol>
    <li><a href="/client/#/quick/">QUICK START</a></li>
    <li><a href="/client/#/long/">LONG START</a></li>
    <li><a href="/client/#/docs/">API DOCS</a></li>
  </ol>
  </column>

  <column>
  <h5>RESOURCES</h5>

  <ol>
    <li><a href="/client/#/tips-tricks/">TIPS & TRICKS</a></li>
    <li><a href="/client/#/bando/components/">DEMOS</a></li>
    <li><a href="/docs/howto/">HOWTO RECIPES</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>