image-gallery/templates/index.html

{% extends "base" %}

{% block head %}
    {{super()}}
    <style>
    body {
        padding: 0.7rem;
        margin: 0;
    }
    header {
        font-size: 1.3rem;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: #ebff7a;
        border: 3px solid #b0cf00;
        border-radius: 1rem;
    }
    main {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin: 0;
        gap: 0.7rem;
    }
    main > div {
        position: relative;
        pointer-events: none;
        min-height: 150px;
    }
    @media (min-width:60rem) {
        main > div {
            min-height: 250px;
        }
    }
    @media (min-width:100rem) {
        main > div {
            min-height: 350px;
        }
    }
    main::after {
        content: '';
        flex-grow: 70;
    }
    main > div > img {
        position: absolute;
        top: 0;
        height: 100%;
    }
    </style>
{% endblock head %}

{% block main %}
    {% if top_message %}
    <header>
        {{top_message}}
    </header>
    {% endif %}
    <main>
    {% for image in images %}
        <div style="aspect-ratio: {{image.width}} / {{image.height}}; flex-grow: {{10*image.width/image.height}};">
        <img loading="lazy" src="/image/{{image.encrypted_name}}" alt="Could not load image" />
        </div>
    {% endfor %}
    </main>
{% endblock main %}