---
---

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{{ page.name }}</title>
        <link rel="icon" href="{{ page.icon }}"/>

        <meta name="HandheldFriendly" content="true" />
        <meta name="MobileOptimized" content="320" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />

        <link rel="stylesheet" type="text/css" href="/css/style.css"/>
        <link rel="stylesheet" type="text/css" href="/css/contribution-chart.css"/>
        <link rel="stylesheet" type="text/css" href="/css/carousel.css"/>
        <link rel="stylesheet" type="text/css" href="/css/product.css"/>
        <link rel="stylesheet" type="text/css" href="/css/syntax.css" />

        <style>

            #banner-background {
                background-image: url("{{ page.banner }}");
            }

            #banner-container #icon {
                background-image: url("{{ page.icon }}");
            }

        </style>

        <script type="text/javascript" src="/assets/js/products-carousel.js" defer></script>
        <script type="text/javascript" src="/assets/js/return-home-button.js" defer></script>
    </head>
    <body data-from-github="{{ page.from_github }}">

        <div id="meaningful-part" class="horizontally-centered top-level-card">

            <div id="banner-container" class="container rounded-shadow animated-enter">

                <div id="banner-background-wrapper">
                    <div id="banner-background"></div>
                    <div id="banner-dimmer"></div>
                </div>

                <div id="header-content">

                    <div id="icon"></div>

                    <div id="group-divider"></div>

                    <div class="group" id="group-right">

                        <div id="name">{{ page.name }}</div>
                        <div id="description">{{ page.description }}</div>

                        <div id="sources" class="no-url-highlighting">
                            {% assign source_index = 0 %}
                            {% for source in page.sources %}
                                {% assign splitted_source = source |  split: " | " %}
                                {% assign type = splitted_source.first | strip %}
                                {% assign slugged_name = type | downcase | slugify: "pretty" %}
                                <a class="source-badge"
                                   data-type="{{ slugged_name }}"
                                   style="animation-delay: {{ source_index }}s;"
                                   href="{{ splitted_source[1] }}"
                                   target="_blank"
                                   rel="noreferrer noopener"
                                >
                                    <img src="{{ "/assets/icon-" |  append: slugged_name |  append: ".png" }}"
                                         alt="{{ slugged_name }}"
                                    />
                                    <div class="source-name">
                                        {% if slugged_name == "google-play" %}
                                            Google Play
                                        {% elsif slugged_name == "documentation" %}
                                            Read
                                        {% elsif slugged_name == "itch" %}
                                            itch.io
                                        {% elsif slugged_name == "github" %}
                                            GitHub
                                        {% elsif slugged_name == "download" %}
                                            Download
                                        {% endif %}
                                    </div>
                                </a>
                                {% assign source_index = source_index | plus: 0.1 %}
                            {% endfor %}
                        </div>

                    </div>

                </div>
            </div>

            <div class="content markdown">
                {{ page.content | markdownify }}
            </div>

        </div>

        <products-carousel></products-carousel>

        <div id="floating-action-button" class="no-url-highlighting">
            <a id="button-home" href="/index.html">
                <img id="icon-outlined" src="/assets/icon-home.png" alt="Home Icon"/>
                <img id="icon-filled" src="/assets/icon-home-filled.png" alt="Filled Home Icon"/>
                <span>Home</span>
            </a>
            <a id="copyright-notice">© 2023 Smooth-E</a>
        </div>

    </body>
</html>
