Improve the looks of the download archive listing

_includes/download/archive-list-item.html

@@ -0,0 +1,30 @@
+<div class="archive-list-item">
+	{% assign release_version = include.version | make_release_version: include.release %}
+
+	<div class="archive-release">
+		<a class="archive-version" href="/download/archive/{{ release_version.name }}-{{ release_version.flavor }}" title="Open downloads page">
+			<h4 id="{{ release_version.name }}-{{ release_version.flavor }}">
+				{{ release_version.name }}-{{ release_version.flavor }}
+			</h4>
+
+			<p class="archive-download-meta">
+				{% unless release_version.release_date == empty %}
+					<span>{{ release_version.release_date }}</span>
+				{% endunless %}
+			</p>
+		</a>
+	</div>
+
+	<a class="btn btn-release-download" href="/download/archive/{{ release_version.name }}-{{ release_version.flavor }}">Download</a>
+
+	{% unless release_version.release_notes == empty %}
+		{% assign release_article = site.article | find: "url", release_version.release_notes %}
+
+		{% unless release_article == empty %}
+			<a class="btn btn-release-notes" href="{{ release_article.url }}" title="Read release announcement">News</a>
+		{% endunless %}
+	{% endunless %}
+
+	<a class="btn btn-release-changelog" href="https://godotengine.github.io/godot-interactive-changelog/#{{ release_version.name }}-{{ release_version.flavor }}" title="View complete changelog">Changelog</a>
+
+</div>

_includes/events-list.html → _includes/events/events-list.html

@@ -29,7 +29,7 @@
 			Print the currently tracked year.
 			{% endcomment %}
 
-			{% include events-year.html year=year shortlist=shortlist fulllist=fulllist %}
+			{% include events/events-year.html year=year shortlist=shortlist fulllist=fulllist %}
 
 			{% comment %}
 			Reset the tracking variables and set the currently tracked year.
@@ -97,7 +97,7 @@ <h4>Event details</h4>
 	{% endcomment %}
 
 	{% if year != "" %}
-		{% include events-year.html year=year shortlist=shortlist fulllist=fulllist %}
+		{% include events/events-year.html year=year shortlist=shortlist fulllist=fulllist %}
 	{% endif %}
 
 </section>

_layouts/download-archive.html

@@ -9,6 +9,7 @@
 <style>
 	.hero {
 		background-image: none;
+		padding-top: 54px;
 	}
 	.hero h1 {
 		text-shadow: none;
@@ -50,7 +51,7 @@ <h1>Download<br>Godot {{ page.version_name }} ({{ page.version_flavor }})</h1>
 	<div class="padded" style="padding-top:0;margin-top:32px">
 		<div class="preview-cards">
 
-			{% include download-version.html version=page.version %}
+			{% include download/version-card.html version=page.version %}
 
 		</div>
 	</div>

assets/css/download-archive.css

@@ -0,0 +1,144 @@
+/* Sticky grid list */
+
+.archive-list {
+	display: grid;
+	grid-template-columns: 260px 1fr;
+	row-gap: 3em;
+}
+
+.archive-list .archive-group {
+	padding-right: 16px;
+	width: 240px;
+}
+
+.archive-list .archive-group>div {
+	position: sticky;
+	top: 24px;
+}
+
+.archive-list .archive-group h3 {
+	margin-bottom: 8px;
+}
+
+.archive-list .archive-group span {
+	opacity: 0.64;
+}
+
+.archive-list .archive-group .archive-version-flavor {
+	background-color: var(--button-background-color);
+	border-radius: 1000px;
+	color: var(--base-color-text-subtitle);
+	font-size: 90%;
+	font-weight: 600;
+	opacity: 1;
+	padding: 2px 12px;
+}
+
+.archive-list .archive-releases {
+	border-radius: 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.archive-list .archive-releases hr {
+	border-color: var(--button-card-background-color);
+	width: 100%;
+}
+
+@media screen and (max-width: 1024px) {
+	.archive-list {
+		display: grid;
+		grid-template-columns: 1fr;
+		row-gap: 2em;
+	}
+
+	.archive-list .archive-group>div {
+		position: static;
+	}
+
+	.archive-list .archive-releases {
+		gap: 30px;
+	}
+}
+
+/* Archive version item */
+
+.archive-list-item {
+	display: grid;
+	grid-template-columns: 1fr 200px 140px 160px;
+	align-items: center;
+	gap: 12px;
+	transition: 0.1s filter;
+	filter: brightness(95%);
+}
+.archive-list-item:hover {
+	filter: brightness(110%);
+}
+
+.archive-list-item .archive-version {
+	display: inline-block;
+	text-decoration: none;
+}
+
+.archive-list-item .archive-version h4 {
+	color: inherit;
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+
+.archive-list-item .archive-download-meta {
+	color: var(--secondary-color-text);
+	font-size: 90%;
+	margin: 0;
+}
+
+.archive-list-item .btn.btn-release-download {
+	background-color: var(--button-card-background-color);
+	color: var(--base-color-text);
+	padding: 10px 12px;
+	text-align: center;
+}
+
+.archive-list-item .btn.btn-release-notes, .btn.btn-release-changelog {
+	background: var(--button-background-color);
+	box-shadow: none;
+	color: var(--link-color);
+	padding: 10px 12px;
+	text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+	.archive-list-item {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 24px;
+	}
+
+	.archive-list-item + .archive-list-item {
+		border-top: 2px solid var(--background-color);
+		padding-top: 24px;
+	}
+
+	.archive-list-item .archive-release {
+		grid-column: span 2;
+	}
+
+	.archive-list-item .archive-version {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+	}
+
+	.archive-list-item .archive-version h4 {
+		font-size: 26px;
+	}
+
+	.archive-list-item .archive-download-meta {
+		font-size: 100%;
+	}
+
+	.archive-list-item .btn.btn-release-download {
+		grid-column: span 2;
+	}
+}