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

<div class="footer">
  <div>
    <span class="label"
      >Made<span class="secretIngredient">&nbsp;with &#x1F918;</span>&nbsp;by&nbsp;</span
    >
    <a href="https://metalhead.club/@aymm" rel="me"
      >@aymm<span class="mastodonInstance">@metalhead.club</span></a
    >
  </div>
  |
  <div>
    <a href="https://phlaym.net/git/phlaym/moshing-mammut">
      <img alt="Git branch" src={git} class="icon" />
      <span class="label">Source Code</span>
    </a>
  </div>
  |
  <div>
    <a href="/feed.xml">
      <img alt="RSS" src={rss} class="icon" />
      <span class="label">RSS<span class="feedSuffix">&nbsp;Feed</span></span>
    </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: var(--color-grey-translucent);
    padding: 0.3em 1em;
    margin: 0 -8px;
    border-radius: 3px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .icon {
    position: relative;
    top: 0.25em;
    color: white;
    height: 1em;
  }
  @media (prefers-color-scheme: dark) {
    .icon {
      filter: invert();
    }
    .footer {
      background-color: var(--color-grey-translucent);
    }
  }
  @media only screen and (max-device-width: 620px) {
    .mastodonInstance,
    .feedSuffix {
      display: none;
    }
    .footer {
      justify-content: center;
    }
  }

  @media only screen and (max-device-width: 430px) {
    .mastodonInstance,
    .feedSuffix,
    .secretIngredient {
      display: none;
    }
  }

  @media only screen and (max-device-width: 370px) {
    .label {
      display: none;
    }
  }
</style>
