Klemens Schölhorn
8f004e5e65
This config file will be loaded together with the images and defines the passwords for login and some other parameters.
66 lines
1.4 KiB
HTML
66 lines
1.4 KiB
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 %}
|