{% extends "base.html" %}

{% block announce %}

  {{ super() }}
  Become a
  <a href="https://github.com/sponsors/15r10nk" title="Become a sponsor">
    <span class="twemoji heart" style="color:red">
      {% include ".icons/octicons/heart-fill-16.svg" %}
    </span>
      <strong>
        Sponsor
      </strong>
  </a>
  or follow <strong> @15r10nk </strong> on
  <a href="https://x.com/15r10nk" title="follow on X">
    <span class="twemoji circle twitter">
      {% include ".icons/fontawesome/brands/x-twitter.svg" %}
    </span>
  </a> or

  <a href="https://fosstodon.org/@15r10nk" title="follow on mastodon">
    <span class="twemoji circle mastodon">
      {% include ".icons/fontawesome/brands/mastodon.svg" %}
    </span>
  </a>
  <style>
    .circle{
        box-shadow: inset 0 0 0 .05rem currentcolor;
        border-radius: 100%;
        display: inline-block;
        height: 1.2rem !important;
        padding: 0.25rem;
        transition: all .25s;
        vertical-align: bottom !important;
        width: 1.2rem !important;
    }
    :hover > .circle{
        box-shadow: inset 0 0 0 .1rem currentcolor;
        filter: blur(0.5px)
    }
    .twitter {
        color: #fff;
    }
    .mastodon{
     color: #897ff8;
    }

    @keyframes heart {
      0%, 40%, 80%, 100% {
        transform: scale(1);
      }
      20%, 60% {
        transform: scale(1.15);
      }
    }
    .heart {
      animation: heart 1000ms infinite;
    }
  </style>
  for updates
{% endblock %}