From 6e74178ca0a6e5a77644a390ba0b43c9d35fe001 Mon Sep 17 00:00:00 2001
From: Yuri Sizov <yuris@humnom.net>
Date: Mon, 16 Oct 2023 16:45:22 +0200
Subject: [PATCH] Improve the look of download archive pages

---
 _includes/download/version-card.html | 41 +++++++++++++++-------
 _layouts/download-archive.html       | 11 +++++-
 assets/css/download-version.css      | 51 +++++++++++++++++++++-------
 3 files changed, 78 insertions(+), 25 deletions(-)

diff --git a/_includes/download/version-card.html b/_includes/download/version-card.html
index 3fe976a7fe..15bb14f8ee 100644
--- a/_includes/download/version-card.html
+++ b/_includes/download/version-card.html
@@ -5,14 +5,14 @@ <h3 id="{{ release_version.name }}-{{ release_version.flavor }}">
 		Godot {{ release_version.name }}-{{ release_version.flavor }}
 	</h3>
 
-	<p class="preview-download-meta">
-		{% unless release_version.release_date == empty %}
-			<span>{{ release_version.release_date }}</span>
-		{% endunless %}
-	</p>
-
 	<div class="preview-download-primary">
 		<div class="preview-notes">
+			<p class="preview-download-meta">
+				{% unless release_version.release_date == empty %}
+					<span>{{ release_version.release_date }}</span>
+				{% endunless %}
+			</p>
+
 			{% unless release_version.release_notes == empty %}
 				{% assign release_article = site.article | find: "url", release_version.release_notes %}
 
@@ -34,17 +34,19 @@ <h3 id="{{ release_version.name }}-{{ release_version.flavor }}">
 				{% 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 }}">Read more</a>
+						<a class="btn btn-release-notes" href="{{ release_article.url }}" title="Read full release announcement">Read more</a>
 					{% endunless %}
 				{% endunless %}
 
-				<a class="btn btn-release-changelog" href="https://godotengine.github.io/godot-interactive-changelog/#{{ release_version.name }}-{{ release_version.flavor }}">View complete changelog</a>
+				<a class="btn btn-release-changelog" href="https://godotengine.github.io/godot-interactive-changelog/#{{ release_version.name }}-{{ release_version.flavor }}" title="View complete changelog">View changelog</a>
 			</div>
 
 		</div>
 
 		<div>
-			<h4>Main downloads</h4>
+			<h4>Supported platforms</h4>
+			{% assign has_mono = false %}
+
 			<div class="download-primaries">
 				{% assign download_primary = release_version | get_download_primary: false %}
 				{% for primary in download_primary %}
@@ -54,10 +56,18 @@ <h4>Main downloads</h4>
 					{% endcomment %}
 					{% assign platform_info = site.data.download_platforms | find: "name", primary[1] %}
 
+					{% if primary[1] == "templates" %}
+						<hr>
+					{% endif %}
+
+					<div class="download-platform">
+						<img width="24" height="24" src="/assets/images/platforms/{{ primary[0] | split: "_" | join: "-" }}.svg" title="{{ platform_info.title }}" alt="{{ platform_info.title }}" class="dark-invert" />
+						{{ platform_info.title }}
+					</div>
+
 					<a href="{{ release_version | make_download: primary[1], false, "github_builds" }}" class="btn btn-download btn-download-primary">
 						<div class="download-title">
-							<img width="24" height="24" src="/assets/images/platforms/{{ primary[0] | split: "_" | join: "-" }}.svg" title="{{ platform_info.title }}" alt="{{ platform_info.title }}" />
-							{{ platform_info.title }}
+							Standard
 						</div>
 					</a>
 
@@ -65,13 +75,20 @@ <h4>Main downloads</h4>
 					{% if mono_download == "#" %}
 						<div></div>
 					{% else %}
-						<a href="{{ mono_download }}" class="btn btn-download btn-download-primary">
+						{% assign has_mono = true %}
+						<a href="{{ mono_download }}" class="btn btn-download btn-download-primary btn-download-primary--mono">
 							<div class="download-title">
 								.NET
 							</div>
 						</a>
 					{% endif %}
 				{% endfor %}
+
+				{% if has_mono %}
+					<div class="download-mono-note">
+						.NET builds offer support for C# as a scripting language.
+					</div>
+				{% endif %}
 			</div>
 		</div>
 	</div>
diff --git a/_layouts/download-archive.html b/_layouts/download-archive.html
index e3cb20027d..df4766848e 100644
--- a/_layouts/download-archive.html
+++ b/_layouts/download-archive.html
@@ -20,6 +20,15 @@
 		color: var(--base-color-text);
 	}
 
