{%- extends "base.html" -%}
{%- block title -%} About author {%- endblock -%}


{%- block head -%}
<style>
    #avatar {
        width: 12rem;
        max-width: 100%;
        border-radius: 10%;
    }

    .legend {
        padding: 0.5rem;
        align-self: flex-start;
    }

    .line-block {
        align-self: center;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 2rem;
    }

    .tg-icon {
        mask-image: url(/raw/content/about/tg_logo.svg);
        -webkit-mask-image: url(/raw/content/about/tg_logo.svg);
    }
</style>
{%- endblock -%}


{%- macro svg_icon_button(icon, name, link) -%}
<a href="{{ link }}" class="button">
    <span class="svg-icon {{ icon }}-icon"></span>
    {{ name }}
</a>
{%- endmacro -%}


{%- block content -%}

<div class="line-block">
    <img id="avatar" src="/raw/content/about/avatar.svg">

    <div class="legend">
        <code><h2>sliva0</h2></code>
        {{ svg_icon_button("tg", "Channel about my projects", "https://t.me/s0untitled") }}
        {{ svg_icon_button("tg", "Feedback", "https://t.me/sliva0") }}
        {{ svg_icon_button("github", "Github", "https://github.com/sliva0") }}
    </div>
</div>

{%- endblock -%}