Skip to content

Commit 63fec5d

Browse files
rauhulrauhul
authored
Modernize visual appearance of grids (#742)
Updates all grids except for package grids to take a more layered appearance matching that of the tabs. Adds support for "prefers-contrast: more" to use the previous higher contrast style. Removes the many grid css styles and replaces them with a common grid style in the elements folder than can be reused between pages.
1 parent 1df72b3 commit 63fec5d

File tree

21 files changed

+215
-318
lines changed

21 files changed

+215
-318
lines changed

‎_includes/install/_build_release.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
{% assign platform = site.data.builds.swift_releases.last.platforms | where: 'name', include.platform | first %}
1010
{% endunless %}
1111

12-
<ul class="install-instruction">
13-
<li class="resource">
12+
<ul class="grid-level-0 grid-layout-2-column">
13+
<li class="grid-level-1">
1414
<h3>Docker</h3>
1515
<p class="description">
1616
The offical Docker images for Swift.
1717
</p>
1818
<a href="https://hub.docker.com/_/swift" class="cta-secondary external">Coming Soon</a>
1919
<a href="/install/linux/docker" class="cta-secondary">Instructions</a>
2020
</li>
21-
<li class="resource">
21+
<li class="grid-level-1">
2222
<h3>Tarball</h3>
2323
<p class="description">
2424
Tarball packages (.tar.gz)
@@ -33,7 +33,7 @@
3333
</li>
3434
</ul>
3535
</p>
36-
<ul class="install-instruction">
36+
<ul class="grid-level-0 grid-layout-2-column">
3737
{% for arch in platform.archs %}
3838
<a href="https://download.swift.org/{{ tag_downcase }}/{{ platform_name_url }}{% if arch != "x86_64" %}-{{ arch }}{% endif %}/{{ tag }}/{{ tag }}-{{ platform_name }}{% if arch != "x86_64" %}-{{ arch }}{% endif %}.tar.gz" class="cta-secondary">Download ({{ arch }})</a>
3939
{% endfor %}
@@ -44,8 +44,8 @@
4444
{% include install/_static_sdk_release.md %}
4545

4646
{% if include.rpm %}
47-
<ul class="install-instruction">
48-
<li class="resource featured">
47+
<ul class="grid-level-0 grid-layout-2-column">
48+
<li class="grid-level-1 featured">
4949
<h3>RPM</h3>
5050
<p class="description">
5151
RPM Package Manager (Experimental use only)

‎_includes/install/_build_snapshot.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ Swift snapshots are prebuilt binaries that are automatically created from the br
1111
{% assign aarch64_development_builds = include.aarch64_development_builds | sort: 'date' | reverse %}
1212
{% endif %}
1313

14-
<ul class="install-instruction">
15-
<li class="resource">
14+
<ul class="grid-level-0 grid-layout-2-column">
15+
<li class="grid-level-1">
1616
<h3>{{ include.development }}</h3>
1717
<p class="description" style="font-size: 14px;">
1818
<time datetime="{{ development_builds.first.date | date_to_xmlschema }}" title="{{ development_builds.first.date | date: '%B %-d, %Y %l:%M %p (%Z)' }}">{{ development_builds.first.date | date: '%B %-d, %Y' }}</time>
1919
</p>
2020
<h4>Tarball (tar.gz)</h4>
2121
{% if include.aarch64 %}
22-
<ul class="install-instruction">
22+
<ul class="grid-level-0 grid-layout-2-column">
2323
<a href="https://download.swift.org/{{ include.branch_dir }}/{{ platform_name_url }}/{{ development_builds.first.dir }}/{{ development_builds.first.download }}" class="cta-secondary">Download (x86_64)</a>
2424
<a href="https://download.swift.org/{{ include.branch_dir }}/{{ platform_name_url }}-aarch64/{{ aarch64_development_builds.first.dir }}/{{ aarch64_development_builds.first.download }}" class="cta-secondary">Download (aarch64)</a>
2525
</ul>
@@ -34,14 +34,14 @@ Swift snapshots are prebuilt binaries that are automatically created from the br
3434
</ul>
3535
</p>
3636
</li>
37-
<li class="resource">
37+
<li class="grid-level-1">
3838
<h3>{{ include.development_2 }}</h3>
3939
<p class="description" style="font-size: 14px;">
4040
<time datetime="{{ development_builds_2.first.date | date_to_xmlschema }}" title="{{ development_builds_2.first.date | date: '%B %-d, %Y %l:%M %p (%Z)' }}">{{ development_builds_2.first.date | date: '%B %-d, %Y' }}</time>
4141
</p>
4242
<h4>Tarball (tar.gz)</h4>
4343
{% if include.aarch64 %}
44-
<ul class="install-instruction">
44+
<ul class="grid-level-0 grid-layout-2-column">
4545
<a href="https://download.swift.org/{{ include.branch_dir_2 }}/{{ platform_name_url }}/{{ development_builds_2.first.dir }}/{{ development_builds_2.first.download }}" class="cta-secondary">Download (x86_64)</a>
4646
<a href="https://download.swift.org/{{ include.branch_dir_2 }}/{{ platform_name_url }}-aarch64/{{ aarch64_development_builds_2.first.dir }}/{{ aarch64_development_builds_2.first.download }}" class="cta-secondary">Download (aarch64)</a>
4747
</ul>
@@ -57,7 +57,7 @@ Swift snapshots are prebuilt binaries that are automatically created from the br
5757
</p>
5858
</li>
5959
</ul>
60-
<ul class="install-instruction">
60+
<ul class="grid-level-0 grid-layout-2-column">
6161
<a href="/install/linux/tarball" class="cta-secondary">Instructions (Tarball)</a>
6262
<a href="/install/linux/docker" class="cta-secondary">Instructions (Docker)</a>
6363
</ul>

‎_includes/install/_static_sdk_dev.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% assign static_sdk_dev_builds = site.data.builds.development.static_sdk | sort: 'date' | reverse %}
22
{% assign static_sdk_6_0_builds = site.data.builds.swift-6_0-branch.static_sdk | sort: 'date' | reverse %}
33
<h3> Static Linux SDK </h3>
4-
<ul class="install-instruction">
5-
<li class="resource">
4+
<ul class="grid-level-0 grid-layout-2-column">
5+
<li class="grid-level-1">
66
<h3>main</h3>
77
<p class="description" style="font-size: 14px;">
88
<time datetime="{{ static_sdk_dev_builds.first.date | date_to_xmlschema }}" title="{{ static_sdk_dev_builds.first.date | date: '%B %-d, %Y %l:%M %p (%Z)' }}">{{ static_sdk_dev_builds.first.date | date: '%B %-d, %Y' }}</time>
@@ -18,7 +18,7 @@
1818
</p>
1919
<a href="https://download.swift.org/development/static-sdk/{{ static_sdk_dev_builds.first.dir }}/{{ static_sdk_dev_builds.first.download }}" class="cta-secondary">Download Linux Static SDK</a>
2020
</li>
21-
<li class="resource">
21+
<li class="grid-level-1">
2222
<h3>release/6.0</h3>
2323
<p class="description" style="font-size: 14px;">
2424
<time datetime="{{ static_sdk_6_0_builds.first.date | date_to_xmlschema }}" title="{{ static_sdk_6_0_builds.first.date | date: '%B %-d, %Y %l:%M %p (%Z)' }}">{{ static_sdk_6_0_builds.first.date | date: '%B %-d, %Y' }}</time>
@@ -33,4 +33,4 @@
3333
<a href="https://download.swift.org/swift-6.0-branch/static-sdk/{{ static_sdk_6_0_builds.first.dir }}/{{ static_sdk_6_0_builds.first.download }}" class="cta-secondary">Download Linux Static SDK</a>
3434
</li>
3535
</ul>
36-
<a href="/documentation/articles/static-linux-getting-started.html" class="cta-secondary">Instructions (Static Linux SDK)</a>
36+
<a href="/documentation/articles/static-linux-getting-started.html" class="cta-secondary">Instructions (Static Linux SDK)</a>

