Skip to content

Commit 509bc61

Browse files
jvnsjvns
authored
Rename "Downloads" to "Install" and redesign (#2096)
This renames "Downloads" to "Install" and redesigns the page to simplify it a lot. I'm still not sure where the Logos page should be linked. Maybe in About? I've designed it as "tabs", where each tab is a separate page. I did it that way for accessibility (though I'm very far from an accessibility expert): the idea is that it would be easier for someone using a screenreader if they don't have to navigate through a bunch of irrelevant content. The `install-header` shortcode is rendered in an awkward way (you have to close some <div> tags that are secretly updated in the tab header), but I didn't think of a better way to do it yet. The Install links on the sidebar and homepage get automatically updated with Javascript to point to the appropriate page. The Build from Source page is pretty sparse right now, maybe it would be good in the future to point users to instructions for how to build Git from source.
2 parents 2a5b979 + efab1a9 commit 509bc61

File tree

19 files changed

+332
-210
lines changed

19 files changed

+332
-210
lines changed

‎assets/js/application.js‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ $(document).ready(function() {
3636
Forms.init();
3737
Downloads.init();
3838
DownloadBox.init();
39+
InstallPageLink.init();
3940
PostelizeAnchor.init();
4041
Print.init();
4142
});
@@ -60,27 +61,27 @@ var DownloadBox = {
6061
var os = window.session.browser.os; // Mac, Win, Linux
6162
if(os == "Mac") {
6263
$(".monitor").addClass("mac");
63-
$("#download-link").text("Download for Mac").attr("href", `${baseURLPrefix}downloads/mac`);
64+
$("#download-link").text("Download for Mac").attr("href", `${baseURLPrefix}install/mac`);
6465
$("#gui-link").removeClass('mac').addClass('gui');
6566
$("#gui-link").text("Mac GUIs").attr("href", `${baseURLPrefix}downloads/guis?os=mac`);
6667
$("#gui-os-filter").attr('data-os', 'mac');
6768
$("#gui-os-filter").text("Only show GUIs for my OS (Mac)")
6869
} else if (os == "Windows") {
6970
$(".monitor").addClass("windows");
70-
$("#download-link").text("Download for Windows").attr("href", `${baseURLPrefix}downloads/win`);
71+
$("#download-link").text("Download for Windows").attr("href", `${baseURLPrefix}install/windows`);
7172
$("#gui-link").removeClass('mac').addClass('gui');
7273
$("#gui-link").text("Windows GUIs").attr("href", `${baseURLPrefix}downloads/guis?os=windows`);
7374
$("#alt-link").removeClass("windows").addClass("mac");
74-
$("#alt-link").text("Mac Build").attr("href", `${baseURLPrefix}downloads/mac`);
75+
$("#alt-link").text("Mac Build").attr("href", `${baseURLPrefix}install/mac`);
7576
$("#gui-os-filter").attr('data-os', 'windows');
7677
$("#gui-os-filter").text("Only show GUIs for my OS (Windows)")
7778
} else if (os == "Linux") {
7879
$(".monitor").addClass("linux");
79-
$("#download-link").text("Download for Linux").attr("href", `${baseURLPrefix}downloads/linux`);
80+
$("#download-link").text("Download for Linux").attr("href", `${baseURLPrefix}install/linux`);
8081
$("#gui-link").removeClass('mac').addClass('gui');
8182
$("#gui-link").text("Linux GUIs").attr("href", `${baseURLPrefix}downloads/guis?os=linux`);
8283
$("#alt-link").removeClass("windows").addClass("mac");
83-
$("#alt-link").text("Mac Build").attr("href", `${baseURLPrefix}downloads/mac`);
84+
$("#alt-link").text("Mac Build").attr("href", `${baseURLPrefix}install/mac`);
8485
$("#gui-os-filter").attr('data-os', 'linux');
8586
$("#gui-os-filter").text("Only show GUIs for my OS (Linux)")
8687
} else {
@@ -809,6 +810,22 @@ var Graphviz = {
809810
}
810811
}
811812

813+
var InstallPageLink = {
814+
init: function() {
815+
const installLink = document.querySelector('.install-link');
816+
if (!installLink) return;
817+
818+
const os = window.session?.browser?.os;
819+
if (os === "Mac") {
820+
installLink.href = installLink.href.replace('/install', '/install/mac');
821+
} else if (os === "Windows") {
822+
installLink.href = installLink.href.replace('/install', '/install/win');
823+
} else if (os === "Linux") {
824+
installLink.href = installLink.href.replace('/install', '/install/linux');
825+
}
826+
}
827+
}
828+
812829
var Print = {
813830
init: function() {
814831
Print.tagline = $("#tagline");

‎assets/sass/application.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
1616
@import 'variables';
1717
@import 'layout';
1818
@import 'typography';
19-
@import 'downloads';
19+
@import 'install';
2020
@import 'search';
2121
@import 'front-page';
2222
@import 'sidebar';

‎assets/sass/downloads.scss‎

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

‎assets/sass/install.scss‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
@import "variables";
2+
@import "mixins";
3+
4+
.install-tabs {
5+
display: flex;
6+
border-bottom: 2px solid var(--callout-color);
7+
role: tablist;
8+
9+
a[role="tab"] {
10+
padding: 0.75rem 1rem;
11+
12+
background: var(--callout-color);
13+
border: 2px solid var(--callout-color);
14+
border-bottom: none;
15+
margin-right: -2px;
16+
font-weight: 600;
17+
text-decoration: none;
18+
color: var(--font-color);
19+
text-align: center;
20+
21+
&:hover {
22+
color: var(--link-color);
23+
}
24+
25+
&[aria-selected="true"] {
26+
color: var(--font-color);
27+
background: var(--main-bg);
28+
border-bottom: 2px solid var(--main-bg);
29+
margin-bottom: -2px;
30+
}
31+
32+
// Border radius for first and last tabs
33+
&:first-of-type {
34+
border-top-left-radius: 8px;
35+
}
36+
37+
&:last-of-type {
38+
border-top-right-radius: 8px;
39+
margin-right: 0;
40+
}
41+
}
42+
43+
@media (max-width: $mobile-m) {
44+
a[role="tab"] {
45+
padding: .5rem;
46+
line-height: 1.2em;
47+
display: flex;
48+
49+
span {
50+
margin: auto;
51+
}
52+
}
53+
}
54+
}
55+
56+
.install-content {
57+
padding: 1rem;
58+
border: 2px solid var(--callout-color);
59+
border-top: none;
60+
border-bottom-left-radius: 8px;
61+
border-bottom-right-radius: 8px;
62+
}
63+
64+
.install-overview {
65+
margin: 2rem;
66+
color: var(--light-font-color);
67+
font-size: 1.1rem;
68+
line-height: 1.8rem;
69+
}
70+
71+
.install-header {
72+
display: flex;
73+
justify-content: space-between;
74+
align-items: center;
75+
margin-bottom: 1.5rem;
76+
77+
h1 {
78+
margin: 0;
79+
}
80+
}
81+
82+
.version-badge {
83+
display: inline-block;
84+
padding: 0.25rem 0.75rem;
85+
background: var(--sidebar-toc-bg-color);
86+
border-radius: 6px;
87+
font-size: 0.75rem;
88+
font-weight: bold;
89+
@media (max-width: $mobile-m) {
90+
max-width: 150px;
91+
}
92+
93+
a {
94+
color: var(--link-color);
95+
text-decoration: none;
96+
97+
&:hover {
98+
color: var(--link-hover-color);
99+
text-decoration: underline;
100+
}
101+
}
102+
}
103+
104+
#logo-license {
105+
@extend .callout;
106+
padding: 20px !important;
107+
margin-top: 2em;
108+
109+
p {
110+
font-size: 12px;
111+
line-height: 1.4;
112+
color: var(--light-font-color);
113+
}
114+
115+
p+p {
116+
margin-top: 14px;
117+
}
118+
119+
img {
120+
float: left;
121+
margin-right: 20px;
122+
}
123+
}
124+
125+
#download-next-steps {
126+
@include clearfix;
127+
@extend .unstyled !optional;
128+
padding-top: 24px;
129+
130+
li {
131+
display: block;
132+
float: left;
133+
width: 200px;
134+
margin-bottom: 20px;
135+
}
136+
137+
li+li {
138+
margin-left: 20px;
139+
}
140+
141+
a {
142+
display: block;
143+
color: var(--font-color);
144+
text-align: center;
145+
background-repeat: no-repeat;
146+
background-position: 0 0;
147+
transition-duration: 0.3s;
148+
transition-property: color;
149+
150+
img {
151+
display: block;
152+
margin: 0 auto 10px;
153+
opacity: 0.9;
154+
transition-duration: 0.3s;
155+
transition-property: opacity;
156+
image-rendering: -webkit-optimize-contrast;
157+
}
158+
159+
h3 {
160+
font-size: 18px;
161+
font-weight: bold;
162+
color: var(--orange);
163+
}
164+
165+
p {
166+
font-size: 13px;
167+
line-height: $base-line-height * 0.8;
168+
}
169+
}
170+
171+
a:hover {
172+
img {
173+
opacity: 1;
174+
}
175+
176+
h3 {
177+
color: var(--orange-darker-5);
178+
}
179+
}
180+
}
181+
182+
.downloading .hide {
183+
display: none;
184+
}

‎content/about/free-and-open-source.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h2>Free and Open Source</h2>
1717
free for all its users.</p>
1818

1919
<p>However, we do restrict the use of the term "Git" and the
20-
<a href="{{< relurl "downloads/logos" >}}">logos</a> to avoid confusion. Please
20+
<a href="{{< relurl "community/logos" >}}">logos</a> to avoid confusion. Please
2121
see our <a href="{{< relurl "trademark" >}}">trademark</a> policy for
2222
details.</p>
2323

‎content/about/trademark.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h3>1 Purpose</h3>
3838
<ul>
3939
<li><p>The literal mark "Git"</p></li>
4040
<li><p>The logos and graphic marks displayed and available for
41-
download at <a href="https://git-scm.com/downloads/logos">https://git-scm.com/downloads/logos</a></p></li>
41+
download at <a href="https://git-scm.com/community/logos">https://git-scm.com/community/logos</a></p></li>
4242
<li><p>The slogan "the stupid content tracker"</p></li>
4343
</ul>
4444

‎content/community/_index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,12 @@ <h2 id="discord"><a class="anchor" href="#discord"></a> Discord Server </h2>
9292
The <a href="https://discord.gg/GRFVkzgxRd">Git Community Discord Server</a> also has many knowledgeable and helpful people. Additionally, it provides a space to be able to voice chat about patches, designs, or anything else Git related.
9393
</p>
9494

95+
<h2 id="logos"><a class="anchor" href="#logos"></a> Logos </h2>
96+
97+
<p>
98+
Various <a href="{{< relurl "community/logos" >}}">Git logos</a> in PNG (bitmap) and EPS (vector) formats are available for use in online and print projects.
99+
</p>
100+
95101
<h2 id="git-rev-news"><a class="anchor" href="#git-rev-news"></a> Newsletter </h2>
96102

97103
<p>

0 commit comments

Comments
 (0)