Update events layout

- Add `cover_image_caption` (which uses figcaption under the hood)
- Change event details from a list to a table (more semantic and looks
  better)

_includes/events/events-list.html

@@ -72,26 +72,43 @@
 				<h3>{{ event.name }}</h3>
 
 				{% unless event.cover_image == empty %}
-					<img src="{{ event.cover_image }}" alt="{{ event.name }} event banner">
+					<figure>
+						<img src="{{ event.cover_image }}" alt="{{ event.name }} event banner">
+						<figcaption>
+							{{ event.cover_image_caption }}
+						</figcaption>
+					</figure>
 				{% endunless %}
 
 				{{ event.content }}
 
 				<h4>Event details</h4>
 
-				<ul class="event-details">
-					<li><strong>Date:</strong> {{ event.dates }}</li>
-					<li><strong>Location:</strong> {{ event.location | markdownify }}{% unless event.location_map == empty %} (<a href="{{ event.location_map }}">Show on map</a>){% endunless %}</li>
-					{% if event.entrance_fee %}
-					<li><strong>Entrance fee:</strong> {{ event.entrance_fee | markdownify }}</li>
-					{% endif %}
-					{% if event.registration %}
-					<li><strong>Registration:</strong> {{ event.registration | markdownify }}</li>
-					{% endif %}
-					{% if event.website %}
-					<li><strong>Website:</strong> <a href="{{ event.website }}">{{ event.website }}</a></li>
-					{% endif %}
-				</ul>
+				<table class="event-details">
+					<tbody>
+						<tr>
+							<th>Date:</th><td>{{ event.dates }}</td>
+						</tr>
+						<tr>
+							<th>Location:</th><td>{{ event.location | markdownify }}{% unless event.location_map == empty %} (<a href="{{ event.location_map }}">Show on map</a>){% endunless %}</td>
+						</tr>
+						{% if event.entrance_fee %}
+						<tr>
+							<th>Entrance fee:</th><td>{{ event.entrance_fee | markdownify }}</td>
+						</tr>
+						{% endif %}
+						{% if event.registration %}
+						<tr>
+							<th>Registration:</th><td>{{ event.registration | markdownify }}</td>
+						</tr>
+						{% endif %}
+						{% if event.website %}
+						<tr>
+							<th>Website:</th><td><a href="{{ event.website }}">{{ event.website }}</a></td>
+						</tr>
+						{% endif %}
+					</tbody>
+				</table>
 			</div>
 
 		{% endcapture %}

assets/css/events.css

@@ -63,6 +63,11 @@
 	max-width: 640px;
 }
 
+.events .events-fulllist .card figure img {
+	margin-bottom: 0;
+	max-width: none;
+}
+
 .events .events-fulllist .events-empty {
 	background-color: var(--background-color);
 	border: none;
@@ -72,10 +77,24 @@
 	box-shadow: none;
 }
 
-.event-details > li p {
+.event-details {
+	border-spacing: 0.25em;
+}
+
+.event-details p {
 	display: inline;
-	margin-left: 0.3em;
-	margin-right: 0.3em;
+}
+
+.event-details p::after {
+	content: " ";
+}
+
+.event-details p:last-child::after {
+	content: "";
+}
+
+.event-details tr th {
+	text-align: left;
 }
 
 @media screen and (max-width: 900px) {
@@ -93,3 +112,25 @@
 		padding-left: 2rem;
 	}
 }
+
+figure {
+	margin: 0;
+	border-radius: 4px;
+	background-color: var(--base-color);
+	margin-inline-start: auto;
+}
+
+figure figcaption {
+	padding: 1em;
+	opacity: 0.8;
+	font-size: 80%;
+	font-style: italic;
+}
+
+figure figcaption:empty {
+	display: none;
+}
+
+figure img {
+	display: block;
+}

collections/_event/gamescom-2025.md

@@ -20,11 +20,8 @@ registration: "[https://lu.ma/tpd4ks9a](https://lu.ma/tpd4ks9a) (register to rec
 entrance_fee: "Free, but a gamescom ticket is needed to access the venue"
 
 cover_image: "/storage/blog/gamescom-cologne-2025/gamescom-cover.webp"
-
+cover_image_caption: "Cover image: 2024 Koelnmesse GmbH/Marvin Ruppert"
 ---
-
-<p style="opacity: 0.7; font-style: italic;">Cover image: 2024 Koelnmesse GmbH/Marvin Ruppert</p>
-
 A small community meetup at gamescom to connect, share experiences, and discuss all things Godot. We do not have a booth, so we will meet somewhere near the IndieArenaBooth in hall 10. Details will be announced on the luma [event page](https://lu.ma/tpd4ks9a) once we know the exact place.
 
 ​​Whether you’re a seasoned developer or just exploring the engine, everyone is welcome!