"woof" > "map" :)

main
furo 2023-08-09 17:58:55 +02:00
parent 0529faf9bf
commit 23bfd45d52
2 changed files with 9 additions and 8 deletions

View File

@ -68,16 +68,16 @@ span.incorrect {
color: #E04F53; color: #E04F53;
} }
.woof { .map {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.woof > img { .map > img {
width: 100%; width: 100%;
} }
.woof > p { .map > p {
position: absolute; position: absolute;
bottom: 1rem; bottom: 1rem;
user-select: none; user-select: none;

View File

@ -4,14 +4,15 @@
<header> <header>
<h1>Which map is this image from?</h1> <h1>Which map is this image from?</h1>
</header> </header>
{% if guess %} <div class="map">
<div class="woof"> {% if guess %}
<img src="/static/location-data/{{ location.id }}.png" class="map" loading="lazy"> <img src="/static/location-data/{{ location.id }}.png" class="map" loading="lazy">
<p class="guess">Your guess {{ guess.map }} is <span class="{{ guess.result }}">{{ guess.result }}</span>!</p> <p class="guess">Your guess {{ guess.map }} is <span class="{{ guess.result }}">{{ guess.result }}</span>!</p>
{% else %}
<img src="/static/location-data/{{ location.id }}.png" class="map" loading="lazy">
{% endif %}
</div> </div>
{% else %}
<img src="/static/location-data/{{ location.id }}.png" class="map" loading="lazy">
{% endif %}
<form action="/location/{{ location.id }}" method="get"> <form action="/location/{{ location.id }}" method="get">
<label for="guess">Enter map to guess for:</label> <label for="guess">Enter map to guess for:</label>
<input type="text" name="guess" id="guess" list="map-names" autofocus> <input type="text" name="guess" id="guess" list="map-names" autofocus>