diff --git a/www/fonts/AlfaSlabOne-Regular.woff b/www/fonts/AlfaSlabOne-Regular.woff new file mode 100644 index 00000000000..10aa99d69a7 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 00000000000..f4611065c04 Binary files /dev/null and b/www/fonts/AlfaSlabOne-Regular.woff2 differ diff --git a/www/index.html b/www/index.html index 6dacaf75c0d..31fc8e74e8f 100644 --- a/www/index.html +++ b/www/index.html @@ -19,12 +19,19 @@ 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

+
+
+
+
+

Get Started

+
+
+
-

- 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 +247,6 @@ about rustup

+
+ diff --git a/www/rustup.css b/www/rustup.css index d3146d8d905..48b3898a28a 100644 --- a/www/rustup.css +++ b/www/rustup.css @@ -4,12 +4,14 @@ font-weight: 300; src: local('Fira Sans Light'), url("fonts/FiraSans-Light.woff") format('woff'); } + @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; src: local('Fira Sans'), url("fonts/FiraSans-Regular.woff") format('woff'); } + @font-face { font-family: 'Fira Sans'; font-style: normal; @@ -31,13 +33,22 @@ 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 +56,56 @@ 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: #000; + font-size: 4rem; + margin-bottom: 0; + margin-top: 1rem; + line-height: 1; + font-weight: 300; + letter-spacing: 1px; +} + +header>div>h2 { + color: #000; + font-size: 2rem; + font-weight: 300; +} + +.highlight { + height: 12px; + position: relative; + top: 0; + width: 100%; + max-width: 90vw; + line-height: 1.6; + border-radius: 2px; + background-color: #ffc832; } 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: 45em; } -body#idx > #pitch { - width: 35rem; -} - -#pitch em { - font-style: normal; - font-weight: 400; -} body#idx p { margin-top: 2em; @@ -84,8 +116,20 @@ body#idx p.other-platforms-help { font-size: 0.6em; } +#get-started { + display: flex; + flex-direction: column; + align-items: start; + margin-bottom: 1rem; +} + +#get-started>div>h2 { + margin: 0; + font-size: 1.5rem; +} + .instructions { - background-color: rgb(250, 250, 250); + color: black; margin-left: auto; margin-right: auto; text-align: center; @@ -94,41 +138,41 @@ body#idx p.other-platforms-help { box-shadow: 0px 1px 4px 0px rgb(204, 204, 204); } -.instructions > * { +.instructions>* { width: 45rem; margin-left: auto; margin-right: auto; } hr { + border-color: #0b7261; margin-top: 2em; margin-bottom: 2em; } -#platform-instructions-unix > p, -#platform-instructions-win32 > p, -#platform-instructions-win64 > p, -#platform-instructions-win-arm64 > p, -#platform-instructions-default > p, -#platform-instructions-unknown > p { +#platform-instructions-unix>p, +#platform-instructions-win32>p, +#platform-instructions-win64>p, +#platform-instructions-win-arm64>p, +#platform-instructions-default>p, +#platform-instructions-unknown>p { width: 40rem; } .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; @@ -183,7 +227,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,23 +242,29 @@ 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; } /* This is the box that prints navigator.platform, navigator.appVersion values */ -#platform-instructions-unknown > div:first-of-type { +#platform-instructions-unknown>div:first-of-type { font-size: 16px; line-height: 2rem; } +#help { + text-align: center; + font-size: 20px; +} + #about { font-size: 16px; line-height: 2em; + text-align: center; } -#about > img { +#about>img { width: 30px; height: 30px; transform: translateY(11px);