‎assets/stylesheets/_elements.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
@import "elements/banner";
2+
@import "elements/grid-layout";
3+
@import "elements/grid";
24
@import "elements/tabs";

‎assets/stylesheets/_pages.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
@import "pages/landing";
2-
@import "pages/getting-started";
32
@import "pages/swift-evolution";
43
@import "pages/packages";
54
@import "pages/download";
6-
@import "pages/tools";

‎assets/stylesheets/_screen.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1102,7 +1102,7 @@ article {
11021102

11031103
font-size: 12px;
11041104
border: 1px solid var(--color-nav-link-color);
1105-
border-radius: var(--border-radius);
1105+
border-radius: 4px;
11061106
display: inline-flex;
11071107
padding: 1px;
11081108
margin-bottom: var(--content-margin-bottom);

‎assets/stylesheets/core/_vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:root {
2-
--border-radius: 4px;
2+
--border-radius: 12px;
33
--content-margin-bottom: 1em;
44
--navigation-mobile-breakpoint: 68rem;
55
--content-mobile-breakpoint: 68rem;

‎assets/stylesheets/elements/_grid-layout.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.grid-layout-2-column {
2+
@media (min-width: 1000px) {
3+
grid-template-columns: repeat(2, 1fr);
4+
}
5+
}
6+
7+
.grid-layout-3-column {
8+
@media (min-width: 1000px) {
9+
grid-template-columns: repeat(3, 1fr);
10+
}
11+
}

‎assets/stylesheets/elements/_grid.scss

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
.grid-level-0 {
2+
list-style: none;
3+
display: grid;
4+
gap: 1rem;
5+
padding: 0;
6+
}
7+
8+
.grid-level-1 {
9+
background-color: var(--color-fill-secondary);
10+
border: 1px solid var(--color-fill-tertiary);
11+
border-radius: var(--border-radius);
12+
13+
padding: 1rem;
14+
display: flex;
15+
flex-direction: column;
16+
17+
@media (prefers-contrast: more) {
18+
background-color: transparent;
19+
border: 1px solid var(--color-text);
20+
}
21+
22+
// FIXME: no inset from container
23+
.hero {
24+
border-radius: var(--border-radius);
25+
border: 1px solid var(--color-fill-tertiary);
26+
margin-bottom: 1rem;
27+
}
28+
29+
// Card Title
30+
h3 {
31+
line-height: 1.4;
32+
font-size: 1.4rem;
33+
padding-top: 0;
34+
}
35+
36+
// Card Caption
37+
h4 {
38+
font-size: 0.8rem;
39+
color: var(--color-secondary-label);
40+
border: none;
41+
padding: 0.5rem 0 0.125rem;
42+
}
43+
44+
p {
45+
flex-grow: 1;
46+
color: var(--color-secondary-label);
47+
margin-bottom: 0;
48+
}
49+
50+
// avoid extra space between a caption and button needed by install page
51+
h4 + .cta-secondary {
52+
margin-top: 0rem;
53+
}
54+
}
55+
56+
// Used by Packages page.
57+
.grid-level-1.selectable {
58+
h3 {
59+
color: var(--color-link);
60+
}
61+
62+
a {
63+
text-decoration: none;
64+
}
65+
66+
&:hover {
67+
background-color: var(--color-fill-tertiary);
68+
border: 1px solid var(--color-fill-quaternary);
69+
70+
@media (prefers-contrast: more) {
71+
background-color: var(--color-text);
72+
p {
73+
color: var(--color-fill);
74+
}
75+
}
76+
}
77+
}
78+
79+
// Button typically embedded in a grid-level-1
80+
a.cta-secondary {
81+
background-color: var(--color-fill-tertiary);
82+
border: 1px solid var(--color-fill-quaternary);
83+
border-radius: var(--border-radius);
84+
85+
86+
color: var(--color-text);
87+
text-decoration: none;
88+
89+
display: block;
90+
margin-top: 1rem;
91+
padding: 0.5rem 0;
92+
text-align: center;
93+
94+
@media (prefers-contrast: more) {
95+
background-color: transparent;
96+
border: 1px solid var(--color-text);
97+
}
98+
99+
&:hover {
100+
color: var(--color-link);
101+
background-color: var(--color-fill-quaternary);
102+
103+
text-decoration: none;
104+
105+
@media (prefers-contrast: more) {
106+
background-color: var(--color-text);
107+
color: var(--color-fill);
108+
}
109+
}
110+
111+
&.external:after {
112+
content: " ↗";
113+
}
114+
}

‎assets/stylesheets/pages/_getting-started.scss

Lines changed: 0 additions & 107 deletions
This file was deleted.

0 commit comments

Comments
 (0)