diff --git a/www/fonts/AlfaSlabOne-Regular.woff b/www/fonts/AlfaSlabOne-Regular.woff
new file mode 100644
index 0000000000..10aa99d69a
Binary files /dev/null and b/www/fonts/AlfaSlabOne-Regular.woff differ
diff --git a/www/fonts/AlfaSlabOne-Regular.woff2 b/www/fonts/AlfaSlabOne-Regular.woff2
new file mode 100644
index 0000000000..f4611065c0
Binary files /dev/null and b/www/fonts/AlfaSlabOne-Regular.woff2 differ
diff --git a/www/index.html b/www/index.html
index 6dacaf75c0..cb31c3ace4 100644
--- a/www/index.html
+++ b/www/index.html
@@ -19,12 +19,13 @@
click or press "n" to cycle platforms
-
- rustup is an installer for
- the systems programming language
- Rust
-
-
+
+
+
+
rustup
+
An installer for the systems programming language Rust
+
+
-
- Need help?
Ask on #beginners in the Rust Discord
+
+ Need help?
+ Ask on #beginners in the Rust Discord
or in the Rust Users Forum.
@@ -239,4 +241,5 @@
about rustup
+
diff --git a/www/rustup.css b/www/rustup.css
index d3146d8d90..51a71cfd94 100644
--- a/www/rustup.css
+++ b/www/rustup.css
@@ -31,13 +31,21 @@
src: local('Work Sans Medium'), url("fonts/WorkSans-Medium.ttf") format('truetype');
}
+@font-face {
+ font-family: 'Alfa Slab One';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Alfa Slab One'),
+ url("fonts/AlfaSlabOne-Regular.woff2") format('woff2'),
+ url("fonts/AlfaSlabOne-Regular.woff") format('woff');
+}
+
body {
- margin-top: 2em;
background-color: white;
- color: #515151;
- font-family: "Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 25px;
+ margin: 0;
}
pre {
@@ -45,35 +53,47 @@ pre {
font-weight: 400;
}
-body#idx #pitch > a {
- font-weight: 500;
- line-height: 2em;
+header > div {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+header > div > h1 {
+ font-family: "Alfa Slab One", serif;
+ color: black;
+ font-size: 4rem;
+ margin-bottom: 0;
+ margin-top: 1rem;
+ line-height: 1;
+ font-weight: 300;
+ letter-spacing: 1px;
+}
+
+header > div > h2 {
+ color: black;
+ font-size: 2rem;
+ font-weight: 300;
}
a {
- color: #428bca;
- text-decoration: none;
+ color: #0b7261;
+ text-decoration: underline;
}
a:hover {
- color: rgb(42, 100, 150);
+ color: #0d8b75;
+ text-decoration: underline;
}
-body#idx > * {
+main {
margin-left: auto;
margin-right: auto;
- text-align: center;
- width: 35em;
+ width: 80%;
+ max-width: 1200px;
+ padding: 0 20px;
}
-body#idx > #pitch {
- width: 35rem;
-}
-
-#pitch em {
- font-style: normal;
- font-weight: 400;
-}
body#idx p {
margin-top: 2em;
@@ -85,7 +105,7 @@ body#idx p.other-platforms-help {
}
.instructions {
- background-color: rgb(250, 250, 250);
+ color: black;
margin-left: auto;
margin-right: auto;
text-align: center;
@@ -95,12 +115,12 @@ body#idx p.other-platforms-help {
}
.instructions > * {
- width: 45rem;
margin-left: auto;
margin-right: auto;
}
hr {
+ border-color: #0b7261;
margin-top: 2em;
margin-bottom: 2em;
}
@@ -111,29 +131,28 @@ hr {
#platform-instructions-win-arm64 > p,
#platform-instructions-default > p,
#platform-instructions-unknown > p {
- width: 40rem;
+ width: 80%;
}
.rustup-command::before {
- color: #999;
+ color: black;
content: " $ ";
- margin-left: 15px;
+ margin-left: 15px;
}
.rustup-command {
- background-color: #515151;
- color: white;
+ color: black;
padding: 1rem 1rem 1rem 0;
- width: 45rem;
height: auto;
text-align: center;
border-radius: 3px 0 0 3px;
- box-shadow: inset 0px 0px 20px 0px #333333;
+ box-shadow: inset 0px 0px 20px 0px #f1eeee;
overflow: hidden;
font-size: 0.6em;
white-space: nowrap;
height: 26px;
line-height: 26px;
+ overflow-x: auto;
}
#platform-instructions-unix div.copy-container,
@@ -144,6 +163,8 @@ hr {
#platform-instructions-unknown div.copy-container {
display: flex;
align-items: center;
+ width: 90%;
+ justify-content: center;
}
#platform-instructions-unix button.copy-button,
@@ -183,7 +204,7 @@ hr {
transition: opacity 0.2s ease-in-out;
opacity: 0;
font-size: 10px;
- color: green;
+ color: #0b7261;
width: 41px;
height: 15px;
position: relative;
@@ -198,7 +219,7 @@ hr {
display: block;
padding-top: 0.4rem;
padding-bottom: 0.6rem;
- font-family: "Work Sans", "Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-family: "Work Sans", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
letter-spacing: 0.1rem;
}
@@ -209,9 +230,15 @@ hr {
line-height: 2rem;
}
+#help {
+ text-align: center;
+ font-size: 20px;
+}
+
#about {
font-size: 16px;
line-height: 2em;
+ text-align: center;
}
#about > img {