---
import Icon from 'astro-iconify'
import {VERSION} from '../consts';
---

<footer>
  <section>
    Remove distractions. Save for later.
  </section>


  <section class="attribution">
    <a href="/blog/building-a-cozy-web/">Hand-crafted</a> with <Icon name="line-md:heart" /> by <a href="https://ayo.ayco.io">Ayo Ayco</a>
    <br />
    <a href="/blog">Blog</a> •
    <a href="https://github.com/ayoayco/cozy">GitHub</a> •
    <a href="https://social.ayco.io/@ayo">Mastodon</a>
    <br />
    {VERSION}
  </section>

  <section class="disclaimer">All rights reserved to content owners.</section>
</footer>

<style lang="scss">
  footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #333;
    display: flex;
    font-size: small;

    svg {
      width: 1.25rem;
      height: 1.25rem;
      vertical-align: bottom;
      display: inline;
      border: 0px;
      color: red;
    }

    section {
      flex: 1;
      padding: 1rem 1rem 0;

      &.attribution {
        flex: 2;
      }
    }
  }

  @media (max-width: 600px) {
    footer {
      flex-direction: column;
      max-width: 350px;
    }
  }
</style>