Removes Skeleton from the Learn page and replaces the flex implementation in the footer with Tachyon styles. Adds custom CSS code which affect the global font size, as well as letter spacing and font weight for the section and page headings sitewide.

Author: Pjb518

src/main.rs

@@ -280,7 +280,7 @@ fn concat_vendor_css(files: Vec<&str>) {
 fn main() {
     compile_sass("app");
     compile_sass("fonts");
-    concat_vendor_css(vec!["skeleton", "tachyons"]);
+    concat_vendor_css(vec!["tachyons"]);
 
     rocket::ignite()
         .attach(Template::fairing())

src/styles/app.scss

@@ -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;
@@ -80,12 +82,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 {
@@ -122,6 +127,8 @@ section {
       margin: 0;
       padding: 0;
       letter-spacing: 1px;
+      font-size: 4.2rem;
+      line-height: 1.25;
     }
   }
 }
@@ -314,6 +321,7 @@ header h1 {
   left: -10px;
   width: 120%;
   max-width: 90vw;
+  line-height: 1.6;
 }
 
 footer {
@@ -328,6 +336,11 @@ footer {
   ul {
     list-style-type: none;
     padding-left: 0;
+    margin-top: 0;
+  }
+
+  li {
+    margin-bottom: 1rem;
   }
 
   a {
@@ -344,6 +357,8 @@ footer {
 footer h4 {
   font-size: 1.2em;
   font-weight: 800;
+  margin-top: 0;
+  margin-bottom: 2rem;
 }
 
 footer img {
@@ -594,10 +609,6 @@ blockquote::before {
       font-size: 4rem;
     }
 
-    h2 {
-      font-size: 3rem;
-    }
-
     .highlight {
       height: 20px;
       top: -20px;
@@ -620,6 +631,10 @@ blockquote::before {
       top: 10px;
       bottom: 30px;
     }
+
+    h2 {
+      font-size: 3rem;
+    }
   }
 }
 

templates/components/footer.hbs

@@ -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>
@@ -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>
@@ -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>