Merge pull request #785 from andirotter/master

Fix post-skeleton styling debts in /install

Author: skade

src/styles/app.scss

@@ -8,6 +8,7 @@ $red: #C14566;
 $green: #398277;
 $purple: #403D58;
 $yellow: #FFD45E;
+$border-radius: 4px;
 
 html {
   font-size: 62.5%
@@ -43,6 +44,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;
@@ -94,7 +119,23 @@ header h1 {
   font-size: 8rem;
   margin-bottom: 0;
   margin-top: 0;
-  line-height: 1.2
+  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 {
@@ -135,6 +176,11 @@ section {
       line-height: 1.25;
     }
   }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 30px;
+  }
 }
 
 ul {
@@ -216,9 +262,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();
   }
 }
 
@@ -240,11 +285,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();
   }
 }
 
@@ -267,9 +311,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();
   }
 }
 
@@ -293,9 +336,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();
   }
 }
 

templates/components/tools/rustup.hbs

@@ -1,15 +1,15 @@
 <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>
     <a href="https://win.rustup.rs" class="button button-secondary">rustup‑init.exe</a>
     <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>