CrateRow: Use fluid space scale

Author: Turbo87

app/components/crate-row.hbs

@@ -24,11 +24,11 @@
   </div>
   <div local-class='stats'>
     <div local-class='downloads' data-test-downloads>
-      {{svg-jar "download"}}
+      {{svg-jar "download" local-class="download-icon"}}
       <span><abbr title="Total number of downloads">All-Time:</abbr> {{ format-num @crate.downloads }}</span>
     </div>
     <div local-class="recent-downloads" data-test-recent-downloads>
-      {{svg-jar "download"}}
+      {{svg-jar "download" local-class="download-icon"}}
       <span><abbr title="Downloads in the last 90 days">Recent:</abbr> {{ format-num @crate.recent_downloads }}</span>
     </div>
     <div local-class="updated-at" >

app/components/crate-row.module.css

@@ -3,14 +3,13 @@
 
     display: flex;
     flex-wrap: wrap;
-    padding: 15px 25px;
+    padding: var(--space-s-m) var(--space-m-l);
     background-color: white;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
 }
 
 .description-box {
-    padding-top: 5px;
     display: flex;
     flex-direction: column;
     width: 70%;
@@ -25,12 +24,12 @@
 }
 
 .version {
-    margin-left: 10px;
+    margin-left: var(--space-2xs);
 }
 
 .copy-button {
     composes: button-reset from '../styles/shared/buttons.module.css';
-    padding: 1px 6px;
+    padding: 0 var(--space-2xs);
     color: var(--main-color);
     cursor: pointer;
     opacity: 0;
@@ -54,18 +53,35 @@
 
 .description {
     composes: small from '../styles/shared/typography.module.css';
-    margin-top: 8px;
+    margin-top: var(--space-xs);
+    line-height: 1.5;
 }
 
 .stats {
     width: 30%;
     color: var(--main-color-light);
+
+    > * + * {
+        margin-top: var(--space-xs);
+    }
+
+    svg {
+        height: 1em;
+        width: 1em;
+        margin-right: var(--space-xs);
+
+        &.download-icon {
+            height: calc(1em + 20px);
+            width: calc(1em + 20px);
+            margin: -10px;
+            margin-right: calc(var(--space-xs) - 10px);
+        }
+    }
 }
 
 .downloads {
     display: flex;
     align-items: center;
-    padding-bottom: 5px;
 }
 
 .recent-downloads {
@@ -74,13 +90,8 @@
 }
 
 .updated-at {
-    padding-top: 5px;
     display: flex;
     align-items: center;
-
-    svg {
-        padding: 10px;
-    }
 }
 
 ul.quick-links {
@@ -90,15 +101,10 @@ ul.quick-links {
 
     font-size: 80%;
     list-style-type: none;
-    margin: 1em 0 0 0;
+    margin: var(--space-xs) 0 0 0;
     padding: 0;
 
-
-    li {
-        margin-right: 1em;
-
-        &:last-child {
-            margin-right: 0;
-        }
+    > * + * {
+        margin-left: var(--space-xs);
     }
 }