godotengine/godot-website
1
0
Fork 0
mirror of https://github.com/godotengine/godot-website.git synced 2025-12-31 09:48:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve the look of download archive pages

Browse Source
This commit is contained in:
Yuri Sizov
2023-10-16 16:45:22 +02:00
parent 4a47e4b3bb
commit 6e74178ca0
3 changed files with 78 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
_includes/download/version-card.html
View File

@@ -5,14 +5,14 @@
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 @@
{% 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 @@
{% 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 @@
{% 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>

11
_layouts/download-archive.html
View File

@@ -20,6 +20,15 @@ layout: default
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 @@ layout: default
<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">

51
assets/css/download-version.css
View File

@@ -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;
}