Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1d7b674
chore: remove the old pitch first
Rustin170506 Nov 19, 2024
963ac87
Add the main element and header to setup new layout
Rustin170506 Nov 19, 2024
acb2eed
feat: use the color form the rust website for tags, hr and copy button
Rustin170506 Nov 19, 2024
d099a22
feat: make the box white
Rustin170506 Nov 19, 2024
0fdd548
fix: make sure no overflow on small screens
Rustin170506 Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added www/fonts/AlfaSlabOne-Regular.woff
View file
Open in desktop
Binary file not shown.
Binary file added www/fonts/AlfaSlabOne-Regular.woff2
View file
Open in desktop
Binary file not shown.
20 changes: 9 additions & 11 deletions www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,17 @@

<body id="idx">

<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>
<a id="platform-button" class="display-none" href="#">
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>

<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">
Expand Down Expand Up @@ -128,7 +129,6 @@
</div>

<!-- duplicate the default cross-platform instructions -->
<div>
<p>If you are running Unix,<br/>run the following in your terminal, then follow the onscreen instructions.</p>
<div class="copy-container">
<pre class="rustup-command">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</pre>
Expand All @@ -141,7 +141,6 @@
<div id="copy-status-message-unknown" class="copy-button-text">Copied!</div>
</button>
</div>
</div>

<hr/>

Expand Down Expand Up @@ -176,7 +175,6 @@
</div>

<div id="platform-instructions-default" class="instructions">
<div>
<p>To install Rust, if you are running Unix,<br/>run the following
in your terminal, then follow the onscreen instructions.</p>
<div class="copy-container">
Expand All @@ -190,7 +188,6 @@
<div id="copy-status-message-default" class="copy-button-text">Copied!</div>
</button>
</div>
</div>

<hr/>

Expand Down Expand Up @@ -223,7 +220,7 @@
</div>
</div>

<p>
<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>
Expand All @@ -238,5 +235,6 @@
&nbsp;&middot;&nbsp;
<a href="https://rust-lang.github.io/rustup/">about rustup</a>
</p>
</main>

<script src="rustup.js"></script>
80 changes: 53 additions & 27 deletions www/rustup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,15 @@
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;
Expand All @@ -45,34 +54,45 @@ 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;
}

a {
color: #428bca;
text-decoration: none;
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;
}

a:hover {
color: rgb(42, 100, 150);
header > div > h2 {
color: black;
font-size: 2rem;
font-weight: 300;
}

body#idx > * {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 35em;
a {
color: #0b7261;
text-decoration: underline;
}

body#idx > #pitch {
width: 35rem;
a:hover {
color: #0d8b75;
text-decoration: underline;
}

#pitch em {
font-style: normal;
font-weight: 400;
main {
width: 80%;
max-width: 1200px;
padding: 0 20px;
margin-left: auto;
margin-right: auto;
}

body#idx p {
Expand All @@ -85,7 +105,6 @@ body#idx p.other-platforms-help {
}

.instructions {
background-color: rgb(250, 250, 250);
margin-left: auto;
margin-right: auto;
text-align: center;
Expand All @@ -95,12 +114,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;
}
Expand All @@ -111,29 +130,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;
}

.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,
Expand All @@ -144,6 +162,8 @@ hr {
#platform-instructions-unknown div.copy-container {
display: flex;
align-items: center;
width: 90%;
justify-content: center;
}

#platform-instructions-unix button.copy-button,
Expand Down Expand Up @@ -183,7 +203,7 @@ hr {
transition: opacity 0.2s ease-in-out;
opacity: 0;
font-size: 10px;
color: green;
color: #0b7261;
width: 41px;
height: 15px;
position: relative;
Expand All @@ -209,9 +229,15 @@ hr {
line-height: 2rem;
}

#help {
font-size: 20px;
text-align: center;
}

#about {
font-size: 16px;
line-height: 2em;
text-align: center;
}

#about > img {
Expand Down