From c394faa6eb64c3d5fa10bdda38683f91f9ec9c37 Mon Sep 17 00:00:00 2001
From: Andreas Rotter <andreas.rotter@wunderdog.fi>
Date: Tue, 21 May 2019 15:19:25 +0200
Subject: [PATCH 1/2] use tachyon class to replace skeleton behaviour

---
 templates/components/tools/rustup.hbs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/components/tools/rustup.hbs b/templates/components/tools/rustup.hbs
index 6b2bbe42e..4d60cf477 100644
--- a/templates/components/tools/rustup.hbs
+++ b/templates/components/tools/rustup.hbs
@@ -1,7 +1,7 @@
 <div class="row">
   <div id="platform-instructions-unix" class="instructions" style="display: block;">
     <p>It looks like you’re running macOS, Linux, or another Unix-like OS. To download Rustup and install Rust, run the following in your terminal, then follow the on-screen instructions.</p>
-    <pre><code>curl https://sh.rustup.rs -sSf | sh</code></pre>
+    <pre><code class="db w-100">curl https://sh.rustup.rs -sSf | sh</code></pre>
   </div>
   <div id="platform-instructions-win" class="instructions" style="display: none;">
     <p>It looks like you’re running Windows. To install Rust, download and run</p>
@@ -9,7 +9,7 @@
     <p>...then follow the onscreen instructions.</p>
     <p><b>Windows Subsystem for Linux</b></p>
     <p>If you’re a Windows Subsystem for Linux user run the following in your terminal, then follow the on-screen instructions to install Rust.</p>
-    <pre><code>curl https://sh.rustup.rs -sSf | sh</code></pre>
+    <pre><code class="db w-100">curl https://sh.rustup.rs -sSf | sh</code></pre>
   </div>
   <div id="platform-instructions-unknown" class="instructions" style="display: none;">
     <!-- unrecognized platform: ask for help -->
@@ -34,7 +34,7 @@
         To install Rust, if you are running Unix,<br>run the following
         in your terminal, then follow the on-screen instructions.
       </p>
-      <code>curl https://sh.rustup.rs -sSf | sh</code>
+      <code class="db w-100">curl https://sh.rustup.rs -sSf | sh</code>
     </div>
     <hr>
     <div>
@@ -52,7 +52,7 @@
         run the following
         in your terminal, then follow the on-screen instructions.
       </p>
-      <pre><code>curl https://sh.rustup.rs -sSf | sh</code></pre>
+      <pre><code class="db w-100">curl https://sh.rustup.rs -sSf | sh</code></pre>
     </div>
     <hr>
     <div>

From 50be576c203bb71f5bd05ddbda92eb108d4b10ad Mon Sep 17 00:00:00 2001
From: Andreas Rotter <andreas.rotter@wunderdog.fi>
Date: Tue, 21 May 2019 15:22:26 +0200
Subject: [PATCH 2/2] add missing margin & align code styling

---
 src/styles/app.scss | 69 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 8b4dde93d..6d175b0b7 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -8,6 +8,7 @@ $red: #C14566;
 $green: #398277;
 $purple: #403D58;
 $yellow: #FFD45E;
+$border-radius: 4px;
 
 html {
   font-size: 62.5%
@@ -41,6 +42,30 @@ code {
   overflow: auto;
 }
 
+@mixin code-space-full-width {
+  padding: 1rem 1.5rem;
+  margin: 0 .2rem;
+}
+
+@mixin code-space-inline {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+}
+
+@mixin code-highlight-white {
+  color: white;
+  background-color: rgba(white, 0.15);
+  border: 1px solid #E1E1E1;
+  border-radius: $border-radius;
+}
+
+@mixin code-highlight-black {
+  color: black;
+  background-color: rgba(69, 76, 82, 0.05);
+  border: 1px solid rgba(69, 76, 82, 0.25);
+  border-radius: $border-radius;
+}
+
 .button,
 button {
   display: block;
@@ -86,6 +111,23 @@ header h1 {
   font-size: 8rem;
   margin-bottom: 0;
   margin-top: 0;
+  line-height: 1.2;
+  font-weight: 300;
+}
+
+header h2 {
+  font-size: 4.2rem;
+  line-height: 1.25;
+  font-weight: 300;  
+}
+
+section h3 {
+  margin-top: 0;
+  line-height: 1.3;
+}
+
+section p, code {
+  line-height: 1.6;
 }
 
 header .button.button-download {
@@ -124,6 +166,11 @@ section {
       letter-spacing: 1px;
     }
   }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 30px;
+  }
 }
 
 ul {
@@ -205,9 +252,8 @@ a.brand {
     }
   }
   code {
-    color: white;
-    background-color: rgba(white, 0.15);
-    border: 1px solid rgba(white, 0.65);
+    @include code-highlight-white();
+    @include code-space-inline();
   }
 }
 
@@ -229,11 +275,10 @@ a.brand {
     &:hover, &:focus {
       border-color: white;
     }
-  }
+  } 
   code {
-    color: white;
-    background-color: rgba(white, 0.15);
-    border: 1px solid rgba(white, 0.65);
+    @include code-highlight-white();
+    @include code-space-full-width();
   }
 }
 
@@ -256,9 +301,8 @@ a.brand {
     }
   }
   code {
-    color: black;
-    background-color: rgba($gray, 0.05);
-    border: 1px solid rgba($gray, 0.25);
+    @include code-highlight-black();
+    @include code-space-inline();
   }
 }
 
@@ -282,9 +326,8 @@ a.brand {
     }
   }
   code {
-    color: white;
-    background-color: rgba(white, 0.15);
-    border: 1px solid rgba(white, 0.65);
+    @include code-highlight-white();
+    @include code-space-inline();
   }
 }