index: Use fluid space scale

Author: Turbo87

app/styles/index.module.css

@@ -1,27 +1,11 @@
-.title-header {
-    text-align: center;
+.hero-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-s);
     border-bottom: 5px solid var(--gray-border);
-    margin-top: 25px;
-    padding-bottom: 40px;
-
-    @media only screen and (max-width: 570px) {
-        margin-top: 0;
-    }
-
-    h1 {
-        font-size: 50px;
-        @media only screen and (max-width: 370px) {
-            font-size: 40px;
-        }
-    }
-
-    .links a:not(:first-child) {
-        margin: 0 20px;
-        @media only screen and (max-width: 570px) {
-            clear: both;
-            margin: 20px 0 0 0;
-        }
-    }
+    margin-top: var(--space-s);
+    padding-bottom: var(--space-l);
 }
 
 .hero-button {
@@ -33,50 +17,47 @@
 }
 
 .blurb {
-    margin: 30px 0 40px 0;
+    margin: var(--space-l) var(--space-s);
     display: flex;
+    gap: var(--space-l);
 
-    .intro { flex: 6; line-height: 25px; padding: 10px;}
-
-    .stats {
-        flex: 4;
-        display: flex;
+    @media only screen and (max-width: 650px) {
         flex-direction: column;
+        align-items: center;
+    }
+}
 
-        padding: 10px;
+.intro {
+    flex: 6;
+    line-height: 1.5;
+}
 
-        .crates { margin-top: 16px; }
-    }
+.stats {
+    flex: 4;
+    display: flex;
+    flex-direction: column;
 
-    @media only screen and (max-width: 530px) {
-        flex-direction: column;
-        .stats {
-            border: none;
-            margin: 32px auto 0;
-        }
+    > * + * {
+        margin-top: var(--space-s);
     }
 }
 
 .lists {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: left;
-
-    > section {
-        margin: 0;
-        padding: 0 15px;
-        width: 33.33%;
-        @media only screen and (max-width: 750px) {
-            width: 50%;
-        }
-        @media only screen and (max-width: 550px) {
-            width: 100%;
-        }
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: var(--space-s);
+    padding: 0 var(--space-s);
+
+    @media only screen and (max-width: 750px) {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    @media only screen and (max-width: 550px) {
+        grid-template-columns: 1fr;
     }
 
     h2 {
-        font-size: 105%;
-        line-height: 20px;
+        font-size: 1.05rem;
     }
 }
 
@@ -90,15 +71,15 @@
 }
 
 .error-message {
-    line-height: 25px;
+    line-height: 1.5;
 }
 
 .try-again-button {
     composes: yellow-button from './shared/buttons.module.css';
     align-self: center;
-    margin: 20px 0;
+    margin: var(--space-s) 0;
 
     .spinner {
-        margin-left: 7px;
+        margin-left: var(--space-2xs);
     }
 }

app/templates/index.hbs

@@ -1,15 +1,13 @@
-<div local-class='title-header'>
-  <div local-class='links'>
-    <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" local-class="hero-button" data-test-install-cargo-link>
-      {{svg-jar "download-arrow" local-class="icon"}}
-      Install Cargo
-    </a>
+<div local-class="hero-buttons">
+  <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" local-class="hero-button" data-test-install-cargo-link>
+    {{svg-jar "download-arrow" local-class="icon"}}
+    Install Cargo
+  </a>
 
-    <a href='https://doc.rust-lang.org/cargo/guide/' local-class="hero-button">
-      {{svg-jar "flag" local-class="icon"}}
-      Getting Started
-    </a>
-  </div>
+  <a href='https://doc.rust-lang.org/cargo/guide/' local-class="hero-button">
+    {{svg-jar "flag" local-class="icon"}}
+    Getting Started
+  </a>
 </div>
 
 <div local-class='blurb'>