Skip to content

Commit 5025be2

Browse files
0xPoe0xPoe
committed
feat: align website style with www.rust-lang.org/ for consistency
Signed-off-by: Rustin170506 <[email protected]>
1 parent c8eddcb commit 5025be2

File tree

4 files changed

+104
-45
lines changed

4 files changed

+104
-45
lines changed

‎www/fonts/AlfaSlabOne-Regular.woff

23 KB
Binary file not shown.

‎www/fonts/AlfaSlabOne-Regular.woff2

17 KB
Binary file not shown.

‎www/index.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,19 @@
1919
click or press "n" to cycle platforms
2020
</a>
2121

22-
<p id="pitch">
23-
<em>rustup</em> is an installer for<br/>
24-
the systems programming language
25-
<a href="https://www.rust-lang.org">Rust</a>
26-
</p>
27-
22+
<main>
23+
<header>
24+
<div>
25+
<h1>rustup</h1>
26+
<h2>An installer for the systems programming language <a href="https://www.rust-lang.org">Rust</a></h2>
27+
</div>
28+
</header>
29+
<div id="get-started">
30+
<div>
31+
<h2>Get Started</h2>
32+
<div class="highlight"></div>
33+
</div>
34+
</div>
2835
<div id="platform-instructions-unix" class="instructions display-none">
2936
<p>Run the following in your terminal, then follow the onscreen instructions.</p>
3037
<div class="copy-container">
@@ -223,8 +230,9 @@
223230
</div>
224231
</div>
225232

226-
<p>
227-
Need help?<br>Ask on <a href="https://discord.gg/rust-lang">#beginners in the Rust Discord</a><br>
233+
<p id="help">
234+
Need help?<br>
235+
Ask on <a href="https://discord.gg/rust-lang">#beginners in the Rust Discord</a><br>
228236
or in the <a href="https://users.rust-lang.org">Rust Users Forum</a>.
229237
</p>
230238

@@ -239,4 +247,6 @@
239247
<a href="https://rust-lang.github.io/rustup/">about rustup</a>
240248
</p>
241249

250+
</main>
251+
</body>
242252
<script src="rustup.js"></script>

‎www/rustup.css

Lines changed: 86 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
font-weight: 300;
55
src: local('Fira Sans Light'), url("fonts/FiraSans-Light.woff") format('woff');
66
}
7+
78
@font-face {
89
font-family: 'Fira Sans';
910
font-style: normal;
1011
font-weight: 400;
1112
src: local('Fira Sans'), url("fonts/FiraSans-Regular.woff") format('woff');
1213
}
14+
1315
@font-face {
1416
font-family: 'Fira Sans';
1517
font-style: normal;
@@ -31,49 +33,78 @@
3133
src: local('Work Sans Medium'), url("fonts/WorkSans-Medium.ttf") format('truetype');
3234
}
3335

36+
@font-face {
37+
font-family: 'Alfa Slab One';
38+
font-style: normal;
39+
font-weight: 400;
40+
src: local('Alfa Slab One'),
41+
url("fonts/AlfaSlabOne-Regular.woff2") format('woff2'),
42+
url("fonts/AlfaSlabOne-Regular.woff") format('woff');
43+
}
44+
3445
body {
35-
margin-top: 2em;
3646
background-color: white;
37-
color: #515151;
38-
font-family: "Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
47+
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
3948
font-weight: 300;
4049
font-size: 25px;
50+
margin: 0;
4151
}
4252

4353
pre {
4454
font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
4555
font-weight: 400;
4656
}
4757

48-
body#idx #pitch > a {
49-
font-weight: 500;
50-
line-height: 2em;
58+
header>div {
59+
display: flex;
60+
flex-direction: column;
61+
align-items: flex-start;
62+
}
63+
64+
header>div>h1 {
65+
font-family: "Alfa Slab One", serif;
66+
color: black;
67+
font-size: 4rem;
68+
margin-bottom: 0;
69+
margin-top: 1rem;
70+
line-height: 1;
71+
font-weight: 300;
72+
letter-spacing: 1px;
73+
}
74+
75+
header>div>h2 {
76+
color: black;
77+
font-size: 2rem;
78+
font-weight: 300;
79+
}
80+
81+
.highlight {
82+
height: 12px;
83+
position: relative;
84+
top: 0;
85+
width: 100%;
86+
max-width: 90vw;
87+
line-height: 1.6;
88+
border-radius: 2px;
89+
background-color: #ffc832;
5190
}
5291

