Merge pull request #5370 from Turbo87/fluid-space-scale

Use a fluid space scale

Author: Turbo87

app/components/crate-downloads-list.hbs

@@ -1,6 +1,6 @@
 <ul local-class="list">
   {{#each @crates as |crate|}}
-    <li local-class="row">
+    <li>
       <LinkTo @route="crate" @model={{crate.id}} local-class="link">
         {{ crate.name }} ({{ crate.max_version }})
         {{svg-jar "download-arrow" local-class="download-icon"}}

app/components/crate-downloads-list.module.css

@@ -1,23 +1,24 @@
 .list {
     list-style: none;
     padding: 0;
-}
+    margin: 0;
 
-.row {
-    margin: 8px 0;
+    > * + * {
+        margin-top: var(--space-2xs);
+    }
 }
 
 .link {
     color: #525252;
     background-color: #edebdd;
     font-size: 90%;
-    padding: 20px 10px;
+    padding: var(--space-s) var(--space-xs);
     display: flex;
     align-items: center;
 }
 
 .download-icon {
     color: #b13b89;
     margin-left: auto;
-    margin-right: 4px;
+    margin-right: var(--space-3xs);
 }

app/components/crate-header.module.css

@@ -1,13 +1,8 @@
-.header {
-    padding-top: 30px;
-    padding-bottom: 30px;
-}
-
 .heading {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: var(--space-xs);
     margin: 0;
     padding: 0;
     word-break: break-word;
@@ -18,20 +13,20 @@
 }
 
 .description {
-    margin-top: 15px;
+    margin-top: var(--space-xs);
     line-height: 1.35;
 }
 
 .keywords {
     list-style: none;
-    margin: 10px 0 0;
+    margin: var(--space-xs) 0 0;
     padding: 0;
 
-    > li {
+    > * {
         display: inline;
 
-        &:not(:last-child) {
-            margin-right: 15px;
+        + * {
+            margin-left: var(--space-s);
         }
     }
 }
@@ -43,22 +38,21 @@
 }
 
 .follow-button {
-    margin-top: 15px;
+    margin-top: var(--space-s);
 }
 
 .nav {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }
 
-
 @media only screen and (min-width: 751px) {
     .header {
         display: grid;
         grid-template-columns: 1fr auto;
     }
 
     .follow-button {
-        margin: -10px -10px 0 10px;
+        margin: -10px -10px 0 var(--space-s);
         grid-column: 2;
         grid-row: 1;
     }

app/components/crate-list.hbs

@@ -2,7 +2,7 @@
   {{!-- The extra div wrapper is needed for specificity issues with `margin` --}}
   <ol local-class="list">
     {{#each @crates as |crate index|}}
-      <li local-class="row">
+      <li>
         <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
       </li>
     {{/each}}

app/components/crate-list.module.css

@@ -2,10 +2,8 @@
     margin: 0;
     padding: 0;
     list-style: none;
-}
 
-.row {
-    &:not(:last-child) {
-        margin-bottom: 15px;
+    > * + * {
+        margin-top: var(--space-s);
     }
 }

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);
     }
 }