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

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

  <section class="attribution">
    <a href="/blog/01-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://ayco.io/sh/cozy">SourceHut</a> •
    <a href="https://social.ayco.io/@ayo">Mastodon</a>
    <br />
    <span>{VERSION}</span>
  </section>

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

<style>
  footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: rgb(var(--gray));
    display: flex;
    font-size: small;

    & a {
      color: rgb(var(--gray));
    }

    & a:hover {
      color: var(--accent);
    }

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