From 88f8fcb51408f8d2c959b37f4c500ddde085c528 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 13:54:42 +0200
Subject: [PATCH 01/51] styles: Add Utopia space scale

---
 app/styles/application.module.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index e7bbf4c8f67..1ae4b9b04b6 100644
--- a/app/styles/application.module.css
+++ b/app/styles/application.module.css
@@ -46,6 +46,33 @@
 
     --placeholder-bg: hsl(212, 7%, 57%);
     --placeholder-bg2: hsl(213, 16%, 75%);
+
+    /* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */
+
+    --space-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
+    --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
+    --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
+    --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
+    --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
+    --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
+    --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
+    --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
+    --space-2xl: clamp(3.50rem, calc(3.11rem + 1.95vw), 4.50rem);
+    --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);
+
+    /* One-up pairs */
+    --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
+    --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
+    --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
+    --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
+    --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
+    --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
+    --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
+    --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
+    --space-2xl-3xl: clamp(3.50rem, calc(2.23rem + 6.34vw), 6.75rem);
+
+    /* Custom pairs */
+    --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);
 }
 
 [data-theme="new-design"] {

From 0f57294a3f51f63a2b507702f85f7cb4acb58eec Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 13:56:10 +0200
Subject: [PATCH 02/51] Header: Use fluid scale for search form padding

---
 app/components/header.module.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/components/header.module.css b/app/components/header.module.css
index 66644f0c842..f2ac0567870 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -76,11 +76,7 @@
 
     .hero & {
         justify-self: center;
-        padding: 40px 0 60px;
-
-        @media only screen and (max-width: 450px) {
-            padding: 40px 0 30px;
-        }
+        padding: var(--space-l) 0 var(--space-l-xl);
     }
 }
 

From e66b10916aec145ebdddf0cc9c94dcfa229fdbfb Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 14:01:53 +0200
Subject: [PATCH 03/51] FrontPageList: Move `margin` management into parent
 component

---
 app/components/front-page-list/item.module.css | 1 -
 app/styles/index.module.css                    | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/front-page-list/item.module.css b/app/components/front-page-list/item.module.css
index bdd716581de..41ce0d51c91 100644
--- a/app/components/front-page-list/item.module.css
+++ b/app/components/front-page-list/item.module.css
@@ -5,7 +5,6 @@
     align-items: center;
     width: 100%;
     height: 60px;
-    margin: 8px 0;
     padding: 0 15px;
     background-color: white;
     color: #525252;
diff --git a/app/styles/index.module.css b/app/styles/index.module.css
index 0dc305ee92a..60bb3e20a87 100644
--- a/app/styles/index.module.css
+++ b/app/styles/index.module.css
@@ -83,6 +83,10 @@
 .list {
     list-style: none;
     padding: 0;
+
+    > * + * {
+        margin-top: 8px;
+    }
 }
 
 .error-message {

From 9cdd264c89b1b74d18c3466a46bb2adb2c7a33b3 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 14:09:58 +0200
Subject: [PATCH 04/51] FrontPageList: Use fluid space scale

---
 app/components/front-page-list/item.module.css | 12 ++++++------
 app/styles/index.module.css                    |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/front-page-list/item.module.css b/app/components/front-page-list/item.module.css
index 41ce0d51c91..3b6484318b4 100644
--- a/app/components/front-page-list/item.module.css
+++ b/app/components/front-page-list/item.module.css
@@ -4,12 +4,12 @@
     display: flex;
     align-items: center;
     width: 100%;
-    height: 60px;
-    padding: 0 15px;
+    height: var(--space-2xl);
+    padding: 0 var(--space-s);
     background-color: white;
     color: #525252;
     text-decoration: none;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
     transition: background-color var(--transition-slow);
 
@@ -46,15 +46,15 @@
 }
 
 .subtitle {
-    margin-top: 4px;
+    margin-top: var(--space-3xs);
     font-size: 13px;
     color: rgb(118, 131, 138);
 }
 
 .right {
     flex-shrink: 0;
-    height: 16px;
+    height: var(--space-s);
     width: auto;
-    margin-left: 10px;
+    margin-left: var(--space-xs);
     color: rgb(118, 131, 138);
 }
diff --git a/app/styles/index.module.css b/app/styles/index.module.css
index 60bb3e20a87..606b82c9407 100644
--- a/app/styles/index.module.css
+++ b/app/styles/index.module.css
@@ -85,7 +85,7 @@
     padding: 0;
 
     > * + * {
-        margin-top: 8px;
+        margin-top: var(--space-2xs);
     }
 }
 

From a10f09e024e3241807653d1eadbf75006881af5f Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 14:32:05 +0200
Subject: [PATCH 05/51] VersionList::Row: Use fluid space scale

---
 app/components/version-list/row.module.css | 49 ++++++++++++----------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/app/components/version-list/row.module.css b/app/components/version-list/row.module.css
index fc62a5ae863..8940d9477d4 100644
--- a/app/components/version-list/row.module.css
+++ b/app/components/version-list/row.module.css
@@ -8,9 +8,9 @@
     align-items: center;
     position: relative;
     font-size: 18px;
-    padding: 15px 25px;
+    padding: var(--space-s) var(--space-m);
     background-color: white;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
     transition: all var(--transition-slow);
 
@@ -59,6 +59,7 @@
 
     @media only screen and (max-width: 550px) {
         grid-template-columns: auto;
+        margin: 0 var(--space-s);
     }
 }
 
@@ -66,10 +67,10 @@
     flex-shrink: 0;
     display: grid;
     place-items: center;
-    width: 3em;
-    height: 3em;
+    width: var(--space-xl);
+    height: var(--space-xl);
     overflow: hidden;
-    margin-right: 20px;
+    margin-right: var(--space-s);
     font-weight: 500;
     font-variant-numeric: tabular-nums;
     color: var(--fg-color);
@@ -84,12 +85,12 @@
     }
 
     .row:hover &, .row.focused & {
-        border: 2px solid white;
+        border: var(--space-4xs) solid white;
         box-shadow: 0 1px 3px var(--fg-color);
     }
 
     @media only screen and (max-width: 550px) {
-        margin: 0 10px 10px;
+        margin: 0 0 var(--space-s);
     }
 }
 
@@ -115,7 +116,7 @@
 
 .metadata {
     flex-grow: 1;
-    margin-left: 30px;
+    margin-left: var(--space-m);
     color: var(--grey600);
     text-transform: uppercase;
     letter-spacing: .7px;
@@ -138,7 +139,7 @@
     svg {
         height: 1em;
         width: auto;
-        margin-right: 2px;
+        margin-right: var(--space-4xs);
         margin-bottom: -.1em;
     }
 
@@ -146,12 +147,20 @@
         text-transform: none;
         letter-spacing: normal;
     }
