Skip to content

Removes Skeleton from the Learn page and replaces the flex implementa… #781

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 3 commits into from
May 21, 2019
Merged

Removes Skeleton from the Learn page and replaces the flex implementa… #781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4af66f0
Removes Skeleton from the Learn page and replaces the flex implementa…
Pjb518 May 20, 2019
d6a1c82
Adds Skeleton vedor code back into main.rs. Adds custom CSS to correc…
Pjb518 May 20, 2019
9fc1068
Increases the spacing between buttons on the Learn Rust page to bette…
Pjb518 May 20, 2019
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
31 changes: 27 additions & 4 deletions src/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ html {
body {
font-family: $body-font;
background-color: white;
font-size: 1.5rem;
line-height: 1.6;

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

.button.button-secondary--no-skeleton {
margin-bottom: 0;
}

code.code-header {
background-color: rgba(127, 127, 127, 0.25);
font-size: 2rem;
Expand All @@ -80,12 +86,15 @@ header h1, section h2 {
font-family: $header-font;
z-index: 999999;
position: relative;
letter-spacing: 1px;
font-weight: 300;
}

header h1 {
font-size: 8rem;
margin-bottom: 0;
margin-top: 0;
line-height: 1.2
}

header .button.button-download {
Expand Down Expand Up @@ -122,6 +131,8 @@ section {
margin: 0;
padding: 0;
letter-spacing: 1px;
font-size: 4.2rem;
line-height: 1.25;
}
}
}
Expand Down Expand Up @@ -314,6 +325,7 @@ header h1 {
left: -10px;
width: 120%;
max-width: 90vw;
line-height: 1.6;
}

footer {
Expand All @@ -328,6 +340,11 @@ footer {
ul {
list-style-type: none;
padding-left: 0;
margin-top: 0;
}

li {
margin-bottom: 1rem;
}

a {
Expand All @@ -344,6 +361,8 @@ footer {
footer h4 {
font-size: 1.2em;
font-weight: 800;
margin-top: 0;
margin-bottom: 2rem;
}

footer img {
Expand Down Expand Up @@ -557,6 +576,10 @@ blockquote::before {
width: 1px;
}

.flex-grow {
flex-grow: 1;
}

.flex {
&.vertical {
flex-direction: column;
Expand Down Expand Up @@ -594,10 +617,6 @@ blockquote::before {
font-size: 4rem;
}

h2 {
font-size: 3rem;
}

.highlight {
height: 20px;
top: -20px;
Expand All @@ -620,6 +639,10 @@ blockquote::before {
top: 10px;
bottom: 30px;
}

h2 {
font-size: 3rem;
}
}
}

Expand Down
18 changes: 10 additions & 8 deletions templates/components/footer.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<footer>
<div class="w-100 mw-none ph3 mw8-m mw9-l center f3">
<div class="row">
<div class="four columns mt3 mt0-l" id="get-help">
<div class="flex flex-column flex-row-ns pv0-l">
<div class="flex flex-column mw8 w-100 measure-wide-l pv2 pv5-m pv2-ns ph4-m ph4-l" id="get-help">
<h4>Get help!</h4>
<ul>
<li><a href="https://doc.rust-lang.org">Documentation</a></li>
Expand All @@ -15,7 +15,7 @@
</select>
</div>
</div>
<div class="four columns mt3 mt0-l">
<div class="flex flex-column mw8 w-100 measure-wide-l pv2 pv5-m pv2-ns ph4-m ph4-l">
<h4>Terms and policies</h4>
<ul>
<li><a href="/policies/code-of-conduct">Code of Conduct</a></li>
Expand All @@ -25,12 +25,14 @@
<li><a href="/policies">All Policies</a></li>
</ul>
</div>
<div class="four columns mt3 mt0-l">
<div class="flex flex-column mw8 w-100 measure-wide-l pv2 pv5-m pv2-ns ph4-m ph4-l">
<h4>Social</h4>
<a href="https://twitter.com/rustlang"><img src="/static/images/twitter.svg" alt="twitter logo" title="Twitter"/></a>
<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>
<a href="https://discord.gg/rust-lang"><img src="/static/images/discord.svg" alt="discord logo" title="Discord"/></a>
<a href="https://github.com/rust-lang"><img src="/static/images/github.svg" alt="github logo" title="GitHub"/></a>
<div class="flex flex-row flex-wrap">
<a href="https://twitter.com/rustlang"><img src="/static/images/twitter.svg" alt="twitter logo" title="Twitter"/></a>
<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>
<a href="https://discord.gg/rust-lang"><img src="/static/images/discord.svg" alt="discord logo" title="Discord"/></a>
<a href="https://github.com/rust-lang"><img src="/static/images/github.svg" alt="github logo" title="GitHub"/></a>
</div>
</div>

</div>
Expand Down
62 changes: 32 additions & 30 deletions templates/learn/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<section class="flex flex-column flex-row-l pv0-l">
<div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pb4 pb5-m pb6-ns ph4-l">
<div class="v-top pl4 pl0-l pt3-l measure-wide-l flex-l flex-column-l flex-auto-l">
<p>Affectionately nicknamed “the book,” <cite>The Rust Programming
<p class="flex-grow">Affectionately nicknamed “the book,” <cite>The Rust Programming
Language</cite> will give you an overview of the language from first
principles. You’ll build a few projects along the way, and by the end,
you’ll have a solid grasp of the language.</p>
Expand All @@ -24,15 +24,15 @@
</div>
<div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pb4 pb5-m pb6-ns ph4-l">
<div class="v-top pl4 pl0-l pt3-l measure-wide-l flex-l flex-column-l flex-auto-l">
<p>Alternatively, Rustlings guides you through downloading and setting up the
<p class="flex-grow">Alternatively, Rustlings guides you through downloading and setting up the
Rust toolchain, and teaches you the basics of reading and writing
Rust syntax, on the command line. It's an alternative to Rust by Example that works with your own environment.</p>
<a class="button button-secondary" href="https://github.com/rust-lang/rustlings/">Do the Rustlings course!</a>
</div>
</div>
<div class="flex flex-row flex-column-l justify-between-l mw8 measure-wide-l pb4 pb5-m pb6-ns ph4-l">
<div class="v-top pl4 pl0-l pt3-l measure-wide-l flex-l flex-column-l flex-auto-l">
<p>If reading multiple hundreds of pages about a language isn’t your
<p class="flex-grow">If reading multiple hundreds of pages about a language isn’t your
style, then Rust By Example has you covered. While the book talks
about code with a lot of words, RBE shows off a bunch of code, and
keeps the talking to a minimum. It also includes exercises!</p>
Expand All @@ -57,51 +57,53 @@
<code>rustup doc</code> command, which will open up these resources for
you in your browser without requiring a network connection!</p>

{{!-- TODO: Remove button-secondary--no-skeleton once Skeleton is completely removed. --}}

<section class="flex flex-column">
<div class="pt3 flex flex-column flex-row-l">
<div class="pt3 flex flex-column flex-row-l items-center-l mb4-l">
<a href="https://doc.rust-lang.org/std/index.html"
class="button button-secondary mw6-l w-100">The standard library</a>
<p class="pl4-l">
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">The standard library</a>
<p class="pl4-l ma0-l mt1 mb3">
Comprehensive guide to the Rust standard library APIs.
</p>
</div>

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

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

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

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

<div class="pt4 pt3-l flex flex-column flex-row-l">
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
<a href="https://doc.rust-lang.org/error-index.html"
class="button button-secondary mw6-l w-100">Compiler Error Index</a>
<p class="pl4-l">
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">Compiler Error Index</a>
<p class="pl4-l mb0 mt1 ma0-l">
In-depth explanations of the errors you may see from the Rust
compiler.
</p>
Expand All @@ -112,32 +114,32 @@
<div class="row black">
<h3>Build your skills in an application domain</h3>
<section class="flex flex-column">
<div class="pt3 flex flex-column flex-row-l">
<div class="pt3 flex flex-column flex-row-l items-center-l mb4-l">
<a href="https://rust-lang-nursery.github.io/cli-wg/"
class="button button-secondary mw6-l w-100">
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">
Command Line Book
</a>
<p class="pl4-l">
<p class="pl4-l ma0-l mt1 mb3">
Learn how to build effective command line applications in Rust.
</p>
</div>

<div class="pt4 pt3-l flex flex-column flex-row-l">
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
<a href="https://rustwasm.github.io/docs/book/"
class="button button-secondary mw6-l w-100">
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">
WebAssembly Book
</a>
<p class="pl4-l">
<p class="pl4-l ma0-l mt1 mb3">
Use Rust to build browser-native libraries through WebAssembly.
</p>
</div>

<div class="pt4 pt3-l flex flex-column flex-row-l">
<div class="pt4 pt3-l flex flex-column flex-row-l items-center-l mb4-l">
<a href="https://rust-embedded.github.io/book/"
class="button button-secondary mw6-l w-100">
class="button button-secondary button-secondary--no-skeleton mw6-l w-100">
Embedded Book
</a>
<p class="pl4-l">
<p class="pl4-l mb0 mt1 ma0-l">
Become proficient with Rust for Microcontrollers and other
embedded systems.
</p>
Expand Down