Improve spacing consistency

css/index.css

@@ -31,6 +31,7 @@
  body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; }
  ol, ul { list-style: none; }
  img { max-width: 100%; height: auto; }
+ span { white-space: pre; } /* preserve whitespace in spans */
 
 
 /********************************************************************************
@@ -346,9 +347,6 @@ aside.tip::before {
 
 #small-web h2, #highlights h2, main h2 {
   text-align: center;
-/*👉  margin-top: 1.5em;
-  margin-bottom: 1em;
-👈*/
   margin-top: 4rem;
   margin-bottom: 4rem;
 
@@ -403,23 +401,26 @@ aside.tip::before {
  *                                                                              *
  ********************************************************************************/
 
-#highlights {
-  /* margin-top: -5em; */
-}
-
 #highlights ul {
   display: grid;
   grid-template-columns: 47.5% 47.5%;
   grid-column-gap: 5%;
-
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: 3em;
 }
 
 #highlights li {
   font-size: 1.5em;
   list-style-type: none;
+  margin-bottom: 0.5em;
+}
+
+/* Remove all margins from elements in the last row of highlights */
+#highlights li:nth-last-of-type(2),
+#highlights li:last-of-type,
+#highlights li:nth-last-of-type(2) p,
+#highlights li:last-of-type p {
+  margin-bottom: 0;
 }
 
 #highlights li p {
@@ -679,4 +680,15 @@ main li {
     grid-template-columns: 100%;
   }
 
+  /* Restore the bottom margins on the next-to-last highlight. */
+  #highlights li:nth-last-of-type(2) {
+    margin-bottom: 0.5em;
+  }
+
+  #highlights li:nth-last-of-type(2) p {
+    margin-bottom: 1em;
+  }
+}
+
+
 }

index.html

@@ -82,20 +82,20 @@
 
     <h2>Get started in 30 seconds.</h2>
 
-    <p>Fire up a terminal on Linux/macOS (only use Windows Terminal on Windows) and follow along.</p>
-
     <aside id='switch-auto-detect'></aside>
 
-    <aside id='copy-tip' class='tip hidden'><h3>Tip</h3><p>Click on the code samples to copy them to the clipboard.</p></aside>
-
     <ol id='install'>
       <li>
         <h3>Install Site.js.</h3>
+        <p>Fire up a terminal on Linux/macOS (only use Windows Terminal on Windows) and follow along.</p>
         <p>The installation script downloads the correct Site.js binary for your platform and places it on your path</p>
         <aside>
           <p>(<strong>Make sure you understand what a script does before piping it into your shell.</strong> View the source of the <a href="https://should-i-pipe.it/https://sitejs.org/install">Linux and macOS</a><span class='no-js'> and </span><a href="https://should-i-pipe.it/https://sitejs.org/install.txt">Windows</a><span class='no-js'> scripts.</span>)</p>
         </aside>
 
+        <aside id='copy-tip' class='tip hidden'><h3>Tip</h3><p>Click on the code samples to copy them to the clipboard.</p></aside>
+
+
         <h4 class='no-js'>Linux</h4>
         <pre class='linux'><code class='language-bash'>wget -qO- https://sitejs.org/install | bash</code></pre>