Skip to content

Commit d2af8e2

Browse files
skadeskade
authored
Merge pull request #781 from Pjb518/master
Removes Skeleton from the Learn page and replaces the flex implementa…
2 parents 27cc0ab + 9fc1068 commit d2af8e2

File tree

3 files changed

+69
-42
lines changed

3 files changed

+69
-42
lines changed

‎src/styles/app.scss

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ html {
2222
body {
2323
font-family: $body-font;
2424
background-color: white;
25+
font-size: 1.5rem;
26+
line-height: 1.6;
2527

2628
/* Ensure the footer is always at the bottom of the screen */
2729
min-height: 100vh;
@@ -69,6 +71,10 @@ button {
6971
font-size: 0.8em;
7072
}
7173

74+
.button.button-secondary--no-skeleton {
75+
margin-bottom: 0;
76+
}
77+
7278
code.code-header {
7379
background-color: rgba(127, 127, 127, 0.25);
7480
font-size: 2rem;
@@ -80,12 +86,15 @@ header h1, section h2 {
8086
font-family: $header-font;
8187
z-index: 999999;
8288
position: relative;
89+
letter-spacing: 1px;
90+
font-weight: 300;
8391
}
8492

8593
header h1 {
8694
font-size: 8rem;
8795
margin-bottom: 0;
8896
margin-top: 0;
97+
line-height: 1.2
8998
}
9099

91100
header .button.button-download {
@@ -122,6 +131,8 @@ section {
122131
margin: 0;
123132
padding: 0;
124133
letter-spacing: 1px;
134+
font-size: 4.2rem;
135+
line-height: 1.25;
125136
}
126137
}
127138
}
@@ -314,6 +325,7 @@ header h1 {
314325
left: -10px;
315326
width: 120%;
316327
max-width: 90vw;
328+
line-height: 1.6;
317329
}
318330

319331
footer {
@@ -328,6 +340,11 @@ footer {
328340
ul {
329341
list-style-type: none;
330342
padding-left: 0;
343+
margin-top: 0;
344+
}
345+
346+
li {
347+
margin-bottom: 1rem;
331348
}
332349

333350
a {
@@ -344,6 +361,8 @@ footer {
344361
footer h4 {
345362
font-size: 1.2em;
346363
font-weight: 800;
364+
margin-top: 0;
365+
margin-bottom: 2rem;
347366
}
348367

349368
footer img {
@@ -557,6 +576,10 @@ blockquote::before {
557576
width: 1px;
558577
}
559578

579+
.flex-grow {
580+
flex-grow: 1;
581+
}
582+
560583
.flex {
561584
&.vertical {
562585
flex-direction: column;
@@ -594,10 +617,6 @@ blockquote::before {
594617
font-size: 4rem;
595618
}
596619

597-
h2 {
598-
font-size: 3rem;
599-
}
600-
601620
.highlight {
602621
height: 20px;
603622
top: -20px;
@@ -620,6 +639,10 @@ blockquote::before {
620639
top: 10px;
621640
bottom: 30px;
622641
}
642+
643+
h2 {
644+
font-size: 3rem;
645+
}
623646
}
624647
}
625648

‎templates/components/footer.hbs

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<footer>
22
<div class="w-100 mw-none ph3 mw8-m mw9-l center f3">
3-
<div class="row">
4-
<div class="four columns mt3 mt0-l" id="get-help">
3+
<div class="flex flex-column flex-row-ns pv0-l">
4+
<div class="flex flex-column mw8 w-100 measure-wide-l pv2 pv5-m pv2-ns ph4-m ph4-l" id="get-help">
55
<h4>Get help!</h4>
66
<ul>
77
<li><a href="https://doc.rust-lang.org">Documentation</a></li>
@@ -15,7 +15,7 @@
1515
</select>
1616
</div>
1717
</div>
18-
<div class="four columns mt3 mt0-l">
18+
<div class="flex flex-column mw8 w-100 measure-wide-l pv2 pv5-m pv2-ns ph4-m ph4-l">
1919
<h4>Terms and policies</h4>
2020
<ul>
2121
<li><a href="/policies/code-of-conduct">Code of Conduct</a></li>
@@ -25,12 +25,14 @@
2525
<li><a href="/policies">All Policies</a></li>
2626
</ul>
2727
</div>
28-
<div class="four columns mt3 mt0-l">
28+
<div class="flex flex-column mw8 w-100 measure-wide-l pv2 pv5-m pv2-ns ph4-m ph4-l">
2929
<h4>Social</h4>
30-
<a href="https://twitter.com/rustlang"><img src="/static/images/twitter.svg" alt="twitter logo" title="Twitter"/></a>
31-
<a href="https://www.youtube.com/channel/UCaYhcUwRBNscFNUKTjgPFiA"><img style="padding-top: 6px; padding-bottom:6px" src="/static/images/youtube.svg" alt="youtube logo" title="YouTube"/></a>
32-
<a href="https://discord.gg/rust-lang"><img src="/static/images/discord.svg" alt="discord logo" title="Discord"/></a>
33-
<a href="https://github.com/rust-lang"><img src="/static/images/github.svg" alt="github logo" title="GitHub"/></a>
30+
<div class="flex flex-row flex-wrap">
31+
<a href="https://twitter.com/rustlang"><img src="/static/images/twitter.svg" alt="twitter logo" title="Twitter"/></a>
32+
<a href="https://www.youtube.com/channel/UCaYhcUwRBNscFNUKTjgPFiA"><img style="padding-top: 6px; padding-bottom:6px" src="/static/images/youtube.svg" alt="youtube logo" title="YouTube"/></a>
33+
<a href="https://discord.gg/rust-lang"><img src="/static/images/discord.svg" alt="discord logo" title="Discord"/></a>
34+
<a href="https://github.com/rust-lang"><img src="/static/images/github.svg" alt="github logo" title="GitHub"/></a>
35+
</div>
3436
</div>
3537

3638
</div>

‎templates/learn/index.hbs

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<section class="flex flex-column flex-row-l pv0-l">
1616
<div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pb4 pb5-m pb6-ns ph4-l">
1717
<div class="v-top pl4 pl0-l pt3-l measure-wide-l flex-l flex-column-l flex-auto-l">
18-
<p>Affectionately nicknamed “the book,” <cite>The Rust Programming
18+
<p class="flex-grow">Affectionately nicknamed “the book,” <cite>The Rust Programming
1919
Language</cite> will give you an overview of the language from first
2020
principles. You’ll build a few projects along the way, and by the end,
2121
you’ll have a solid grasp of the language.</p>
@@ -24,15 +24,15 @@
2424
</div>
2525
<div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pb4 pb5-m pb6-ns ph4-l">
2626
<div class="v-top pl4 pl0-l pt3-l measure-wide-l flex-l flex-column-l flex-auto-l">
27-
<p>Alternatively, Rustlings guides you through downloading and setting up the
27+
<p class="flex-grow">Alternatively, Rustlings guides you through downloading and setting up the
2828
Rust toolchain, and teaches you the basics of reading and writing
2929
Rust syntax, on the command line. It's an alternative to Rust by Example that works with your own environment.</p>
3030
<a class="button button-secondary" href="https://github.com/rust-lang/rustlings/">Do the Rustlings course!</a>
3131
</div>
3232
</div>
3333
<div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pb4 pb5-m pb6-ns ph4-l">
3434
<div class="v-top pl4 pl0-l pt3-l measure-wide-l flex-l flex-column-l flex-auto-l">
35-
<p>If reading multiple hundreds of pages about a language isn’t your
35+
<p class="flex-grow">If reading multiple hundreds of pages about a language isn’t your
3636
style, then Rust By Example has you covered. While the book talks
3737
about code with a lot of words, RBE shows off a bunch of code, and
3838
keeps the talking to a minimum. It also includes exercises!</p>
@@ -57,51 +57,53 @@
5757
<code>rustup doc</code> command, which will open up these resources for
5858
you in your browser without requiring a network connection!</p>
5959

60+
{{!-- TODO: Remove button-secondary--no-skeleton once Skeleton is completely removed. --}}
61+
6062
<section class="flex flex-column">
61-
<div class="pt3 flex flex-column flex-row-l">
63+
<div class="pt3 flex flex-column flex-row-l items-center-l mb4-l">
6264
<a href="https://doc.rust-lang.org/std/index.html"
63-
class="button button-secondary mw6-l w-100">The standard library</a>
64-
<p class="pl4-l">
65+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">The standard library</a>
66+
<p class="pl4-l ma0-l mt1 mb3">
6567
Comprehensive guide to the Rust standard library APIs.
6668
</p>
6769
</div>
6870

69-
<div class="pt4 pt3-l flex flex-column flex-row-l">
71+
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
7072
<a href="https://doc.rust-lang.org/edition-guide/index.html"
71-
class="button button-secondary mw6-l w-100">Edition Guide</a>
72-
<p class="pl4-l">
73+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">Edition Guide</a>
74+
<p class="pl4-l ma0-l mt1 mb3">
7375
Guide to the Rust editions.
7476
</p>
7577
</div>
7678

77-
<div class="pt4 pt3-l flex flex-column flex-row-l">
79+
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
7880
<a href="https://doc.rust-lang.org/cargo/index.html"
79-
class="button button-secondary mw6-l w-100">Cargo Book</a>
80-
<p class="pl4-l">
81+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">Cargo Book</a>
82+
<p class="pl4-l ma0-l mt1 mb3">
8183
A book on Rust’s package manager and build system.
8284
</p>
8385
</div>
8486

85-
<div class="pt4 pt3-l flex flex-column flex-row-l">
87+
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
8688
<a href="https://doc.rust-lang.org/rustdoc/index.html"
87-
class="button button-secondary mw6-l w-100">rustdoc Book</a>
88-
<p class="pl4-l">
89+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">rustdoc Book</a>
90+
<p class="pl4-l ma0-l mt1 mb3">
8991
Learn how to make awesome documentation for your crate.
9092
</p>
9193
</div>
9294

93-
<div class="pt4 pt3-l flex flex-column flex-row-l">
95+
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
9496
<a href="https://doc.rust-lang.org/rustc/index.html"
95-
class="button button-secondary mw6-l w-100">rustc Book</a>
96-
<p class="pl4-l">
97+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">rustc Book</a>
98+
<p class="pl4-l ma0-l mt1 mb3">
9799
Familiarize yourself with the knobs available in the Rust compiler.
98100
</p>
99101
</div>
100102

101-
<div class="pt4 pt3-l flex flex-column flex-row-l">
103+
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
102104
<a href="https://doc.rust-lang.org/error-index.html"
103-
class="button button-secondary mw6-l w-100">Compiler Error Index</a>
104-
<p class="pl4-l">
105+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">Compiler Error Index</a>
106+
<p class="pl4-l mb0 mt1 ma0-l">
105107
In-depth explanations of the errors you may see from the Rust
106108
compiler.
107109
</p>
@@ -112,32 +114,32 @@
112114
<div class="row black">
113115
<h3>Build your skills in an application domain</h3>
114116
<section class="flex flex-column">
115-
<div class="pt3 flex flex-column flex-row-l">
117+
<div class="pt3 flex flex-column flex-row-l items-center-l mb4-l">
116118
<a href="https://rust-lang-nursery.github.io/cli-wg/"
117-
class="button button-secondary mw6-l w-100">
119+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">
118120
Command Line Book
119121
</a>
120-
<p class="pl4-l">
122+
<p class="pl4-l ma0-l mt1 mb3">
121123
Learn how to build effective command line applications in Rust.
122124
</p>
123125
</div>
124126

125-
<div class="pt4 pt3-l flex flex-column flex-row-l">
127+
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
126128
<a href="https://rustwasm.github.io/docs/book/"
127-
class="button button-secondary mw6-l w-100">
129+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">
128130
WebAssembly Book
129131
</a>
130-
<p class="pl4-l">
132+
<p class="pl4-l ma0-l mt1 mb3">
131133
Use Rust to build browser-native libraries through WebAssembly.
132134
</p>
133135
</div>
134136

135-
<div class="pt4 pt3-l flex flex-column flex-row-l">
137+
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
136138
<a href="https://rust-embedded.github.io/book/"
137-
class="button button-secondary mw6-l w-100">
139+
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">
138140
Embedded Book
139141
</a>
140-
<p class="pl4-l">
142+
<p class="pl4-l mb0 mt1 ma0-l">
141143
Become proficient with Rust for Microcontrollers and other
142144
embedded systems.
143145
</p>

0 commit comments

Comments
 (0)