---
layout: base
---

<article id="art">
    <h1>{{ page.fileSlug }}
        {%for flag in flags%}
            <img src="{{ flag.src }}">
            {%endfor%}
        </h1>
        {{ content|safe }}
        {%if programs and programs|length > 0%}
            <p>Made with:</p>
            <ul>
                {%for program in programs%}
                    <li>
                        {{ program.name|link(program.src)|safe }}
                    </li>
                {%endfor%}
            </ul>
        {%endif%}
        {%if palettes and palettes|length > 0%}
            <p>Color palette used:</p>
            {%for palette in palettes%}
                <ul>
                    <li>
                        {%if palette.src%}
                            {{ palette.name|link(palette.src)|safe }}
                        {%endif%}
                    </li>
                </ul>
            {%endfor%}
        </ul>
    {%endif%}
    <section>
        {%for image in images%}
            <a href="{{ image.src }}">
                <figure>
                    <img src="{{ image.src }}" alt="" {%if image.pixel%} style="image-rendering: pixelated" {%endif%}>
                        <figcaption>{{ image.alt }}</figcaption>
                        <time datetime="{{ image.date|ISO }}">{{ image.date|readable }}</time>
                    </figure>
                </a>
            {%endfor%}
        </section>
        {%for attachment in attachments%}
            <section class="attachment">
                <a href="{{ attachment.src }}">
                    <figure>
                        <img src="{{ attachment.src }}">
                            <figcaption>{{ attachment.alt }}</figcaption>
                        </figure>
                    </a>
                </section>
            {%endfor%}
        </article>