Skip to content

Commit

Permalink
Improve the look of download archive pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@YuriSizov
YuriSizov committed Oct 16, 2023
1 parent 4a47e4b commit 6e74178
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 25 deletions.
41 changes: 29 additions & 12 deletions _includes/download/version-card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand All @@ -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 %}
Expand All @@ -54,24 +56,39 @@ <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>

{% assign mono_download = release_version | make_download: primary[1], true, "github_builds" %}
{% 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>
Expand Down
11 changes: 10 additions & 1 deletion _layouts/download-archive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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">
Expand Down
51 changes: 39 additions & 12 deletions assets/css/download-version.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
display: grid;
grid-template-columns: 3fr 2fr;
gap: 60px;
margin-top: 20px;
}
@media (max-width: 900px) {
.preview-download-primary {
Expand All @@ -25,20 +24,25 @@
}
}

.preview-download-primary h4 {
margin-bottom: 16px;
}

.preview-notes {
display: flex;
flex-direction: column;
align-items: flex-start;
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);
Expand All @@ -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%;
Expand All @@ -81,39 +85,62 @@

.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);
}

.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;
Expand Down Expand Up @@ -159,19 +186,19 @@
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;
}
@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;
}

0 comments on commit 6e74178

Please sign in to comment.