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 {