Use a style more like rust-lang.org

rust-lang · Apr 27, 2016 · f13bc7f · f13bc7f
1 parent 9c91bf7
commit f13bc7f
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ And it runs on all platforms Rust supports, especially Windows.
 * [API](#api)
 * [Other installation methods](#other-installation-methods)
 * [Security](#security)
-* [How is this related to multirust?](#how-is-this-related-to-multirust)
+* [FAQ](#faq)
 * [License](#license)
 * [Contributing](#contributing)
 
@@ -430,7 +430,15 @@ variable.
 work. `rustup` performs all downloads over HTTPS, but does not
 yet validate signatures of downloads.
 
-## How is this related to multirust?
+## FAQ
+
+### Is this an official Rust project?
+
+Yes. rustup is an official Rust project. Once it is complete it will
+be the recommended way to install Rust and www.rust-lang.org will be
+updated to reflect that.
+
+### How is this related to multirust?
 
 rustup is the successor to [multirust]. rustup began as multirust-rs,
 a rewrite of multirust from shell script to Rust, by [Diggory Blake],

diff --git a/www/index.html b/www/index.html
@@ -2,7 +2,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>rustup.rs - Update your Rust</title>
+  <title>rustup.rs - The Rust toolchain installer</title>
   <meta name="keywords" content="Rust, Rust programming language, rustlang, rust-lang, Mozilla Rust, rustup">
   <meta name="description" content="The Rust toolchain installer">
 
@@ -13,25 +13,30 @@
 
 <body id="idx">
 
+<a id="platform-button" style="display: none;" href="#">
+  click to cycle platforms
+</a>
+
 <p id="pitch">
-  This is the ultimate way to install<br/>the systems programming language
+  <em>rustup</em> is the ultimate way to install<br/>
+  the systems programming language
   <a href="https://www.rust-lang.org">Rust</a>
 </p>
 
-<div id="platform-instructions-unix" style="display: none;">
+<div id="platform-instructions-unix" class="instructions" style="display: none;">
   <p>Run the following in your terminal, then follow the onscreen instructions.</p>
   <pre>curl https://sh.rustup.rs -sSf | sh</pre>
 </div>
 
-<div id="platform-instructions-win" style="display: none;">
+<div id="platform-instructions-win" class="instructions" style="display: none;">
   <p>
     Download and run
     <a href="https://win.rustup.rs">rustup&#x2011;init.exe</a>
     then follow the onscreen instructions.
   </p>
 </div>
 
-<div id="platform-instructions-android" style="display: none;">
+<div id="platform-instructions-android" class="instructions" style="display: none;">
   <p>It looks like you are running Android.</p>
   <p>
     rustup does not run on Android directly (yet),
@@ -44,8 +49,8 @@
   </p>
 </div>
 
-<div id="platform-instructions-unknown">
-  <p><em>I don't recognize your platform.</em></p>
+<div id="platform-instructions-unknown" class="instructions" style="display: none;">
+  <p>I don't recognize your platform.</p>
   <p>
     rustup runs on Windows, Linux, Mac OS X, FreeBSD and NetBSD. If
     you are on one of these platforms and are seeing this then either
@@ -54,17 +59,34 @@
   </p>
 </div>
 
-<div id="alternate">
-  <a href="https://github.com/rust-lang-nursery/rustup.rs/#other-installation-methods">Additional installation options</a>.
+<div id="platform-instructions-default" class="instructions">
+  <div>
+    <p>If you are running Unix,<br/>run the following in your terminal, then follow the onscreen instructions.</p>
+    <pre>curl https://sh.rustup.rs -sSf | sh</pre>
+  </div>
+
+  <hr/>
+
+  <div>
+    <p>
+      If you are running Windows,<br/>download and run
+      <a href="https://win.rustup.rs">rustup&#x2011;init.exe</a>
+      then follow the onscreen instructions.
+    </p>
+  </div>
 </div>
 
-<p id="help">
-  Need help?<br/><a href="https://client00.chat.mibbit.com/?server=irc.mozilla.org&channel=%23rust-beginners">Ask on #rust-beginners</a>.
+<p>
+  Need help? <a href="https://client00.chat.mibbit.com/?server=irc.mozilla.org&channel=%23rust-beginners">Ask on #rust-beginners</a>.
 </p>
 
 <p id="about">
-  rustup is an official Rust project.</br>
-  <a href="https://github.com/rust-lang-nursery/rustup.rs/blob/master/README.md">Read more about it</a>.
+  <img src="https://www.rust-lang.org/logos/rust-logo-blk.svg" alt="Rust" />
+  rustup is an official Rust project.
+  <br/>
+  <a href="https://github.com/rust-lang-nursery/rustup.rs/#other-installation-methods">other installation options</a>
+  &nbsp;&middot;&nbsp;
+  <a href="https://github.com/rust-lang-nursery/rustup.rs">about rustup</a>
 </p>
 
 <script type="text/javascript" src="rustup.js"></script>
diff --git a/www/rustup.css b/www/rustup.css
@@ -1,98 +1,120 @@
-@import url(https://fonts.googleapis.com/css?family=Cutive+Mono:400);
+@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300);
+@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400);
+@import url(https://fonts.googleapis.com/css?family=Fira+Sans:500);
+@import url(https://fonts.googleapis.com/css?family=Work+Sans:500);
 @import url(https://fonts.googleapis.com/css?family=Work+Sans:700);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:500);
+@import url(https://fonts.googleapis.com/css?family=Inconsolata:400);
 
 body {
-    margin-top: 3em;
-    background-color: #343838;
-    color: white;
-    font-family: "Cutive Mono", monospace;
-    font-weight: 400;
-    font-size: 20pt;
+    margin-top: 2em;
+    background-color: white;
+    color: #515151;
+    font-family: "Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-weight: 300;
+    font-size: 25px;
 }
 
 pre {
-    font-family: "Source Code Pro", monospace;
-    font-weight: 500;
-}
-
-body#idx p {
-    text-shadow: 2px 2px #242828;
+    font-family: Inconsolata,Menlo,Monaco,Consolas,"Courier New",monospace;
+    font-weight: 400;
 }
 
 body#idx #pitch > a {
-    margin-top: 0.3em;
-    margin-bottom: 0.3em;
-    display: block;
-    font-family: "Work Sans", monospace;
-    font-variant: small-caps;
-    font-size: 300%;
-    font-weight: 700;
-    text-shadow: 4px 3px #242828;
-    text-transform: lowercase;
-    letter-spacing: 0.2em;
+    font-weight: 500;
+    line-height: 2em;
 }
 
 a {
-    color: #70EFFC;
+    color: #428bca;
     text-decoration: none;
 }
 
-body#idx a {
-    text-shadow: 2px 2px #242828;
+a:hover {
+    color: rgb(42, 100, 150);
 }
 
 body#idx > * {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
-    width: 25em;;
+    width: 25em;
 }
 
 body#idx > #pitch {
     width: 30em;
 }
 
+#pitch em {
+    font-style: normal;
+    font-weight: 400;
+}
+
 body#idx p {
     margin-top: 2em;
     margin-bottom: 2em;
 }
 
-body#idx > #platform-instructions-unix {
+.instructions {
+    background-color: rgb(250, 250, 250);
     margin-left: auto;
     margin-right: auto;
-    padding-bottom: 1em;
     width: 30em;
+    text-align: center;
+    border-radius: 3px;
+    border: 1px solid rgb(204, 204, 204);
+    box-shadow: 0px 1px 4px 0px rgb(204, 204, 204);
 }
 
-#platform-instructions-unix > * {
+.instructions > * {
+    width: 22em;
     margin-left: auto;
     margin-right: auto;
-    width: 25em;;
 }
 
-#platform-instructions-unix > pre {
+hr {
+    margin-top: 2em;
+    margin-bottom: 2em;
+}
+
+#platform-instructions-unix > pre,
+#platform-instructions-default > div > pre {
+    background-color: #515151;
+    color: white;
     margin-left: auto;
     margin-right: auto;
     padding-top: 1em;
     padding-bottom: 1em;
-    width: 30em;
-    background-color: #D0FFFF;
-    color: #002F3B;
     text-align: center;
     border-radius: 3px;
-    box-shadow: inset 0px 0px 10px 0px #70EFFC;
+    box-shadow: inset 0px 0px 20px 0px #333333;
 }
 
-#platform-instructions-win a {
+#platform-instructions-win a,
+#platform-instructions-default a {
     display: block;
     padding-top: 0.4em;
     padding-bottom: 0.6em;
-    font-family: "Source Code Pro", monospace;
+    font-family: "Work Sans", "Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+}
+
+#about {
+    font-size: 16px;
+    line-height: 2em;
 }
 
-#warning {
-    color: red;
-    font-family: "Work Sans", monospace;
+#about > img {
+    width: 30px;
+    height: 30px;
+    transform: translateY(11px);
 }
 
+#platform-button {
+    background-color: #515151;
+    color: white;
+    width: 10em;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 1em;
+}
diff --git a/www/rustup.js b/www/rustup.js
@@ -1,5 +1,12 @@
+var platform_override = null;
+
 function detect_platform() {
     "use strict";
+
+    if (platform_override) {
+	return platform_override;
+    }
+
     var os = "unknown";
 
     if (navigator.platform == "Linux x86_64") {os = "unix";}
@@ -25,23 +32,76 @@ function detect_platform() {
     return os;
 }
 
-(function () {
+function adjust_for_platform() {
     "use strict";
+
     var platform = detect_platform();
 
     var unix_div = document.getElementById("platform-instructions-unix");
     var win_div = document.getElementById("platform-instructions-win");
     var android_div = document.getElementById("platform-instructions-android");
     var unknown_div = document.getElementById("platform-instructions-unknown");
+    var default_div = document.getElementById("platform-instructions-default");
+
+    unix_div.style.display = "none";
+    win_div.style.display = "none";
+    android_div.style.display = "none";
+    unknown_div.style.display = "none";
+    default_div.style.display = "none";
 
     if (platform == "unix") {
 	unix_div.style.display = "block";
-	unknown_div.style.display = "none";
     } else if (platform == "win") {
 	win_div.style.display = "block";
-	unknown_div.style.display = "none";
     } else if (platform == "android") {
 	android_div.style.display = "block";
-	unknown_div.style.display = "none";
+    } else if (platform == "unknown") {
+	unknown_div.style.display = "block";
+    } else {
+	default_div.style.display = "block";
+    }
+}
+
+function cycle_platform() {
+    if (platform_override == null) {
+	platform_override = "default";
+    } else if (platform_override == "default") {
+	platform_override = "unknown";
+    } else if (platform_override == "unknown") {
+	platform_override = "win";
+    } else if (platform_override == "win") {
+	platform_override = "unix";
+    } else if (platform_override == "unix") {
+	platform_override = "android";
+    } else if (platform_override == "android") {
+	platform_override = "default";
     }
+    adjust_for_platform();
+}
+
+function set_up_cycle_button() {
+    var cycle_button = document.getElementById("platform-button");
+    cycle_button.onclick = cycle_platform;
+
+    var key="test";
+    var idx=0;
+
+    document.onkeypress = function(event) {
+	if (event.key == key[idx]) {
+	    idx += 1;
+
+	    if (idx == key.length) {
+		cycle_button.style.display = "block";
+	    }
+	} else if (event.key == key[0]) {
+	    idx = 1;
+	} else {
+	    idx = 0;
+	}
+    };
+}
+
+(function () {
+    adjust_for_platform();
+    set_up_cycle_button();
 }());