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

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

Hide file tree

Showing 4 changed files with 104 additions and 44 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,19 @@
   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="get-started">
+  <div>
+    <h2>Get Started</h2>
+    <div class="highlight"></div>
+  </div>
+</div>
 <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 +230,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 +247,6 @@
   <a href="https://rust-lang.github.io/rustup/">about rustup</a>
 </p>
 
+</main>
+</body>
 <script src="rustup.js"></script>
diff --git 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,49 +33,79 @@
     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: #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);