5392
a {
54-
color: #428bca;
55-
text-decoration: none;
93+
color: #0b7261;
94+
text-decoration: underline;
5695
}
5796

5897
a:hover {
59-
color: rgb(42, 100, 150);
98+
color: #0d8b75;
99+
text-decoration: underline;
60100
}
61101

62-
body#idx > * {
102+
main {
63103
margin-left: auto;
64104
margin-right: auto;
65-
text-align: center;
66-
width: 35em;
105+
width: 45em;
67106
}
68107

69-
body#idx > #pitch {
70-
width: 35rem;
71-
}
72-
73-
#pitch em {
74-
font-style: normal;
75-
font-weight: 400;
76-
}
77108

78109
body#idx p {
79110
margin-top: 2em;
@@ -84,8 +115,20 @@ body#idx p.other-platforms-help {
84115
font-size: 0.6em;
85116
}
86117

118+
#get-started {
119+
display: flex;
120+
flex-direction: column;
121+
align-items: start;
122+
margin-bottom: 1rem;
123+
}
124+
125+
#get-started>div>h2 {
126+
margin: 0;
127+
font-size: 1.5rem;
128+
}
129+
87130
.instructions {
88-
background-color: rgb(250, 250, 250);
131+
color: black;
89132
margin-left: auto;
90133
margin-right: auto;
91134
text-align: center;
@@ -94,41 +137,41 @@ body#idx p.other-platforms-help {
94137
box-shadow: 0px 1px 4px 0px rgb(204, 204, 204);
95138
}
96139

97-
.instructions > * {
140+
.instructions>* {
98141
width: 45rem;
99142
margin-left: auto;
100143
margin-right: auto;
101144
}
102145

103146
hr {
147+
border-color: #0b7261;
104148
margin-top: 2em;
105149
margin-bottom: 2em;
106150
}
107151

108-
#platform-instructions-unix > p,
109-
#platform-instructions-win32 > p,
110-
#platform-instructions-win64 > p,
111-
#platform-instructions-win-arm64 > p,
112-
#platform-instructions-default > p,
113-
#platform-instructions-unknown > p {
152+
#platform-instructions-unix>p,
153+
#platform-instructions-win32>p,
154+
#platform-instructions-win64>p,
155+
#platform-instructions-win-arm64>p,
156+
#platform-instructions-default>p,
157+
#platform-instructions-unknown>p {
114158
width: 40rem;
115159
}
116160

117161
.rustup-command::before {
118-
color: #999;
162+
color: black;
119163
content: " $ ";
120-
margin-left: 15px;
164+
margin-left: 15px;
121165
}
122166

123167
.rustup-command {
124-
background-color: #515151;
125-
color: white;
168+
color: black;
126169
padding: 1rem 1rem 1rem 0;
127170
width: 45rem;
128171
height: auto;
129172
text-align: center;
130173
border-radius: 3px 0 0 3px;
131-
box-shadow: inset 0px 0px 20px 0px #333333;
174+
box-shadow: inset 0px 0px 20px 0px #f1eeee;
132175
overflow: hidden;
133176
font-size: 0.6em;
134177
white-space: nowrap;
@@ -183,7 +226,7 @@ hr {
183226
transition: opacity 0.2s ease-in-out;
184227
opacity: 0;
185228
font-size: 10px;
186-
color: green;
229+
color: #0b7261;
187230
width: 41px;
188231
height: 15px;
189232
position: relative;
@@ -198,23 +241,29 @@ hr {
198241
display: block;
199242
padding-top: 0.4rem;
200243
padding-bottom: 0.6rem;
201-
font-family: "Work Sans", "Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
244+
font-family: "Work Sans", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
202245
font-weight: 500;
203246
letter-spacing: 0.1rem;
204247
}
205248

206249
/* This is the box that prints navigator.platform, navigator.appVersion values */
207-
#platform-instructions-unknown > div:first-of-type {
250+
#platform-instructions-unknown>div:first-of-type {
208251
font-size: 16px;
209252
line-height: 2rem;
210253
}
211254

255+
#help {
256+
text-align: center;
257+
font-size: 20px;
258+
}
259+
212260
#about {
213261
font-size: 16px;
214262
line-height: 2em;
263+
text-align: center;
215264
}
216265

217-
#about > img {
266+
#about>img {
218267
width: 30px;
219268
height: 30px;
220269
transform: translateY(11px);

0 commit comments

Comments
 (0)