<script>
  import git from '$lib/assets/git-branch-fill.svg';
</script>

<div class="footer">
    <div>
        <span>Made with &#x1F918; by&nbsp;</span>
        <a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a>
    </div>
    |
    <div>
        <a href="https://phlaym.net/git/phlaym/moshing-mammut">
            <img alt="Git branch" src={git} class="icon" />
            Source Code&nbsp;
        </a>
    </div>
</div>

<style>
  .footer {
    position: sticky;
    bottom: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: #bbbbcd73;
    padding: 0.3em 1em;
    margin: 0 -8px;
    border-radius: 3px;
  }
  .icon {
    position: relative;
    top: 0.25em;
    color: white;
    height: 1em;
  }
  @media (prefers-color-scheme: dark) {
    .icon {
      filter: invert();
    }
    .footer {
      background-color: #6364FF88;
    }
  }
</style>