+	.hero-version-flavor {
+		background-color: var(--primary-color);
+		border-radius: 1000px;
+		color: var(--dark-color-text-title);
+		font-size: 90%;
+		font-weight: 600;
+		padding: 0.35rem 1.25rem;
+	}
+
 	.other-platforms-wrapper {
 		color: var(--base-color-text);
 	}
@@ -37,7 +46,7 @@
 
 <div class="hero">
 	<div class="hero-wrapper">
-		<h1>Download<br>Godot {{ page.version_name }} ({{ page.version_flavor }})</h1>
+		<h1>Download<br>Godot {{ page.version_name }} <span class="hero-version-flavor">{{ page.version_flavor }}</span></h1>
 	</div>
 
 	<div class="other-platforms">
diff --git a/assets/css/download-version.css b/assets/css/download-version.css
index b061f0b566..1e8119f67f 100644
--- a/assets/css/download-version.css
+++ b/assets/css/download-version.css
@@ -16,7 +16,6 @@
 	display: grid;
 	grid-template-columns: 3fr 2fr;
 	gap: 60px;
-	margin-top: 20px;
 }
 @media (max-width: 900px) {
 	.preview-download-primary {
@@ -25,6 +24,10 @@
 	}
 }
 
+.preview-download-primary h4 {
+	margin-bottom: 16px;
+}
+
 .preview-notes {
 	display: flex;
 	flex-direction: column;
@@ -32,13 +35,14 @@
 	gap: 16px;
 }
 
-.notes-summary {
+.preview-notes .notes-summary {
 	display: grid;
 	gap: 24px;
 	width: 100%;
+	margin-top: 4px;
 }
 
-.notes-thumbnail {
+.preview-notes .notes-thumbnail {
 	background-position: center;
 	background-size: cover;
 	background-color: var(--card-background-color);
@@ -48,19 +52,19 @@
 	max-height: 260px;
 }
 
-.notes-excerpt {
+.preview-notes .notes-excerpt {
 	color: var(--base-color-text);
 	opacity: 0.8;
 }
 
-.notes-buttons {
+.preview-notes .notes-buttons {
 	display: flex;
 	align-items: center;
 	gap: 42px;
 	min-height: 54px;
 }
 @media (max-width: 768px) {
-	.notes-buttons {
+	.preview-notes .notes-buttons {
 		flex-direction: column;
 		gap: 36px;
 		width: 100%;
@@ -81,24 +85,31 @@
 
 .download-primaries {
 	display: grid;
-	grid-template-columns: 2fr 1fr;
+	grid-template-columns: 2fr 1fr 1fr;
 	gap: 8px;
 }
 
+.download-primaries .download-platform {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	font-weight: 700;
+}
+
 .download-primaries .btn-download-primary {
 	margin-bottom: 0;
 	text-align: left;
 }
 
-.download-primaries .btn-download-primary:nth-child(2n) {
+.download-primaries .btn-download-primary.btn-download-primary--mono {
 	background-color: rgb(132 151 174 / 68%);
 	-webkit-backdrop-filter: blur(4px);
 	backdrop-filter: blur(4px);
 }
-.download-primaries .btn-download-primary:nth-child(2n) .download-title {
+.download-primaries .btn-download-primary.btn-download-primary--mono .download-title {
 	color: #f7f7f7;
 }
-.download-primaries .btn-download-primary:nth-child(2n) .download-hint {
+.download-primaries .btn-download-primary.btn-download-primary--mono .download-hint {
 	background-color: var(--primary-color-subdued);
 	color: var(--text-color);
 }
@@ -106,14 +117,30 @@
 .download-primaries .btn.btn-download-primary .download-title {
 	font-size: 18px;
 	line-height: 24px;
+	padding: 10px 16px;
 	white-space: nowrap;
 }
 @media (max-width: 900px) {
 	.download-primaries .btn.btn-download-primary .download-title {
 		line-height: 28px;
+		padding: 12px 20px;
 	}
 }
 
+.download-primaries .download-mono-note {
+	grid-column: span 3;
+	color: var(--base-color-text);
+	font-size: 95%;
+	opacity: 0.64;
+	padding-top: 8px;
+}
+
+.download-primaries hr {
+	grid-column: span 3;
+	border-color: var(--button-card-background-color);
+	width: 100%;
+}
+
 .preview-download-toggle {
 	display: flex;
 	justify-content: flex-end;
@@ -159,7 +186,7 @@
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	align-items: flex-end;
-	gap: 6px;
+	gap: 16px;
 	border-bottom: 1px dashed var(--table-divider-color);
 	margin-bottom: 8px;
 	padding: 2px 0;
@@ -167,11 +194,11 @@
 @media (max-width: 900px) {
 	.preview-download-links .download {
 		grid-template-columns: 1fr;
+		gap: 8px;
 	}
 }
 
 .preview-download-links .download-details {
 	color: var(--secondary-color-text);
 	font-size: 14px;
-	padding: 0 12px;
 }