Skip to content

Commit 39c66df

Browse files
jvnsjvns
committed
Move /download to /install
- Add a new style where we display the install instructions as tabs, with a shortcode and CSS - Update aliases - Move existing Windows/Linux/Mac pages to the new style, keeping the content the same Signed-off-by: Julia Evans <[email protected]>
1 parent 67a7ebb commit 39c66df

File tree

10 files changed

+266
-182
lines changed

10 files changed

+266
-182
lines changed

‎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/download/_index.html‎

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

‎content/downloads/_index.html‎

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

‎content/install/_index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
section: "install"
3+
title: "Git - Install"
4+
url: /install
5+
aliases:
6+
- /downloads/index.html
7+
- /download/index.html
8+
- /download.html
9+
- /install.html
10+
---
11+
12+
<div id="main">
13+
{{< install-header >}}
14+
15+
<div class="install-content">
16+
<p class="install-overview">
17+
Choose your operating system above.
18+
</p>
19+
</div>
20+
</div>
21+
</div>

0 commit comments

Comments
 (0)