+
+    > * + * {
+        margin-top: var(--space-2xs);
+
+        @media only screen and (max-width: 750px) {
+            margin-top: var(--space-xs);
+        }
+    }
 }
 
 .avatar {
     height: 1.5em;
     width: auto;
-    margin-left: 3px;
+    margin-left: var(--space-4xs);
     margin-bottom: -.4em;
     border-radius: 50%;
     box-shadow: 0 1px 1px 0 var(--grey600);
@@ -159,12 +168,8 @@
 }
 
 .metadata-row {
-    &:not(:first-child) {
-        margin-top: 10px;
-    }
-
-    > *:not(:first-child) {
-        margin-left: 20px;
+    > * + * {
+        margin-left: var(--space-s);
     }
 
     @media only screen and (max-width: 750px) {
@@ -172,11 +177,9 @@
         flex-direction: column;
         align-items: flex-start;
 
-        > * {
-            &:not(:first-child) {
-                margin-left: 0;
-                margin-top: 10px;
-            }
+        > * + * {
+            margin-left: 0;
+            margin-top: var(--space-xs);
         }
     }
 }
@@ -193,13 +196,13 @@
 
 .feature-list {
     padding: 0;
-    margin: 10px 5px;
+    margin: var(--space-xs) var(--space-2xs);
     list-style: none;
 }
 
 .yank-button {
     position: relative;
-    margin-left: 10px;
+    margin-left: var(--space-xs);
 
     @media only screen and (max-width: 550px) {
         display: none;

From 9b6887150c9cb87ae35b013a0067b8d0e87b73ea Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 14:43:22 +0200
Subject: [PATCH 06/51] DependencyList::Row: Use fluid space scale

---
 app/components/dependency-list/row.module.css | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/components/dependency-list/row.module.css b/app/components/dependency-list/row.module.css
index 7643dadaa11..c7931c1a678 100644
--- a/app/components/dependency-list/row.module.css
+++ b/app/components/dependency-list/row.module.css
@@ -10,9 +10,9 @@
     align-items: center;
     position: relative;
     font-size: 18px;
-    padding: 15px 25px;
+    padding: var(--space-s) var(--space-m);
     background-color: white;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
     transition: all var(--transition-slow);
 
@@ -47,7 +47,7 @@
 }
 
 .range-lg, .range-sm {
-    margin-right: 15px;
+    margin-right: var(--space-s);
     min-width: 100px;
     color: var(--range-color);
     font-variant: tabular-nums;
@@ -72,7 +72,7 @@
 .link {
     color: var(--crate-color);
     font-weight: 500;
-    margin-right: 15px;
+    margin-right: var(--space-s);
     outline: none;
 
     &:hover {
@@ -94,7 +94,7 @@
     text-transform: uppercase;
     letter-spacing: .7px;
     font-size: 13px;
-    margin-right: 15px;
+    margin-right: var(--space-s);
 
     a {
         position: relative;
@@ -108,7 +108,7 @@
     svg {
         height: 1em;
         width: auto;
-        margin-right: 2px;
+        margin-right: var(--space-4xs);
         margin-bottom: -.1em;
     }
 
@@ -119,7 +119,7 @@
 
     @media only screen and (max-width: 550px) {
         display: block;
-        margin-top: 10px;
+        margin-top: var(--space-xs);
     }
 }
 
@@ -145,14 +145,15 @@
 }
 
 .description {
-    margin-top: 10px;
+    margin-top: var(--space-xs);
     color: var(--crate-color);
     font-size: 90%;
+    line-height: 1.5;
 }
 
 .description-placeholder {
     height: 1em;
     width: 70%;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     opacity: var(--placeholder-opacity);
 }

From dc1a8810a8c1b1bd11bb75c351b7a76f4c328730 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 14:48:23 +0200
Subject: [PATCH 07/51] RevDepRow: Use fluid space scale

---
 app/components/rev-dep-row.module.css | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/components/rev-dep-row.module.css b/app/components/rev-dep-row.module.css
index ac3f746e49c..046a114adaf 100644
--- a/app/components/rev-dep-row.module.css
+++ b/app/components/rev-dep-row.module.css
@@ -6,9 +6,9 @@
 
     position: relative;
     font-size: 18px;
-    padding: 15px 25px;
+    padding: var(--space-s) var(--space-m);
     background-color: white;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
     transition: all var(--transition-slow);
 
@@ -41,7 +41,7 @@
 .link {
     color: var(--crate-color);
     font-weight: 500;
-    margin-right: 15px;
+    margin-right: var(--space-s);
     outline: none;
 
     &:hover {
@@ -74,7 +74,7 @@
     font-variant: tabular-nums;
 
     @media only screen and (max-width: 550px) {
-        margin-top: 10px;
+        margin-top: var(--space-xs);
     }
 }
 
@@ -86,14 +86,19 @@
 }
 
 .description {
-    margin-top: 10px;
+    margin-top: var(--space-2xs);
     color: var(--crate-color);
     font-size: 90%;
+    line-height: 1.5;
+
+    @media only screen and (max-width: 550px) {
+        margin-top: var(--space-xs);
+    }
 }
 
 .description-placeholder {
     height: 1em;
     width: 70%;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     opacity: var(--placeholder-opacity);
 }

From 1c1b45b288be118306b895cdcb55fa230b697772 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 15:10:07 +0200
Subject: [PATCH 08/51] CrateSidebar: Use fluid space scale

---
 app/components/crate-sidebar.hbs             | 48 ++++++++++----------
 app/components/crate-sidebar.module.css      | 45 ++++++++++++------
 app/components/crate-sidebar/link.module.css |  6 +--
 3 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs
index a96d94b01a5..7c29309a261 100644
--- a/app/components/crate-sidebar.hbs
+++ b/app/components/crate-sidebar.hbs
@@ -56,7 +56,7 @@
       {{/if}}
     </div>
 
-    <div>
+    <div local-class="links">
       {{#if this.showHomepage}}
         <CrateSidebar::Link
           @title="Homepage"
@@ -101,29 +101,29 @@
         </div>
       {{/if}}
     {{/unless}}
-  </div>
 
-  {{#if this.playgroundLink}}
-    <div>
-      <a
-        href={{this.playgroundLink}}
-        target="_blank"
-        rel="noopener noreferrer"
-        local-class="playground-button"
-        data-test-playground-button
-      >
-        Try on Rust Playground
+    {{#if this.playgroundLink}}
+      <div>
+        <a
+          href={{this.playgroundLink}}
+          target="_blank"
+          rel="noopener noreferrer"
+          local-class="playground-button"
+          data-test-playground-button
+        >
+          Try on Rust Playground
 
-        {{#if this.canHover}}
-          <EmberTooltip @text="The top 100 crates are available on the Rust Playground for you to try out directly in your browser." />
-        {{/if}}
-      </a>
-      {{#unless this.canHover}}
-        <p local-class="playground-help" data-test-playground-help>
-          The top 100 crates are available on the Rust Playground for you to
-          try out directly in your browser.
-        </p>
-      {{/unless}}
-    </div>
-  {{/if}}
+          {{#if this.canHover}}
+            <EmberTooltip @text="The top 100 crates are available on the Rust Playground for you to try out directly in your browser." />
+          {{/if}}
+        </a>
+        {{#unless this.canHover}}
+          <p local-class="playground-help" data-test-playground-help>
+            The top 100 crates are available on the Rust Playground for you to
+            try out directly in your browser.
+          </p>
+        {{/unless}}
+      </div>
+    {{/if}}
+  </div>
 </section>
\ No newline at end of file
diff --git a/app/components/crate-sidebar.module.css b/app/components/crate-sidebar.module.css
index eb00499eb53..2b46bef8949 100644
--- a/app/components/crate-sidebar.module.css
+++ b/app/components/crate-sidebar.module.css
@@ -1,6 +1,14 @@
 .sidebar {
     .top, .bottom {
         display: flex;
+
+        > * + * {
+            margin-top: var(--space-m);
+        }
+    }
+
+    .bottom {
+        margin-top: var(--space-m);
     }
 
     .top > * { flex: 1 }
@@ -9,10 +17,6 @@
         .top, .bottom {
             flex-direction: column;
         }
-
-        .categories {
-            padding-left: 20px;
-        }
     }
 
     @media only screen and (max-width: 890px) {
@@ -24,8 +28,13 @@
 
 .heading {
     font-size: 1.17em;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
+    margin: 0 0 var(--space-s);
+}
+
+.metadata {
+    > * + * {
+        margin-top: var(--space-2xs);
+    }
 }
 
 .date,
@@ -33,11 +42,10 @@
 .bytes {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
 
     svg {
         flex-shrink: 0;
-        margin-right: 7px;
+        margin-right: var(--space-2xs);
         height: 1em;
         width: auto;
     }
@@ -69,14 +77,14 @@
     width: 100%;
     align-items: center;
     justify-content: space-between;
-    padding: 7px 12px;
+    padding: var(--space-2xs) var(--space-xs);
     font-family: var(--font-monospace);
     font-size: 14px;
     line-height: 1.5em;
     color: var(--main-color);
     background: transparent;
-    border-radius: 5px;
-    border: solid 2px var(--gray-border);
+    border-radius: var(--space-3xs);
+    border: solid var(--space-4xs) var(--gray-border);
 
     span {
         flex: auto;
@@ -100,7 +108,7 @@
     width: auto;
     /* for slightly nicer alignment... */
     margin-top: -3px;
-    margin-left: 10px;
+    margin-left: var(--space-2xs);
     opacity: 0;
     transition: opacity var(--transition-fast);
 
@@ -109,16 +117,27 @@
     }
 }
 
+.links {
+    > * + * {
+        margin-top: var(--space-m);
+    }
+}
+
 .more-versions-link,
 .reverse-deps-link {
     composes: small from '../styles/shared/typography.module.css';
 }
 
+.categories {
+    margin: 0;
+    padding-left: 20px;
+    line-height: 1.5;
+}
+
 .playground-button {
     composes: yellow-button small from '../styles/shared/buttons.module.css';
     justify-content: center;
     width: 220px;
-    margin-top: 20px;
 }
 
 .playground-help {
diff --git a/app/components/crate-sidebar/link.module.css b/app/components/crate-sidebar/link.module.css
index cc0ff8d385e..7e9216b0f63 100644
--- a/app/components/crate-sidebar/link.module.css
+++ b/app/components/crate-sidebar/link.module.css
@@ -4,16 +4,14 @@
 }
 
 .title {
-    font-size: 1.17em;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
+    composes: heading from '../crate-sidebar.module.css';
 }
 
 .icon {
     flex-shrink: 0;
     height: 1em;
     width: auto;
-    margin-right: 7px;
+    margin-right: var(--space-2xs);
 }
 
 .link {

From 55c32efa9e9124b5fd5e694152687fbbf161a741 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 15:10:27 +0200
Subject: [PATCH 09/51] CrateSidebar: Remove obsolete `top` and `bottom`
 elements

---
 app/components/crate-sidebar.hbs        | 209 ++++++++++++------------
 app/components/crate-sidebar.module.css |  25 +--
 2 files changed, 105 insertions(+), 129 deletions(-)

diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs
index 7c29309a261..80ccfe2e84b 100644
--- a/app/components/crate-sidebar.hbs
+++ b/app/components/crate-sidebar.hbs
@@ -3,127 +3,122 @@
   aria-label="Crate metadata"
   ...attributes
 >
-  <div local-class='top'>
+  <div local-class="metadata">
+    <h2 local-class="heading">Metadata</h2>
 
-    <div local-class="metadata">
-      <h2 local-class="heading">Metadata</h2>
+    <time
+      datetime={{date-format-iso @version.updated_at}}
+      local-class="date"
+    >
+      {{svg-jar "calendar"}}
+      <span>
+        {{date-format-distance-to-now @version.created_at addSuffix=true}}
+        <EmberTooltip @text={{date-format @version.created_at 'PPP'}} />
+      </span>
+    </time>
 
-      <time
-        datetime={{date-format-iso @version.updated_at}}
-        local-class="date"
-      >
-        {{svg-jar "calendar"}}
+    {{#if @version.license}}
+      <div local-class="license" data-test-license>
+        {{svg-jar "license"}}
         <span>
-          {{date-format-distance-to-now @version.created_at addSuffix=true}}
-          <EmberTooltip @text={{date-format @version.created_at 'PPP'}} />
+          <LicenseExpression @license={{@version.license}} />
         </span>
-      </time>
-
-      {{#if @version.license}}
-        <div local-class="license" data-test-license>
-          {{svg-jar "license"}}
-          <span>
-            <LicenseExpression @license={{@version.license}} />
-          </span>
-        </div>
-      {{/if}}
-
-      {{#if @version.crate_size}}
-        <div local-class="bytes">
-          {{svg-jar "weight"}}
-          {{pretty-bytes @version.crate_size}}
-        </div>
-      {{/if}}
-    </div>
+      </div>
+    {{/if}}
 
-    <div>
-      <h2 local-class="heading">Install</h2>
+    {{#if @version.crate_size}}
+      <div local-class="bytes">
+        {{svg-jar "weight"}}
+        {{pretty-bytes @version.crate_size}}
+      </div>
+    {{/if}}
+  </div>
 
-      <p local-class="copy-help">Add the following line to your Cargo.toml file:</p>
-      {{#if (is-clipboard-supported)}}
-        <CopyButton
-          @copyText={{this.tomlSnippet}}
-          title="Copy Cargo.toml snippet to clipboard"
-          local-class="copy-button"
-        >
-          <span>{{this.tomlSnippet}}</span>
-          {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
-        </CopyButton>
-      {{else}}
-        <code local-class="copy-fallback">
-          {{this.tomlSnippet}}
-        </code>
-      {{/if}}
-    </div>
+  <div>
+    <h2 local-class="heading">Install</h2>
 
-    <div local-class="links">
-      {{#if this.showHomepage}}
-        <CrateSidebar::Link
-          @title="Homepage"
-          @url={{@crate.homepage}}
-          data-test-homepage-link
-        />
-      {{/if}}
+    <p local-class="copy-help">Add the following line to your Cargo.toml file:</p>
+    {{#if (is-clipboard-supported)}}
+      <CopyButton
+        @copyText={{this.tomlSnippet}}
+        title="Copy Cargo.toml snippet to clipboard"
+        local-class="copy-button"
+      >
+        <span>{{this.tomlSnippet}}</span>
+        {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+      </CopyButton>
+    {{else}}
+      <code local-class="copy-fallback">
+        {{this.tomlSnippet}}
+      </code>
+    {{/if}}
+  </div>
 
-      {{#if @version.documentationLink}}
-        <CrateSidebar::Link
-          @title="Documentation"
-          @url={{@version.documentationLink}}
-          data-test-docs-link
-        />
-      {{/if}}
+  <div local-class="links">
+    {{#if this.showHomepage}}
+      <CrateSidebar::Link
+        @title="Homepage"
+        @url={{@crate.homepage}}
+        data-test-homepage-link
+      />
+    {{/if}}
 
-      {{#if @crate.repository}}
-        <CrateSidebar::Link
-          @title="Repository"
-          @url={{@crate.repository}}
-          data-test-repository-link
-        />
-      {{/if}}
-    </div>
+    {{#if @version.documentationLink}}
+      <CrateSidebar::Link
+        @title="Documentation"
+        @url={{@version.documentationLink}}
+        data-test-docs-link
+      />
+    {{/if}}
 
-    <div>
-      <h2 local-class="heading">Owners</h2>
-      <OwnersList @owners={{@crate.owners}} />
-    </div>
+    {{#if @crate.repository}}
+      <CrateSidebar::Link
+        @title="Repository"
+        @url={{@crate.repository}}
+        data-test-repository-link
+      />
+    {{/if}}
   </div>
 
-  <div local-class='bottom'>
-    {{#unless @crate.categories.isPending}}
-      {{#if @crate.categories}}
-        <div>
-          <h2 local-class="heading">Categories</h2>
-          <ul local-class="categories">
-            {{#each @crate.categories as |category|}}
-              <li><LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo></li>
-            {{/each}}
-          </ul>
-        </div>
-      {{/if}}
-    {{/unless}}
+  <div>
+    <h2 local-class="heading">Owners</h2>
+    <OwnersList @owners={{@crate.owners}} />
+  </div>
 
-    {{#if this.playgroundLink}}
+  {{#unless @crate.categories.isPending}}
+    {{#if @crate.categories}}
       <div>
-        <a
-          href={{this.playgroundLink}}
-          target="_blank"
-          rel="noopener noreferrer"
-          local-class="playground-button"
-          data-test-playground-button
-        >
-          Try on Rust Playground
-
-          {{#if this.canHover}}
-            <EmberTooltip @text="The top 100 crates are available on the Rust Playground for you to try out directly in your browser." />
-          {{/if}}
-        </a>
-        {{#unless this.canHover}}
-          <p local-class="playground-help" data-test-playground-help>
-            The top 100 crates are available on the Rust Playground for you to
-            try out directly in your browser.
-          </p>
-        {{/unless}}
+        <h2 local-class="heading">Categories</h2>
+        <ul local-class="categories">
+          {{#each @crate.categories as |category|}}
+            <li><LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo></li>
+          {{/each}}
+        </ul>
       </div>
     {{/if}}
-  </div>
+  {{/unless}}
+
+  {{#if this.playgroundLink}}
+    <div>
+      <a
+        href={{this.playgroundLink}}
+        target="_blank"
+        rel="noopener noreferrer"
+        local-class="playground-button"
+        data-test-playground-button
+      >
+        Try on Rust Playground
+
+        {{#if this.canHover}}
+          <EmberTooltip @text="The top 100 crates are available on the Rust Playground for you to try out directly in your browser." />
+        {{/if}}
+      </a>
+      {{#unless this.canHover}}
+        <p local-class="playground-help" data-test-playground-help>
+          The top 100 crates are available on the Rust Playground for you to
+          try out directly in your browser.
+        </p>
+      {{/unless}}
+    </div>
+  {{/if}}
 </section>
\ No newline at end of file
diff --git a/app/components/crate-sidebar.module.css b/app/components/crate-sidebar.module.css
index 2b46bef8949..b78c6947751 100644
--- a/app/components/crate-sidebar.module.css
+++ b/app/components/crate-sidebar.module.css
@@ -1,29 +1,10 @@
 .sidebar {
-    .top, .bottom {
-        display: flex;
-
-        > * + * {
-            margin-top: var(--space-m);
-        }
-    }
+    display: flex;
+    flex-direction: column;
 
-    .bottom {
+    > * + * {
         margin-top: var(--space-m);
     }
-
-    .top > * { flex: 1 }
-
-    @media only screen and (min-width: 890px) {
-        .top, .bottom {
-            flex-direction: column;
-        }
-    }
-
-    @media only screen and (max-width: 890px) {
-        .top, .bottom {
-            flex-direction: column;
-        }
-    }
 }
 
 .heading {

From 33aef7acc4464d99f26e4697fe6b84dac85a7099 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 15:18:37 +0200
Subject: [PATCH 10/51] styles: Simplify `.inner-main` padding/margins

---
 app/styles/application.module.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index 1ae4b9b04b6..a9309c591d7 100644
--- a/app/styles/application.module.css
+++ b/app/styles/application.module.css
@@ -174,6 +174,5 @@ noscript {
     composes: width-limit;
     display: flex;
     flex-direction: column;
-    margin: 15px 0;
-    padding: 0 15px;
+    padding: 15px;
 }

From 8c19ce2a1d235aaa0eea9ffbac5a34add878e406 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 15:19:44 +0200
Subject: [PATCH 11/51] styles: Extract `--main-layout-padding` CSS variable

---
 app/styles/application.module.css   | 4 +++-
 app/styles/crate/version.module.css | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index a9309c591d7..7a0ff4c14f9 100644
--- a/app/styles/application.module.css
+++ b/app/styles/application.module.css
@@ -171,8 +171,10 @@ noscript {
 }
 
 .inner-main {
+    --main-layout-padding: 15px;
+
     composes: width-limit;
     display: flex;
     flex-direction: column;
-    padding: 15px;
+    padding: var(--main-layout-padding);
 }
diff --git a/app/styles/crate/version.module.css b/app/styles/crate/version.module.css
index 8c3d73fd2f2..2788a5137b9 100644
--- a/app/styles/crate/version.module.css
+++ b/app/styles/crate/version.module.css
@@ -15,8 +15,8 @@
     box-shadow: var(--shadow);
 
     @media only screen and (max-width: 550px) {
-        margin-left: -15px;
-        margin-right: -15px;
+        margin-left: calc(var(--main-layout-padding) * -1);
+        margin-right: calc(var(--main-layout-padding) * -1);
         border-radius: 0;
     }
 

From 033855a5b2872c50cf83ad4f5eb2d57963fd4a7c Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 15:29:10 +0200
Subject: [PATCH 12/51] crate/version: Use fluid space scale

---
 app/styles/crate/version.module.css | 38 ++++++++++++++---------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/styles/crate/version.module.css b/app/styles/crate/version.module.css
index 2788a5137b9..ba979a5f5e4 100644
--- a/app/styles/crate/version.module.css
+++ b/app/styles/crate/version.module.css
@@ -8,10 +8,10 @@
 .docs {
     --shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
 
-    margin-bottom: 25px;
-    padding: 25px;
+    margin-bottom: var(--space-l);
+    padding: var(--space-m) var(--space-l);
     background-color: white;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     box-shadow: var(--shadow);
 
     @media only screen and (max-width: 550px) {
@@ -26,11 +26,12 @@
 }
 
 .no-readme {
-    padding: 40px 15px;
+    padding: var(--space-l) var(--space-s);
     text-align: center;
     font-size: 20px;
     font-weight: 300;
     overflow-wrap: break-word;
+    line-height: 1.5;
 
     code {
         font-size: 18px;
@@ -41,38 +42,38 @@
 .placeholder-title {
     width: 30%;
     height: 25px;
-    margin: 15px 0 25px;
-    border-radius: 5px;
+    margin: var(--space-s) 0 var(--space-m);
+    border-radius: var(--space-3xs);
     opacity: 0.6;
 }
 
 .placeholder-subtitle {
     width: 50%;
     height: 20px;
-    margin: 35px 0 25px;
-    border-radius: 5px;
+    margin: var(--space-l) 0 var(--space-m);
+    border-radius: var(--space-3xs);
     opacity: 0.6;
 }
 
 .placeholder-text {
     width: 100%;
     height: 16px;
-    margin-top: 15px;
-    border-radius: 5px;
+    margin-top: var(--space-xs);
+    border-radius: var(--space-3xs);
     opacity: 0.3;
 }
 
 .sidebar {
     @media only screen and (min-width: 890px) {
-        margin-top: 20px;
-        margin-left: 20px;
+        margin-top: var(--space-m);
+        margin-left: var(--space-m);
     }
 }
 
 .crate-downloads {
     display: flex;
     flex-wrap: wrap;
-    margin-top: 25px;
+    margin-top: var(--space-l);
     border-top: 5px solid var(--gray-border);
 
     h3 { width: 100%; }
@@ -86,7 +87,7 @@
 
 .stat {
     border-left: 1px solid var(--gray-border);
-    padding: 10px 20px;
+    padding: var(--space-s) var(--space-m);
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
@@ -95,7 +96,7 @@
     .num {
         font-size: 160%;
         font-weight: bold;
-        margin-bottom: 4px;
+        margin-bottom: var(--space-3xs);
     }
 
     .num__align {
@@ -111,8 +112,7 @@
 .graph {
     flex-grow: 10;
     width: 100%;
-    margin: 30px 0;
-    padding-bottom: 20px;
+    margin: var(--space-xs) 0 var(--space-m);
 
     h4 {
         color: var(--main-color-light);
@@ -139,12 +139,12 @@
         padding: 10px;
         border: none;
         border-radius: 5px;
-    
+
         .trigger-label {
             min-width: 65px;
         }
     }
-    
+
     .dropdown-button {
         background: none;
         border: 0;

From eb267d58e0566bc8561d868d3817f46cc4cbab0a Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 15:40:24 +0200
Subject: [PATCH 13/51] Footer: Use fluid space scale

---
 app/components/footer.module.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/components/footer.module.css b/app/components/footer.module.css
index dc447f0346b..f5e436b4134 100644
--- a/app/components/footer.module.css
+++ b/app/components/footer.module.css
@@ -20,13 +20,13 @@
 .content {
     composes: width-limit from '../styles/application.module.css';
     display: grid;
-    gap: 40px 20px;
-    padding: 30px;
+    gap: var(--space-xl) var(--space-m);
+    padding: var(--space-l);
 
     @media only screen and (min-width: 551px) {
         grid-template-columns: repeat(2, 1fr);
         justify-content: center;
-        padding: 50px 30px;
+        padding: var(--space-xl) var(--space-m);
     }
 
     @media only screen and (min-width: 751px) {
@@ -34,7 +34,7 @@
     }
 
     h1 {
-        margin: 0 0 20px;
+        margin: 0 0 var(--space-s);
         font-size: 20px;
         font-weight: 500;
         color: var(--footer-header-color);
@@ -47,22 +47,22 @@
         padding: 0;
 
         > * + * {
-            margin-top: 15px;
+            margin-top: var(--space-xs);
         }
     }
 
     li {
-        height: 16px;
+        height: 1rem;
     }
 
     a {
         display: inline-flex;
         /* slightly increased click targets */
-        margin: -5px;
-        padding: 5px;
+        margin: calc(var(--space-2xs) * -1);
+        padding: var(--space-2xs);
         color: #fff;
         font-size: 16px;
-        line-height: 16px;
+        line-height: 1em;
         white-space: nowrap;
         transition: var(--transition-medium);
 
@@ -79,9 +79,9 @@
     }
 
     svg {
-        height: 20px;
-        width: 20px;
-        margin: -2px 10px -2px 0;
+        height: 1.25em;
+        width: 1.25em;
+        margin: -.125em var(--space-xs) -.125em 0;
         flex-shrink: 0;
     }
 }

From 2b7461d51368c17c26bd01a1ab15077533f0ab22 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 17:42:06 +0200
Subject: [PATCH 14/51] Header: Use fluid space scale

---
 app/components/header.module.css | 35 ++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/components/header.module.css b/app/components/header.module.css
index f2ac0567870..f3b8e8cbb8a 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -12,7 +12,7 @@
         "logo search nav" auto /
         auto 1fr auto;
     align-items: center;
-    padding: 10px 20px;
+    padding: var(--space-2xs) var(--space-m);
     color: white;
 
     a {
@@ -54,24 +54,25 @@
     align-items: center;
 
     h1 {
-        font-size: 24px;
+        margin: 0;
+        font-size: var(--space-m);
     }
 }
 
 .logo {
-    width: 60px;
+    width: var(--space-xl);
     height: auto;
     /* negative margin to account for blank space in the image */
     margin-left: -10px;
-    margin-right: 10px;
+    margin-right: calc(var(--space-s) - 10px);
 }
 
 .search-form {
     grid-area: search;
-    padding: 0 16px;
+    margin: 0 var(--space-m);
 
     @media only screen and (max-width: 820px) {
-        padding: 10px 0;
+        margin: var(--space-s) 0;
     }
 
     .hero & {
@@ -102,7 +103,7 @@
 }
 
 .sep {
-    margin: 0 10px;
+    margin: 0 var(--space-2xs);
     opacity: 0.5;
 }
 
@@ -135,8 +136,9 @@
     composes: button-reset from '../styles/shared/buttons.module.css';
     display: inline-flex;
     align-items: center;
-    margin: 0 -5px;
-    padding: 5px;
+    /* negative margin for larger click target */
+    margin: calc(var(--space-2xs) * -1);
+    padding: var(--space-2xs);
     cursor: pointer;
 
     &:disabled {
@@ -144,18 +146,21 @@
     }
 
     .spinner {
-        margin-right: 6px;
+        --spinner-color: white;
+        --spinner-bg-color: rgba(255, 255, 255, .2);
+
+        margin-right: var(--space-2xs);
     }
 }
 
 .login-icon {
-    width: 16px;
-    margin-right: 6px;
+    width: 1em;
+    margin-right: var(--space-2xs);
     opacity: 0.5;
 }
 
 .avatar {
-    margin-right: 0.5em;
+    margin-right: var(--space-2xs);
 }
 
 .current-user-links {
@@ -167,7 +172,7 @@
 .dropdown-button {
     background: none;
     border: 0;
-    padding: 10px 0;
+    padding: 0;
 
     img {
         vertical-align: top;
@@ -184,6 +189,6 @@
     }
 
     .spinner {
-        margin-right: 6px;
+        margin-right: var(--space-2xs);
     }
 }

From 621f81ca30daaae0b957cf132f89ec2193da3e40 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 17:50:53 +0200
Subject: [PATCH 15/51] NavTabs: Use fluid space scale

---
 app/components/nav-tabs.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/nav-tabs.module.css b/app/components/nav-tabs.module.css
index b8c83139f2a..cf2fed2e018 100644
--- a/app/components/nav-tabs.module.css
+++ b/app/components/nav-tabs.module.css
@@ -1,8 +1,8 @@
 .list {
     --nav-tabs-border-width: 2px;
-    --nav-tabs-padding-h: 20px;
-    --nav-tabs-padding-v: 12px;
-    --nav-tabs-radius: 5px;
+    --nav-tabs-padding-h: var(--space-s);
+    --nav-tabs-padding-v: var(--space-2xs);
+    --nav-tabs-radius: var(--space-3xs);
 
     display: flex;
     list-style: none;

From 66c5a118641e8d25bc87ab578b1d8b7fa0809d52 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 17:53:40 +0200
Subject: [PATCH 16/51] Dropdown: Use fluid space scale

---
 app/components/dropdown/menu-item.module.css | 2 +-
 app/components/dropdown/menu.module.css      | 2 +-
 app/components/dropdown/trigger.module.css   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/dropdown/menu-item.module.css b/app/components/dropdown/menu-item.module.css
index 05d2baacd38..034058eca55 100644
--- a/app/components/dropdown/menu-item.module.css
+++ b/app/components/dropdown/menu-item.module.css
@@ -4,7 +4,7 @@
         width: 100%;
         display: inline-flex;
         text-align: start;
-        padding: 8px 10px;
+        padding: var(--space-2xs) var(--space-xs);
         text-decoration: none;
         color: var(--main-color) !important;
 
diff --git a/app/components/dropdown/menu.module.css b/app/components/dropdown/menu.module.css
index 35a0655e48b..2993241459a 100644
--- a/app/components/dropdown/menu.module.css
+++ b/app/components/dropdown/menu.module.css
@@ -6,5 +6,5 @@
     border: 1px solid var(--gray-border);
     list-style: none;
     overflow: hidden;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
 }
diff --git a/app/components/dropdown/trigger.module.css b/app/components/dropdown/trigger.module.css
index 3db0149b8e9..514f8344595 100644
--- a/app/components/dropdown/trigger.module.css
+++ b/app/components/dropdown/trigger.module.css
@@ -5,7 +5,7 @@
     cursor: pointer;
 
     .arrow {
-        margin-left: 0.6em;
+        margin-left: var(--space-2xs);
         font-size: 50%;
         display: inline-block;
         vertical-align: middle;

From 42fddccd9c363c522239575e569e430a0dce07e4 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 18:18:50 +0200
Subject: [PATCH 17/51] Settings::ApiTokens: Use fluid space scale

---
 app/components/settings/api-tokens.module.css | 59 +++++++++----------
 1 file changed, 27 insertions(+), 32 deletions(-)

diff --git a/app/components/settings/api-tokens.module.css b/app/components/settings/api-tokens.module.css
index ec238d1d255..a6e583f29f9 100644
--- a/app/components/settings/api-tokens.module.css
+++ b/app/components/settings/api-tokens.module.css
@@ -18,15 +18,15 @@
 }
 
 .token-list {
-    margin: 24px 0;
+    margin: var(--space-m) 0;
     padding: 0;
     list-style: none;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     background-color: white;
     box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
 
     > * {
-        padding: 24px;
+        padding: var(--space-m);
     }
 
     > * + * {
@@ -49,44 +49,44 @@
 }
 
 .new-token-form {
-    padding: 24px;
-    border-radius: 6px;
+    padding: var(--space-m);
+    border-radius: var(--space-3xs);
     background-color: white;
     box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
-    margin: 24px 0;
+    margin-top: var(--space-m);
 
     .input {
-        padding: 8px;
+        padding: var(--space-2xs);
         width: 100%;
         border: 1px solid #ada796;
-        border-radius: 4px;
+        border-radius: var(--space-3xs);
     }
 }
 
 .actions {
-    margin-top: 12px;
+    margin-top: var(--space-s);
     display: flex;
     align-items: center;
 }
 
 .spinner {
-    margin-left: 10px
+    margin-left: var(--space-xs);
 }
 
 .save-button {
     composes: yellow-button small from '../../styles/shared/buttons.module.css';
     flex-grow: 1;
-    border-radius: 4px;
+    border-radius: var(--space-3xs);
 }
 
 .revoke-button {
     composes: tan-button small from '../../styles/shared/buttons.module.css';
     flex-grow: 1;
-    border-radius: 4px;
+    border-radius: var(--space-3xs);
 }
 
 .new-token {
-    margin: 24px 0;
+    margin-top: var(--space-s);
 }
 
 .new-token-explainer {
@@ -100,19 +100,19 @@
     background: var(--main-color);
     color: white;
     font-family: var(--font-monospace);
-    border-radius: 4px;
-    margin-top: 16px;
+    border-radius: var(--space-3xs);
+    margin-top: var(--space-xs);
 }
 
 .token-value {
-    padding: 20px;
+    padding: var(--space-s);
     user-select: all;
 }
 
 .copy-button {
     composes: button-reset from '../../styles/shared/buttons.module.css';
     align-self: stretch;
-    padding: 0 16px;
+    padding: 0 var(--space-s);
     cursor: pointer;
 
     &:hover {
@@ -125,18 +125,18 @@
 }
 
 .copy-button-icon {
-    width: 24px;
-    height: 24px;
+    width: auto;
+    height: 1.3em;
 }
 
 .empty-state {
     display: grid;
     place-items: center;
     align-content: center;
-    margin: 24px 0;
-    padding: 64px;
+    margin: var(--space-m) 0;
+    padding: var(--space-xl-2xl);
     border: 2px black dashed;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     background-color: white;
     box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
 }
@@ -147,7 +147,7 @@
 
 .empty-state-button {
     composes: yellow-button small from '../../styles/shared/buttons.module.css';
-    margin-top: 20px;
+    margin-top: var(--space-m);
     border-radius: 4px;
 }
 
@@ -155,16 +155,11 @@
     .new-token-form {
         display: grid;
         grid-template-columns: 1fr auto;
-        align-items: center;
-        padding: 16px 24px;
-
-        .input {
-            padding: 8px;
-            margin-right: 16px;
-        }
+        align-items: stretch;
+        padding: var(--space-s) var(--space-m);
 
         .actions {
-            margin: 0 0 0 16px;
+            margin: 0 0 0 var(--space-xs);
         }
     }
 
@@ -181,7 +176,7 @@
         .actions {
             grid-area: actions;
             align-self: start;
-            margin: 0 0 0 16px;
+            margin: 0 0 0 var(--space-xs);
         }
 
         .new-token {

From 1da059cb323e961b90089070076ca50959974082 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 18:20:39 +0200
Subject: [PATCH 18/51] SideMenu: Use fluid space scale

---
 app/components/side-menu.module.css      | 2 +-
 app/components/side-menu/item.module.css | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/side-menu.module.css b/app/components/side-menu.module.css
index 2a8fcb207ac..880066e3424 100644
--- a/app/components/side-menu.module.css
+++ b/app/components/side-menu.module.css
@@ -4,6 +4,6 @@
     padding: 0;
 
     > * + * {
-        margin-top: 8px;
+        margin-top: var(--space-3xs);
     }
 }
diff --git a/app/components/side-menu/item.module.css b/app/components/side-menu/item.module.css
index 42cb7a45636..8229b3db974 100644
--- a/app/components/side-menu/item.module.css
+++ b/app/components/side-menu/item.module.css
@@ -1,7 +1,7 @@
 .link {
     display: block;
-    padding: 10px 12px;
-    border-radius: 6px;
+    padding: var(--space-2xs) var(--space-xs);
+    border-radius: var(--space-3xs);
     color: var(--main-color-light);
     transition: all var(--transition-medium) ease-in;
 

From d02e41001095db9cdd8e529aff4a9b335ca34392 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 18:24:49 +0200
Subject: [PATCH 19/51] CrateDownloadsList: Use fluid space scale

---
 app/components/crate-downloads-list.hbs        |  2 +-
 app/components/crate-downloads-list.module.css | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/crate-downloads-list.hbs b/app/components/crate-downloads-list.hbs
index 72ca30b42bc..058585e31b8 100644
--- a/app/components/crate-downloads-list.hbs
+++ b/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"}}
diff --git a/app/components/crate-downloads-list.module.css b/app/components/crate-downloads-list.module.css
index 1a3c849b094..910e60270ec 100644
--- a/app/components/crate-downloads-list.module.css
+++ b/app/components/crate-downloads-list.module.css
@@ -1,17 +1,17 @@
 .list {
     list-style: none;
     padding: 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;
 }
@@ -19,5 +19,5 @@
 .download-icon {
     color: #b13b89;
     margin-left: auto;
-    margin-right: 4px;
+    margin-right: var(--space-3xs);
 }

From 11543caab97d8fc47bd317311a38d5bc4d766253 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 18:33:04 +0200
Subject: [PATCH 20/51] CrateHeader: Use fluid space scale

---
 app/components/crate-header.module.css | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/app/components/crate-header.module.css b/app/components/crate-header.module.css
index f4eea4c3bec..7ce7a50b2ec 100644
--- a/app/components/crate-header.module.css
+++ b/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,14 +38,13 @@
 }
 
 .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;
@@ -58,7 +52,7 @@
     }
 
     .follow-button {
-        margin: -10px -10px 0 10px;
+        margin: -10px -10px 0 var(--space-s);
         grid-column: 2;
         grid-row: 1;
     }

From dc6a483bbd0ce93c58b9de3b8a0e9be403b6a3b8 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 18:34:38 +0200
Subject: [PATCH 21/51] CrateList: Use fluid space scale

---
 app/components/crate-list.hbs        | 2 +-
 app/components/crate-list.module.css | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/components/crate-list.hbs b/app/components/crate-list.hbs
index 6663a777423..c7810f9766d 100644
--- a/app/components/crate-list.hbs
+++ b/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}}
diff --git a/app/components/crate-list.module.css b/app/components/crate-list.module.css
index 6383a32a0c8..76b10aa5b56 100644
--- a/app/components/crate-list.module.css
+++ b/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);
     }
 }

From 5eeb928d64999d582624d793dc2c8d5073cc4675 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 19:04:00 +0200
Subject: [PATCH 22/51] CrateRow: Use fluid space scale

---
 app/components/crate-row.hbs        |  4 +--
 app/components/crate-row.module.css | 46 ++++++++++++++++-------------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/app/components/crate-row.hbs b/app/components/crate-row.hbs
index c33ebe657b6..8d2fe3f7a81 100644
--- a/app/components/crate-row.hbs
+++ b/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" >
diff --git a/app/components/crate-row.module.css b/app/components/crate-row.module.css
index 3974f7bffdb..b9ac1b64ce1 100644
--- a/app/components/crate-row.module.css
+++ b/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);
     }
 }

From fa195c2e987ceb0f17d3a9c3a9b0247712e2e3a9 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 21:55:33 +0200
Subject: [PATCH 23/51] DownloadGraph: Use fluid space scale

---
 app/components/download-graph.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/download-graph.module.css b/app/components/download-graph.module.css
index 66b264abc88..db23c7a4797 100644
--- a/app/components/download-graph.module.css
+++ b/app/components/download-graph.module.css
@@ -2,7 +2,7 @@
     display: grid;
     place-items: center;
     border: solid 1px var(--gray-border);
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
     min-height: 400px;
 }
 

From a6f5b6f4073991fa487a73b48c9b009ffa115ea7 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:04:25 +0200
Subject: [PATCH 24/51] EmailInput: Use fluid space scale

---
 app/components/email-input.module.css | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/components/email-input.module.css b/app/components/email-input.module.css
index 75f30210d17..29acec13ebf 100644
--- a/app/components/email-input.module.css
+++ b/app/components/email-input.module.css
@@ -1,14 +1,12 @@
 .friendly-message {
-    width: 95%;
-    margin-left: auto;
-    margin-right: auto;
+    margin-top: 0;
 }
 
 .row {
     width: 100%;
     border: 1px solid #d5d3cb;
     border-bottom-width: 0;
-    padding: 10px 20px;
+    padding: var(--space-2xs) var(--space-s);
     display: flex;
     align-items: center;
 
@@ -19,7 +17,7 @@
 
 .label {
     flex: 1;
-    margin-right: 0.4em;
+    margin-right: var(--space-xs);
     font-weight: bold;
 }
 
@@ -41,7 +39,7 @@
 
 .input {
     width: 400px;
-    margin-right: 10px;
+    margin-right: var(--space-xs);
 }
 
 .actions {
@@ -57,5 +55,5 @@
 }
 
 .save-button {
-    margin-right: 10px;
+    margin-right: var(--space-2xs);
 }

From ac3d785116518d8fe1e2d254c1fdfc48338d3269 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:09:20 +0200
Subject: [PATCH 25/51] OwnedCrateRow: Use fluid space scale

---
 app/components/owned-crate-row.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/owned-crate-row.module.css b/app/components/owned-crate-row.module.css
index b418bfcba79..2cb8f6a63d0 100644
--- a/app/components/owned-crate-row.module.css
+++ b/app/components/owned-crate-row.module.css
@@ -3,7 +3,7 @@
     align-items: center;
     background-color: #fff;
     border: 1px solid #d5d3cb;
-    padding: 20px 30px;
+    padding: var(--space-xs) var(--space-m);
     font-weight: bold;
     cursor: pointer;
     transition: color var(--transition-medium) ease-in;
@@ -21,9 +21,9 @@
     display: grid;
     place-items: center;
     flex-shrink: 0;
-    width: 36px;
-    height: 36px;
-    margin-left: 10px;
+    width: var(--space-l);
+    height: var(--space-l);
+    margin-left: var(--space-m);
     border: 2px solid #d5d3cb;
     border-radius: 50%;
 

From 519ba799c425fdedae1725765ef308bbb4e7f09e Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:12:21 +0200
Subject: [PATCH 26/51] PageHeader: Use fluid space scale

---
 app/components/page-header.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/page-header.module.css b/app/components/page-header.module.css
index 5ec503ddc42..f7031f3d2dd 100644
--- a/app/components/page-header.module.css
+++ b/app/components/page-header.module.css
@@ -1,7 +1,7 @@
 .header {
-    padding: 20px 25px;
+    padding: var(--space-s) var(--space-m);
     background-color: var(--main-bg-dark);
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
     border-radius: 5px;
 }
 
@@ -13,9 +13,9 @@
 
 .suffix {
     color: var(--main-color-light);
-    padding-left: 10px;
+    padding-left: var(--space-2xs);
 }
 
 .loading-spinner {
-    margin: 0 15px;
+    margin: 0 var(--space-2xs);
 }

From 63e7550bba30a7d2fb9d5d24009feff68f7a3412 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:19:36 +0200
Subject: [PATCH 27/51] Pagination: Use fluid space scale

---
 app/components/pagination.module.css | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/pagination.module.css b/app/components/pagination.module.css
index 7c61c8b9cea..7777a0853ff 100644
--- a/app/components/pagination.module.css
+++ b/app/components/pagination.module.css
@@ -1,18 +1,22 @@
 .pagination {
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 90%;
-    margin-bottom: 20px;
+    margin-bottom: var(--space-xs);
 
     ol {
         list-style: none;
         padding: 0;
+        margin: 0;
     }
-    ol, li { display: inline; }
+    ol, li { display: inline-block; }
 
     a {
         color: var(--main-color-light);
         text-decoration: none;
-        padding: 5px 6px;
+        padding: var(--space-3xs) var(--space-2xs);
+        border-radius: var(--space-3xs);
     }
     a:hover { background-color: var(--main-bg-dark); }
     a:global(.active) { background-color: var(--main-bg-dark); }

From f2deadae5d102682b0499582960452c3bb807159 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:24:20 +0200
Subject: [PATCH 28/51] RenderedHtml: Use fluid space scale

---
 app/components/rendered-html.module.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/rendered-html.module.css b/app/components/rendered-html.module.css
index 2654db671d0..0e6aa06280b 100644
--- a/app/components/rendered-html.module.css
+++ b/app/components/rendered-html.module.css
@@ -18,20 +18,20 @@
         code {
             display: block;
             overflow-x: auto;
-            padding: 1em;
+            padding: var(--space-s);
             background-color: #f6f8fa;
             font-size: 85%;
-            border-radius: 6px;
+            border-radius: var(--space-3xs);
         }
     }
 
     p, li {
         code {
             background-color: #f6f8fa;
-            border-radius: 6px;
+            border-radius: var(--space-3xs);
             font-size: 85%;
             margin: 0;
-            padding: .2em .4em;
+            padding: var(--space-4xs) var(--space-3xs);
         }
     }
 
@@ -46,7 +46,7 @@
 
         th, td {
             border: 1px solid #dfe2e5;
-            padding: 6px 13px;
+            padding: var(--space-2xs) var(--space-s);
         }
     }
 }

From df9c368b226b9272422d19c0fb409f0957a29de3 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:37:20 +0200
Subject: [PATCH 29/51] SearchForm: Use fluid space scale

---
 app/components/header.module.css      | 13 +++----------
 app/components/search-form.module.css | 24 ++++++++++--------------
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/app/components/header.module.css b/app/components/header.module.css
index f3b8e8cbb8a..df6e2c55000 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -78,13 +78,14 @@
     .hero & {
         justify-self: center;
         padding: var(--space-l) 0 var(--space-l-xl);
+        margin: 0;
     }
 }
 
 .hero-title {
     display: none;
-    margin: 0 0 20px;
-    font-size: 45px;
+    margin: 0 0 var(--space-m);
+    font-size: var(--space-m-l);
     text-align: center;
     color: white;
     text-shadow: 1px 3px 2px var(--green900);
@@ -92,14 +93,6 @@
     .hero & {
         display: block;
     }
-
-    @media only screen and (max-width: 820px) {
-        font-size: 30px;
-    }
-
-    @media only screen and (max-width: 550px) {
-        font-size: 24px;
-    }
 }
 
 .sep {
diff --git a/app/components/search-form.module.css b/app/components/search-form.module.css
index d663caa6c91..078e7bae6bc 100644
--- a/app/components/search-form.module.css
+++ b/app/components/search-form.module.css
@@ -1,29 +1,29 @@
 .form {
-    --border-radius: 15px;
-    --submit-icon-size: 16px;
-    --submit-button-padding-left: 8px;
-    --submit-button-padding-right: 10px;
+    --border-radius: 5000px;
+    --submit-icon-size: 1em;
+    --submit-button-padding-left: var(--space-2xs);
+    --submit-button-padding-right: var(--space-xs);
     --submit-button-width: calc(var(--submit-button-padding-left) + var(--submit-icon-size) + var(--submit-button-padding-right));
-    --input-padding: 5px;
-    --input-padding-left: 10px;
+    --input-padding: var(--space-3xs);
+    --input-padding-left: var(--space-xs);
     --input-padding-right: calc(var(--submit-button-width) + var(--input-padding));
 
     position: relative;
+    font-size: calc(var(--space-s) * 0.9);
 
     &.size-big {
-        --border-radius: 30px;
         --input-padding: 8px;
         --input-padding-left: 16px;
-        --submit-icon-size: 20px;
         --submit-button-padding-left: 12px;
         --submit-button-padding-right: 16px;
+
+        font-size: var(--space-s);
     }
 }
 
 .input {
-    --search-form-focus-shadow: 0 0 0 4px var(--yellow500);
+    --search-form-focus-shadow: 0 0 0 var(--space-3xs) var(--yellow500);
 
-    font-size: 90%;
     border: none;
     color: black;
     width: 100%;
@@ -32,10 +32,6 @@
     box-shadow: 1px 2px 4px 0 var(--green900);
     transition: box-shadow var(--transition-fast);
 
-    .size-big & {
-        font-size: 125%;
-    }
-
     &:focus {
         outline: none;
         box-shadow: var(--search-form-focus-shadow),

From a21e1d03f054657ae579645394c3e79faa90b9ae Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:46:49 +0200
Subject: [PATCH 30/51] SettingsPage: Use fluid space scale

---
 app/components/settings-page.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/settings-page.module.css b/app/components/settings-page.module.css
index cf32d985989..215e1d1cd7b 100644
--- a/app/components/settings-page.module.css
+++ b/app/components/settings-page.module.css
@@ -1,6 +1,6 @@
 .page {
     display: grid;
-    gap: 16px;
+    gap: var(--space-s);
 
     @media (--min-m) {
         grid-template:
@@ -11,6 +11,6 @@
 
 .content {
     h2:first-child {
-        margin-top: 4px;
+        margin-top: var(--space-3xs);
     }
 }

From 10a6b4eec83bb0286ec0c31bfda598ca1aef81e9 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:46:57 +0200
Subject: [PATCH 31/51] SortDropdown: Use fluid space scale

---
 app/components/sort-dropdown.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/sort-dropdown.module.css b/app/components/sort-dropdown.module.css
index 7fbf0746605..c381235aa76 100644
--- a/app/components/sort-dropdown.module.css
+++ b/app/components/sort-dropdown.module.css
@@ -1,12 +1,12 @@
 .trigger {
     background-color: var(--main-bg-dark);
     font-size: 85%;
-    padding: 10px;
+    padding: var(--space-2xs);
     border: none;
-    border-radius: 5px;
+    border-radius: var(--space-3xs);
 }
 
 .icon {
     color: #1a9c5d;
-    margin-right: 0.5em;
+    margin-right: var(--space-2xs);
 }

From eb0ab35bdf7703b7204e359a3259ff92a7091b1f Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 21 Oct 2022 22:52:05 +0200
Subject: [PATCH 32/51] StatsValue: Use fluid space scale

---
 app/components/stats-value.module.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/stats-value.module.css b/app/components/stats-value.module.css
index d73bd6563e8..14a0a585f0c 100644
--- a/app/components/stats-value.module.css
+++ b/app/components/stats-value.module.css
@@ -6,26 +6,26 @@
 }
 
 .value {
-    font-size: 30px;
+    font-size: var(--space-m-l);
     font-weight: bold;
-    line-height: 30px;
+    line-height: 1em;
 }
 
 .label {
     grid-column: 1;
     grid-row: 2;
     color: #76838a;
-    font-size: 16px;
+    font-size: var(--space-s);
     font-weight: normal;
-    line-height: 27px;
+    line-height: 1.6;
 }
 
 .icon {
     grid-column: 2;
     grid-row: 1 / 3;
-    width: 40px;
-    height: 40px;
-    margin-left: 16px;
-    margin-top: 4px;
+    width: var(--space-l-xl);
+    height: var(--space-l-xl);
+    margin-left: var(--space-s);
+    margin-top: var(--space-3xs);
     color: #76838a;
 }

From a09bd7c2348f0453bcf49623ec31aab4e66b9646 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 13:06:49 +0200
Subject: [PATCH 33/51] categories: Use fluid space scale

---
 app/styles/categories.module.css     | 25 +++++++++++++------------
 app/styles/category/index.module.css | 22 +++++++++++-----------
 app/templates/categories.hbs         |  2 +-
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/app/styles/categories.module.css b/app/styles/categories.module.css
index f18fc7e874e..205c68d420b 100644
--- a/app/styles/categories.module.css
+++ b/app/styles/categories.module.css
@@ -4,7 +4,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -13,16 +13,17 @@
 
 .list {
     background-color: white;
-    padding: 0 20px;
-    margin-bottom: 20px;
-}
+    border-radius: var(--space-3xs);
+    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    margin-bottom: var(--space-s);
 
-.row {
-    width: 100%;
-    border-bottom: 2px solid var(--gray-border);
-    padding: 20px 0;
+    > * {
+        padding: var(--space-s);
+    }
 
-    &:last-of-type { border: none; }
+    > * + * {
+        border-top: 1px solid hsla(51, 90%, 42%, .25);
+    }
 }
 
 .crate-count {
@@ -31,13 +32,13 @@
 
 .description {
     composes: small from './shared/typography.module.css';
-    margin-top: 4px;
-    line-height: 1.2rem;
+    margin-top: var(--space-2xs);
+    line-height: 1.5;
 }
 
 .categories-footer {
 	width: 100%;
-	padding: 1em;
+	margin: var(--space-2xs) 0;
 	text-align: center;
 	font-size: 85%;
 }
diff --git a/app/styles/category/index.module.css b/app/styles/category/index.module.css
index 36485d74649..38005284293 100644
--- a/app/styles/category/index.module.css
+++ b/app/styles/category/index.module.css
@@ -9,16 +9,16 @@
 
 .subcategories {
     background-color: white;
-    padding: 0 20px;
-    margin-bottom: 20px;
-}
+    border-radius: var(--space-3xs);
+    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    margin-bottom: var(--space-s);
 
-.subcategory {
-    border-bottom: 2px solid var(--gray-border);
-    padding: 20px 0;
+    > * {
+        padding: var(--space-s);
+    }
 
-    &:last-of-type {
-        border: none;
+    > * + * {
+        border-top: 1px solid hsla(51, 90%, 42%, .25);
     }
 }
 
@@ -28,14 +28,14 @@
 }
 
 .category-description {
-    margin-top: 6px;
+    margin-top: var(--space-2xs);
 }
 
 .results-meta {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -43,5 +43,5 @@
 }
 
 .list {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }
diff --git a/app/templates/categories.hbs b/app/templates/categories.hbs
index 1be504632e2..fce9af2f46f 100644
--- a/app/templates/categories.hbs
+++ b/app/templates/categories.hbs
@@ -24,7 +24,7 @@
     <div local-class='row' data-test-category={{category.slug}}>
       <div>
         <LinkTo @route="category" @model={{category.slug}} local-class="category-link">
-          {{category.category}}
+          {{~category.category~}}
         </LinkTo>
         <span local-class="crate-count" data-test-crate-count>
           {{format-num category.crates_cnt}} {{if (eq category.crates_cnt 1) "crate" "crates"}}

From 778ed53bd6226e3383145a248ac27e6ac6ed1df8 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 13:09:11 +0200
Subject: [PATCH 34/51] crate/reverse-dependencies: Use fluid space scale

---
 app/styles/crate/reverse-dependencies.module.css | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/styles/crate/reverse-dependencies.module.css b/app/styles/crate/reverse-dependencies.module.css
index f458071171d..df3842a6c4c 100644
--- a/app/styles/crate/reverse-dependencies.module.css
+++ b/app/styles/crate/reverse-dependencies.module.css
@@ -1,20 +1,18 @@
 .results-meta {
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .list {
     list-style: none;
-    margin: 0 0 20px;
+    margin: 0 0 var(--space-s);
     padding: 0;
 
-    li {
-        &:not(:first-child) {
-            margin-top: 10px;
-        }
+    > * + * {
+        margin-top: var(--space-2xs);
     }
 }
 
 .no-results {
     text-align: center;
-    margin: 20px;
+    margin: var(--space-m) 0;
 }

From 17f731f1f668b2adb6595695e0142285397cfd52 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 13:15:01 +0200
Subject: [PATCH 35/51] crate/settings: Use fluid space scale

---
 app/styles/crate/settings.module.css | 41 +++++++++++++---------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/app/styles/crate/settings.module.css b/app/styles/crate/settings.module.css
index d97762664f4..870400b5ce5 100644
--- a/app/styles/crate/settings.module.css
+++ b/app/styles/crate/settings.module.css
@@ -1,26 +1,21 @@
-.me-email {
-    border-bottom: 5px solid var(--gray-border);
-    padding-bottom: 20px;
-    margin-bottom: 20px;
-}
-
 .email-form {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
-    border: 2px solid var(--gray-border);
-    padding: 10px 20px;
+    gap: var(--space-s);
+    padding: var(--space-s) var(--space-m);
+    background-color: white;
+    border-radius: var(--space-3xs);
+    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
 }
 
 .email-input-label {
     font-weight: bold;
-    margin-right: 10px;
 }
 
 .email-input {
     width: 400px;
-    margin-right: 10px;
 }
 
 .submit-button {
@@ -29,18 +24,20 @@
 
 .list {
     background-color: white;
-    padding: 0 20px;
-}
-
-.row {
-    border-bottom: 2px solid var(--gray-border);
-    padding: 20px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-
-    &:last-of-type { border: none; }
+    border-radius: var(--space-3xs);
+    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+
+    > * {
+        padding: var(--space-s) var(--space-m);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    > * + * {
+        border-top: 1px solid hsla(51, 90%, 42%, .25);
+    }
 }
 
 .email-column {

From 64c6e22fc994d12ff021446b06b792d6fb978e7e Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 13:16:35 +0200
Subject: [PATCH 36/51] crate/version-dependencies: Use fluid space scale

---
 app/styles/crate/version-dependencies.module.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/styles/crate/version-dependencies.module.css b/app/styles/crate/version-dependencies.module.css
index 2667802ce94..7e5d72fb0ae 100644
--- a/app/styles/crate/version-dependencies.module.css
+++ b/app/styles/crate/version-dependencies.module.css
@@ -3,10 +3,8 @@
     margin: 0;
     padding: 0;
 
-    li {
-        &:not(:first-child) {
-            margin-top: 10px;
-        }
+    > * + * {
+        margin-top: var(--space-2xs);
     }
 }
 

From 1ab5f638841f6386cef4fbec417807d53819d264 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 13:19:03 +0200
Subject: [PATCH 37/51] crate/versions: Use fluid space scale

---
 app/styles/crate/versions.module.css | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/styles/crate/versions.module.css b/app/styles/crate/versions.module.css
index 19da67b5142..6ea10305341 100644
--- a/app/styles/crate/versions.module.css
+++ b/app/styles/crate/versions.module.css
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 10px;
+    margin-bottom: var(--space-2xs);
 
     @media only screen and (max-width: 550px) {
         display: block;
@@ -14,18 +14,15 @@
 
     @media only screen and (max-width: 550px) {
         display: block;
-        margin-bottom: 15px;
+        margin-bottom: var(--space-s);
     }
 }
-
 .list {
     list-style: none;
-    margin: 10px 0 0;
+    margin: var(--space-2xs) 0 var(--space-s);
     padding: 0;
 
-    li {
-        &:not(:first-child) {
-            margin-top: 10px;
-        }
+    > * + * {
+        margin-top: var(--space-2xs);
     }
 }

From a59107d23e5f5b8d1452b0dc5bbcc15d73d064e1 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 13:19:54 +0200
Subject: [PATCH 38/51] keyword: Use fluid space scale

---
 app/styles/keyword/index.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/styles/keyword/index.module.css b/app/styles/keyword/index.module.css
index ac17d47d41b..6113a849814 100644
--- a/app/styles/keyword/index.module.css
+++ b/app/styles/keyword/index.module.css
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -10,5 +10,5 @@
 }
 
 .list {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }

From eecb6163dabb1c12d07f3ae033b45078d383ec45 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 13:25:58 +0200
Subject: [PATCH 39/51] me: Use fluid space scale

---
 app/components/pending-owner-invite-row.hbs     | 10 ++++------
 .../pending-owner-invite-row.module.css         |  4 ++++
 app/styles/me/crates.module.css                 |  4 ++--
 app/styles/me/following.module.css              |  4 ++--
 app/styles/me/pending-invites.module.css        | 17 +++++++++--------
 5 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/app/components/pending-owner-invite-row.hbs b/app/components/pending-owner-invite-row.hbs
index bc6f50f9345..67c8dad77e0 100644
--- a/app/components/pending-owner-invite-row.hbs
+++ b/app/components/pending-owner-invite-row.hbs
@@ -18,12 +18,10 @@
       </h3>
     </div>
     <div>
-      <p>
-        Invited by:
-        <LinkTo @route="user" @model={{@invite.invited_by_username}} data-test-inviter-link>
-          {{@invite.invited_by_username}}
-        </LinkTo>
-      </p>
+      Invited by:
+      <LinkTo @route="user" @model={{@invite.invited_by_username}} data-test-inviter-link>
+        {{@invite.invited_by_username}}
+      </LinkTo>
     </div>
     <div local-class="date-column" data-test-date>
       {{date-format-distance-to-now @invite.created_at addSuffix=true}}
diff --git a/app/components/pending-owner-invite-row.module.css b/app/components/pending-owner-invite-row.module.css
index b09caf08b1a..7ac468fe911 100644
--- a/app/components/pending-owner-invite-row.module.css
+++ b/app/components/pending-owner-invite-row.module.css
@@ -7,6 +7,10 @@
 
 .crate-column {
     width: 200px;
+
+    h3 {
+        margin: 0;
+    }
 }
 
 .date-column {
diff --git a/app/styles/me/crates.module.css b/app/styles/me/crates.module.css
index ac17d47d41b..6113a849814 100644
--- a/app/styles/me/crates.module.css
+++ b/app/styles/me/crates.module.css
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -10,5 +10,5 @@
 }
 
 .list {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }
diff --git a/app/styles/me/following.module.css b/app/styles/me/following.module.css
index ac17d47d41b..6113a849814 100644
--- a/app/styles/me/following.module.css
+++ b/app/styles/me/following.module.css
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -10,5 +10,5 @@
 }
 
 .list {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }
diff --git a/app/styles/me/pending-invites.module.css b/app/styles/me/pending-invites.module.css
index 19813a7a861..9e78660a3fe 100644
--- a/app/styles/me/pending-invites.module.css
+++ b/app/styles/me/pending-invites.module.css
@@ -1,13 +1,14 @@
 .list {
-    background: white;
-}
+    background-color: white;
+    border-radius: var(--space-3xs);
+    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    margin-bottom: var(--space-s);
 
-.row {
-    margin: 0;
-    padding: 20px;
-    border-bottom: 2px solid #d5d3cb;
+    > * {
+        padding: var(--space-s);
+    }
 
-    &:last-of-type {
-        border: none;
+    > * + * {
+        border-top: 1px solid hsla(51, 90%, 42%, .25);
     }
 }

From b4e86b2e7ea9d282e1d648dad223e24890762c52 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 14:49:40 +0200
Subject: [PATCH 40/51] settings: Use fluid space scale

---
 app/styles/settings/appearance.module.css     |  8 +++----
 .../settings/email-notifications.module.css   |  8 +++----
 app/styles/settings/profile.module.css        | 24 ++++++++++++++-----
 app/styles/settings/tokens.module.css         |  0
 4 files changed, 25 insertions(+), 15 deletions(-)
 delete mode 100644 app/styles/settings/tokens.module.css

diff --git a/app/styles/settings/appearance.module.css b/app/styles/settings/appearance.module.css
index 8a4d790e653..6edbb804e60 100644
--- a/app/styles/settings/appearance.module.css
+++ b/app/styles/settings/appearance.module.css
@@ -1,19 +1,19 @@
 .themes-form {
     display: flex;
-    gap: 8px;
+    gap: var(--space-xs);
     flex-wrap: wrap;
 }
 
 .theme-label {
     display: inline-block;
-    padding: 16px;
+    padding: var(--space-s);
     background: white;
-    border-radius: 6px;
+    border-radius: var(--space-3xs);
     box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
 }
 
 .theme-preview {
     width: 200px;
     height: 160px;
-    margin-bottom: 16px;
+    margin-bottom: var(--space-s);
 }
diff --git a/app/styles/settings/email-notifications.module.css b/app/styles/settings/email-notifications.module.css
index 55542931c63..d6effb89b8c 100644
--- a/app/styles/settings/email-notifications.module.css
+++ b/app/styles/settings/email-notifications.module.css
@@ -1,5 +1,5 @@
 .me-email-notifications {
-    padding-bottom: 20px;
+    margin-bottom: var(--space-s);
     display: flex;
     flex-direction: column;
 
@@ -20,20 +20,19 @@
 .notifications-row {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: var(--space-2xs);
 }
 
 .select-all-button,
 .deselect-all-button {
     composes: yellow-button small from '../shared/buttons.module.css';
-    margin-right: 1rem;
 }
 
 .notifications-error,
 .notifications-success {
     border-top-width: 0;
     font-weight: bold;
-
-    padding: 0 10px 10px 20px;
 }
 
 .notifications-error {
@@ -44,7 +43,6 @@
     color: green;
 }
 
-
 .update-notifications-button {
     composes: yellow-button from '../shared/buttons.module.css';
 }
diff --git a/app/styles/settings/profile.module.css b/app/styles/settings/profile.module.css
index 207473bf069..532969b5626 100644
--- a/app/styles/settings/profile.module.css
+++ b/app/styles/settings/profile.module.css
@@ -1,11 +1,15 @@
 .me-profile {
-    margin-bottom: 24px;
+    margin-bottom: var(--space-s);
+
+    .info {
+        display: flex;
+    }
 
-    .info { display: flex; }
     dl {
-        margin: 0 0 0 30px;
-        line-height: 150%;
+        margin: 0 0 0 var(--space-m);
+        line-height: 1.5;
         font-size: 110%;
+
         dt {
             font-weight: bold;
             width: 150px;
@@ -13,7 +17,15 @@
             float: left;
             clear: both;
         }
-        dd { float: left; margin-left: 10px; }
+
+        dd {
+            float: left;
+            margin-left: var(--space-xs);
+        }
+    }
+
+    p {
+        line-height: 1.5;
     }
 
     @media only screen and (max-width: 550px) {
@@ -22,7 +34,7 @@
 }
 
 .me-email {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
     display: flex;
     flex-direction: column;
 }
diff --git a/app/styles/settings/tokens.module.css b/app/styles/settings/tokens.module.css
deleted file mode 100644
index e69de29bb2d..00000000000

From f0c7c34ea77c4a4f26f30875949322b1906aa92b Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 14:53:37 +0200
Subject: [PATCH 41/51] shared/buttons: Use fluid space scale

---
 app/styles/shared/buttons.module.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/styles/shared/buttons.module.css b/app/styles/shared/buttons.module.css
index bdddf18bfd8..8157106dde7 100644
--- a/app/styles/shared/buttons.module.css
+++ b/app/styles/shared/buttons.module.css
@@ -20,7 +20,7 @@
     --bg-color-top-dark: #fed585;
     --bg-color-bottom-dark: #fdbb39;
 
-    padding: 15px 40px;
+    padding: var(--space-xs) var(--space-m-l);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -29,14 +29,14 @@
     font-weight: bold;
     border: none;
     outline: 0;
-    border-radius: 30px;
+    border-radius: 5000px;
     background: linear-gradient(to bottom, var(--bg-color-top) 0%, var(--bg-color-bottom) 100%);
     cursor: pointer;
 
     img, svg {
         float: left;
         display: inline-block;
-        margin-right: 10px;
+        margin-right: var(--space-2xs);
     }
 
     &:hover, &:focus, &.active {
@@ -68,6 +68,5 @@
 }
 
 .small {
-    padding: 10px 20px;
-    border-radius: 30px;
+    padding: var(--space-2xs) var(--space-s);
 }

From 63a11541f458d0f96c4f9101f6fd60ad5f93d76a Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 14:58:22 +0200
Subject: [PATCH 42/51] application: Use fluid space scale

---
 app/styles/application.module.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index 7a0ff4c14f9..a32ae646fd9 100644
--- a/app/styles/application.module.css
+++ b/app/styles/application.module.css
@@ -126,7 +126,7 @@ a:not([href]) {
 pre:global(.terminal) {
     background: var(--main-color);
     color: white;
-    padding: 20px;
+    padding: var(--space-s);
     font-family: var(--font-monospace);
 }
 
@@ -136,8 +136,10 @@ abbr[title] {
 }
 
 noscript {
+    display: grid;
+    justify-items: center;
+    padding: var(--space-m);
     color: white;
-    padding: 10px 0;
 }
 
 :global {
@@ -171,7 +173,7 @@ noscript {
 }
 
 .inner-main {
-    --main-layout-padding: 15px;
+    --main-layout-padding: var(--space-s);
 
     composes: width-limit;
     display: flex;

From 704b58c18d7d3c027a9540efff8557e0d7e00b58 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:06:44 +0200
Subject: [PATCH 43/51] catch-all: Use fluid space scale

---
 app/styles/catch-all.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/catch-all.module.css b/app/styles/catch-all.module.css
index 4f4919c42fe..5fb92043369 100644
--- a/app/styles/catch-all.module.css
+++ b/app/styles/catch-all.module.css
@@ -7,7 +7,7 @@
 .content {
     display: grid;
     place-items: center;
-    margin: 25px 0;
+    margin: var(--space-m) 0;
 }
 
 .logo {

From 60940553ac9ade96cbcfba268dbd8bed844bc08f Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:06:53 +0200
Subject: [PATCH 44/51] category-slugs: Use fluid space scale

---
 app/styles/category-slugs.module.css | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/styles/category-slugs.module.css b/app/styles/category-slugs.module.css
index c20ebb72cbf..546572210aa 100644
--- a/app/styles/category-slugs.module.css
+++ b/app/styles/category-slugs.module.css
@@ -1,14 +1,21 @@
 .list {
     background-color: white;
-    padding: 20px 20px 0;
-    margin: 0;
+    border-radius: var(--space-3xs);
+    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    margin-bottom: var(--space-s);
 
     dt {
-        margin-bottom: 5px;
+        padding: var(--space-s);
+        padding-bottom: var(--space-2xs);
+        font-family: var(--font-monospace);
         font-weight: bold;
     }
 
     dd {
-        margin-bottom: 20px;
+        margin: 0 var(--space-s) var(--space-s);
+    }
+
+    > * + dt {
+        border-top: 1px solid hsla(51, 90%, 42%, .25);
     }
 }

From e8d1126ab7d14eb02b4c4bc2fd56ac4cb158b17c Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:08:24 +0200
Subject: [PATCH 45/51] crates: Use fluid space scale

---
 app/styles/crates.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/styles/crates.module.css b/app/styles/crates.module.css
index fcc92e45647..3c1dce5b772 100644
--- a/app/styles/crates.module.css
+++ b/app/styles/crates.module.css
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -10,5 +10,5 @@
 }
 
 .list {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }

From 8859cfef44f932aab75d2808239f7d655807d4ad Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:27:06 +0200
Subject: [PATCH 46/51] dashboard: Use fluid space scale

---
 .../crate-downloads-list.module.css           |  1 +
 app/styles/dashboard.module.css               | 87 ++++++++++---------
 app/templates/dashboard.hbs                   | 19 ++--
 3 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/app/components/crate-downloads-list.module.css b/app/components/crate-downloads-list.module.css
index 910e60270ec..fc2fcfbabea 100644
--- a/app/components/crate-downloads-list.module.css
+++ b/app/components/crate-downloads-list.module.css
@@ -1,6 +1,7 @@
 .list {
     list-style: none;
     padding: 0;
+    margin: 0;
 
     > * + * {
         margin-top: var(--space-2xs);
diff --git a/app/styles/dashboard.module.css b/app/styles/dashboard.module.css
index c7fbe7436ff..e3ac7371d87 100644
--- a/app/styles/dashboard.module.css
+++ b/app/styles/dashboard.module.css
@@ -5,14 +5,13 @@
 
 .header-icon {
     flex-shrink: 0;
-    margin-right: 10px;
+    margin-right: var(--space-2xs);
     width: 32px;
     height: 32px;
 }
 
 .stats {
     margin-left: auto;
-    padding: 10px;
 
     .num {
         font-size: 30px;
@@ -26,11 +25,24 @@
 
 .stats-label {
     composes: small from './shared/typography.module.css';
-    margin-left: 5px;
+    margin-left: var(--space-2xs);
 }
 
 .my-info {
     display: flex;
+    gap: var(--space-s);
+
+    h2 {
+        display: flex;
+        align-items: center;
+        gap: var(--space-3xs);
+        font-size: 1.05em;
+        margin: 0;
+
+        > * {
+            flex-shrink: 0;
+        }
+    }
 
     @media only screen and (max-width: 750px) {
         flex-direction: column;
@@ -40,27 +52,19 @@
 .my-crate-lists {
     flex-direction: column;
     flex-grow: 2;
-    margin-right: 20px;
 
     .header {
         display: flex;
         justify-content: space-between;
         align-items: center;
+    }
 
-        h2 {
-            font-size: 105%;
-            line-height: 20px;
-        }
-
-        svg {
-            display: inline-block; 
-            vertical-align: text-top;
-        }
+    > ul {
+        margin: var(--space-s) 0;
     }
 
     @media only screen and (max-width: 750px) {
         order: 1;
-        margin-right: 0;
     }
 }
 
@@ -78,12 +82,6 @@
 
 .my-feed {
     flex-grow: 5;
-    h2 { font-size: 105%; }
-
-    svg {
-        display: inline-block; 
-        vertical-align: text-top;
-    }
 
     @media only screen and (max-width: 750px) {
         order: 0;
@@ -91,23 +89,25 @@
 }
 
 .feed {
-    background: white;
-    padding: 0 20px 20px;
+    background-color: white;
+    border-radius: var(--space-3xs);
+    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    margin: var(--space-s) 0;
 }
 
 .feed-list {
+    list-style: none;
     margin: 0;
     padding: 0;
-}
 
-.feed-row {
-    display: flex;
-    align-items: baseline;
-    padding: 20px 0;
-    border-bottom: 2px solid var(--gray-border);
+    > * {
+        display: flex;
+        align-items: baseline;
+        padding: var(--space-s);
+    }
 
-    &:last-of-type {
-        border: none;
+    > * + * {
+        border-top: 1px solid hsla(51, 90%, 42%, .25);
     }
 }
 
@@ -122,16 +122,21 @@
 }
 
 .load-more {
-    display: block;
-    text-align: center;
-    width: 100%;
-    padding: 10px;
-    outline: 0;
-    border: 0;
-    background-color: #dbd9cf;
-    color: white;
-
-    &:hover, &:focus {
-        background-color: #c5c2b2;
+    padding: var(--space-s);
+    border-top: 1px solid hsla(51, 90%, 42%, .25);
+
+    button {
+        display: block;
+        text-align: center;
+        width: 100%;
+        padding: var(--space-2xs);
+        outline: 0;
+        border: 0;
+        background-color: #dbd9cf;
+        color: white;
+
+        &:hover, &:focus {
+            background-color: #c5c2b2;
+        }
     }
 }
diff --git a/app/templates/dashboard.hbs b/app/templates/dashboard.hbs
index 093c7f0b58c..9a9dc67f5b2 100644
--- a/app/templates/dashboard.hbs
+++ b/app/templates/dashboard.hbs
@@ -47,7 +47,7 @@
     <div local-class="feed">
       <ul local-class="feed-list">
         {{#each this.myFeed as |version|}}
-          <div local-class="feed-row">
+          <li local-class="feed-row">
             <LinkTo @route="crate.version" @models={{array version.crateName version.num}}>
               {{ version.crateName }}
               <span local-class="feed-version">{{ version.num }}</span>
@@ -55,20 +55,19 @@
             <span local-class="feed-date">
               {{date-format-distance-to-now version.created_at addSuffix=true}}
             </span>
-          </div>
+          </li>
         {{/each}}
       </ul>
 
-      {{#if this.loadMoreTask.isRunning}}
-        <span local-class='load-more'>
-          <LoadingSpinner />
-        </span>
-      {{else}}
-        {{#if this.hasMore}}
-          <button type="button" local-class='load-more' {{on "click" (perform this.loadMoreTask)}}>
+      {{#if this.hasMore}}
+        <div local-class="load-more">
+          <button type="button" disabled={{this.loadMoreTask.isRunning}} {{on "click" (perform this.loadMoreTask)}}>
             Load More
+            {{#if this.loadMoreTask.isRunning}}
+              <LoadingSpinner />
+            {{/if}}
           </button>
-        {{/if}}
+        </div>
       {{/if}}
     </div>
   </div>

From 1642310a86a3a91137e25293d96947acbff37b5c Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:46:10 +0200
Subject: [PATCH 47/51] index: Use fluid space scale

---
 app/styles/index.module.css | 95 +++++++++++++++----------------------
 app/templates/index.hbs     | 20 ++++----
 2 files changed, 47 insertions(+), 68 deletions(-)

diff --git a/app/styles/index.module.css b/app/styles/index.module.css
index 606b82c9407..bf51cdccc1a 100644
--- a/app/styles/index.module.css
+++ b/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);
     }
 }
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 9c4b923fc71..fa9b049f808 100644
--- a/app/templates/index.hbs
+++ b/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'>

From 170a5b7ad5ffb96cb9ea297010f44ae8edd01269 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:47:52 +0200
Subject: [PATCH 48/51] keywords: Use fluid space scale

---
 app/styles/keywords.module.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/styles/keywords.module.css b/app/styles/keywords.module.css
index 8706dfc4369..11f08c02cbc 100644
--- a/app/styles/keywords.module.css
+++ b/app/styles/keywords.module.css
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -11,16 +11,16 @@
 
 .list {
     background-color: white;
-    padding: 0 20px;
-    margin-bottom: 20px;
-}
+    border-radius: var(--space-3xs);
+    box-shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+    margin-bottom: var(--space-s);
 
-.row {
-    border-bottom: 2px solid var(--gray-border);
-    padding: 20px 0;
+    > * {
+        padding: var(--space-s);
+    }
 
-    &:last-of-type {
-        border: none;
+    > * + * {
+        border-top: 1px solid hsla(51, 90%, 42%, .25);
     }
 }
 

From 7f734a35658345af799fcbb192c4f9d497f98f10 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:49:57 +0200
Subject: [PATCH 49/51] search: Use fluid space scale

---
 app/styles/search.module.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/styles/search.module.css b/app/styles/search.module.css
index 2c3df955803..b8dfc930484 100644
--- a/app/styles/search.module.css
+++ b/app/styles/search.module.css
@@ -2,16 +2,16 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .warning {
-    margin: 0 0 16px;
-    padding: 8px;
+    margin: 0 0 var(--space-s);
+    padding: var(--space-2xs);
     color: var(--orange-700);
     background: var(--orange-100);
-    border-left: solid var(--orange-400) 4px;
-    border-radius: 2px;
+    border-left: solid var(--orange-400) var(--space-3xs);
+    border-radius: var(--space-4xs);
 }
 
 .sort-by-label {
@@ -19,11 +19,11 @@
 }
 
 .list {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }
 
 .try-again-button {
     composes: yellow-button from './shared/buttons.module.css';
     align-self: center;
-    margin-top: 20px;
+    margin-top: var(--space-m);
 }

From fdbbfc872aed25d335122dacc9e688150b197e3d Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:53:07 +0200
Subject: [PATCH 50/51] team: Use fluid space scale

---
 app/styles/team.module.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/styles/team.module.css b/app/styles/team.module.css
index a2afe7c5ce0..fae9e65e1ac 100644
--- a/app/styles/team.module.css
+++ b/app/styles/team.module.css
@@ -8,13 +8,13 @@
     }
 
     h2 {
-        margin-top: 10px;
+        margin-top: var(--space-2xs);
         color: var(--main-color-light);
     }
 }
 
 .avatar {
-    margin-right: 20px;
+    margin-right: var(--space-m);
 }
 
 .header-row {
@@ -23,7 +23,7 @@
 }
 
 .github-link {
-    margin-left: 16px;
+    margin-left: var(--space-s);
 
     &, &:hover {
         color: var(--main-color);
@@ -39,7 +39,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -47,5 +47,5 @@
 }
 
 .list {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }

From a68ecbf4c1e4e500ec1eacb30cde14ed68f846e2 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sun, 23 Oct 2022 15:53:15 +0200
Subject: [PATCH 51/51] user: Use fluid space scale

---
 app/styles/user.module.css | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/styles/user.module.css b/app/styles/user.module.css
index 05440329514..536031f91ca 100644
--- a/app/styles/user.module.css
+++ b/app/styles/user.module.css
@@ -1,10 +1,7 @@
 .header {
     display: flex;
     align-items: center;
-
-    h1 {
-        padding: 0 10px;
-    }
+    gap: var(--space-xs);
 }
 
 .github-link {
@@ -22,7 +19,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-s);
 }
 
 .sort-by-label {
@@ -30,5 +27,5 @@
 }
 
 .list {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-s);
 }