image-gallery/templates/index.html

53 lines
1.1 KiB
HTML

{% extends "base" %}
{% block head %}
{{super()}}
<style>
body {
padding: 0.7rem;
margin: 0;
}
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 %}
<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.name}}" alt="YOU SHALL NOT SAVE THIS IMAGE!" />
</div>
{% endfor %}
</main>
{% endblock main %}