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

<script>
  const posts = [];
  import { support_email } from "$/client/config.js";
</script>

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

  footer a {
    color: var(--color-text-header);
  }

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

  footer > column h5 {
    margin: 0px;
  }

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

<footer>
  <column>
  <a id="logo" href="/">LCTHW</a>

  <p>
    BIG CO, 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="/">PRODUCT</a></li>
    <li><a href="/#pricing">PRICING</a></li>
    <li><a href="/client/#/login/">LOGIN</a></li>
    <li><a href="mailto:{ support_email }">{ support_email }</a></li>
  </ol>
  </column>

  <column>
  <h5>RESOURCES</h5>

  <ol>
    <li><a href="/client/#/live/">LIVE STREAMS</a></li>
    <li><a href="/">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>