frog-website/src/pages/index/games.html

62 lines
2.0 KiB
HTML

{% from "lib/section.html" import section %}
{% call section(gettext("Games"),
"games",
"/img/section-games.png",
title_picture_offset = "0px",
title_color = "var(--color-primary)"
) %}
{% for game in glob("games/*.md") | map('markdown') %}
<div class="game">
<div class="game--picture-wrapper">
<img
class="game--picture"
src="{{ game.meta.picture | load | write }}"
alt="{{ game.meta.picture_alt }}"
>
</img>
</div>
<div class="game--title">
{{ game.meta.title }}
</div>
<div class="game--description">
{{ game }}
{% if game.meta.steam_widget_url %}
<div class="game--widget">
<iframe src="{{ game.meta.steam_widget_url }}" frameborder="0" width="646" height="190"></iframe>
</div>
{% endif %}
{% if game.meta.itch_io_widget_url %}
<div class="game--widget">
<iframe frameborder="0" src="{{ game.meta.itch_io_widget_url }}" width="646" height="175"><a href="{{ game.meta.itch_io_url }}">{{ game.meta.title }} by Frog Collective</a></iframe>
</div>
{% endif %}
<div class="game--buttons">
<a class="game--steam-button" href="{{ game.meta.website }}" target="_blank">
<img class="game--link-icon" src="/img/steam-fill.svg" alt-text="{{name}}"></img>
Learn More
</a>
<a class="game--button" href="{{ game.meta.discord_url }}" target="_blank">
<img class="contact--button-icon" src="/img/discord-fill.svg"></img>
{% trans %}
Discord
{% endtrans %}
</a>
<a class="game--button" href="{{ game.meta.presskit_url }}">
<img class="contact--button-icon" src="/img/information-fill.svg"></img>
{% trans %}
Press Kit
{% endtrans %}
</a>
</div>
</div>
</div>
{% endfor %}
{% endcall %}