{% macro i88x31(link) %}
  <img class="i88x31" src="/static/images/88x31/{{ link }}" data-tip="<b>{{ i18n[langKey].i88x31hover }}</b> ({{ link }})">
{% endmacro %}

{% macro videoCard(videoLink, videoTitle, videoImage, videoWebsite, videoDuration, videoAccent) %}
<div class="youtubeCardHolderHelper">
<div class="youtubeCardHolder">
<a href="{{ videoLink }}">
    <div class="blogpostYoutubeVideo" {% if videoAccent %}style="border-color: {{ videoAccent }};"{% endif %}>
        <img src="/static/images{{ videoImage }}">
        <div class="videoHeader">
            <!-- <p class="alsoAvailable">{{ i18n[langKey].alsoAvailableAsVideo }}:</p> -->
            <h2 class="videoTitle" {% if videoAccent %}style="color: {{ videoAccent }};"{% endif %}>{{ videoTitle }}</h2>
            <p>{{ videoWebsite }}{% if videoDuration %} ({{ videoDuration }}){% endif %}</p>
        </div>
        <!-- <p class="goLabel">ir</p> -->
    </div>
</a>
</div>
</div>
{% endmacro %}

{% macro projectCard(projectName, projectDescription, projectLink, projectImage, projectImageAlt) %}
<div class="hsProject">
    <div class="hsProjectHeader">
        <div class="hsProjectImage"><img src="{{ projectImage }}" alt="{{ projectImageAlt or projectName }}"></div>
        <a href="{{ projectLink }}" class="hsProjectHeaderIcon">
            <img src="/static/visual/github.svg" class="invertedc">
        </a>
    </div>
    <div class="hsProjectContent">
        <p>{{ projectDescription }}</p>
    </div>
</div>
{% endmacro %}