feat: align website style with www.rust-lang.org/ for consistency

Signed-off-by: Rustin170506 <[email protected]>
rust-lang · Nov 19, 2024 · 910b826 · 910b826
1 parent c8eddcb
commit 910b826
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 39 deletions.
diff --git a/www/fonts/AlfaSlabOne-Regular.woff b/www/fonts/AlfaSlabOne-Regular.woff
diff --git a/www/fonts/AlfaSlabOne-Regular.woff2 b/www/fonts/AlfaSlabOne-Regular.woff2
diff --git a/www/index.html b/www/index.html
@@ -19,12 +19,13 @@
   click or press "n" to cycle platforms
 </a>
 
-<p id="pitch">
-  <em>rustup</em> is an installer for<br/>
-  the systems programming language
-  <a href="https://www.rust-lang.org">Rust</a>
-</p>
-
+<main>
+<header>
+  <div>
+    <h1>rustup</h1>
+    <h2>An installer for the systems programming language <a href="https://www.rust-lang.org">Rust</a></h2>
+  </div>
+</header>
 <div id="platform-instructions-unix" class="instructions display-none">
   <p>Run the following in your terminal, then follow the onscreen instructions.</p>
     <div class="copy-container">
@@ -223,8 +224,9 @@
   </div>
 </div>
 
-<p>
-  Need help?<br>Ask on <a href="https://discord.gg/rust-lang">#beginners in the Rust Discord</a><br>
+<p id="help">
+  Need help?<br>
+  Ask on <a href="https://discord.gg/rust-lang">#beginners in the Rust Discord</a><br>
   or in the <a href="https://users.rust-lang.org">Rust Users Forum</a>.
 </p>
 
@@ -239,4 +241,5 @@
   <a href="https://rust-lang.github.io/rustup/">about rustup</a>
 </p>
 
+</main>
 <script src="rustup.js"></script>
diff --git a/www/rustup.css b/www/rustup.css
@@ -31,49 +31,69 @@
     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 {
     font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     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 {