From bdc07e4ae47b402cfba4bc1d1de9e00160b0ffcf Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 21:34:54 +0100
Subject: [PATCH 01/15] Move `#p404` style to corresponding `catch-all.scss`
 file

---
 app/styles/app.scss       | 10 +---------
 app/styles/catch-all.scss |  8 ++++++++
 2 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 app/styles/catch-all.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 3055be4496a..3d8482f48ae 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -9,6 +9,7 @@ $gray-border: #d5d3cb;
 $link-color: rgb(0, 172, 91);
 
 @import "home";
+@import "catch-all";
 @import "crate";
 @import "me";
 
@@ -341,15 +342,6 @@ h1 {
   }
 }
 
-#p404 {
-    font-size: 120%;
-    line-height: 3em;
-    input {
-        width: 100%;
-        padding: 5px;
-    }
-}
-
 .arrow-in-list svg {
     background: #fff;
 }
diff --git a/app/styles/catch-all.scss b/app/styles/catch-all.scss
new file mode 100644
index 00000000000..eae460a5f99
--- /dev/null
+++ b/app/styles/catch-all.scss
@@ -0,0 +1,8 @@
+#p404 {
+    font-size: 120%;
+    line-height: 3em;
+    input {
+        width: 100%;
+        padding: 5px;
+    }
+}

From dbfaf02e01a8450072e8ab7f6ee1654a229f20a7 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 21:38:36 +0100
Subject: [PATCH 02/15] Move `#category-slugs` style to corresponding
 `category-slugs.scss` file

---
 app/styles/app.scss            |  1 +
 app/styles/category-slugs.scss |  9 +++++++++
 app/styles/crate.scss          | 10 ----------
 3 files changed, 10 insertions(+), 10 deletions(-)
 create mode 100644 app/styles/category-slugs.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 3d8482f48ae..8b61afe8437 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -10,6 +10,7 @@ $link-color: rgb(0, 172, 91);
 
 @import "home";
 @import "catch-all";
+@import "category-slugs";
 @import "crate";
 @import "me";
 
diff --git a/app/styles/category-slugs.scss b/app/styles/category-slugs.scss
new file mode 100644
index 00000000000..7f9d254076f
--- /dev/null
+++ b/app/styles/category-slugs.scss
@@ -0,0 +1,9 @@
+#category-slugs {
+    dt {
+        margin-bottom: 5px;
+        font-weight: bold;
+    }
+    dd {
+        margin-bottom: 20px;
+    }
+}
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
index 8e7fcaf059b..88f1da1bcfd 100644
--- a/app/styles/crate.scss
+++ b/app/styles/crate.scss
@@ -534,13 +534,3 @@
         float: right;
     }
 }
-
-#category-slugs {
-    dt {
-        margin-bottom: 5px;
-        font-weight: bold;
-    }
-    dd {
-        margin-bottom: 20px;
-    }
-}

From 8c497f8172c05b37be453a61f9da4a6d83fd8ee7 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 21:43:03 +0100
Subject: [PATCH 03/15] Move dashboard styles to corresponding `dashboard.scss`
 file

---
 app/styles/app.scss       |  1 +
 app/styles/dashboard.scss | 60 ++++++++++++++++++++++++++++++++++++++
 app/styles/me.scss        | 61 ---------------------------------------
 3 files changed, 61 insertions(+), 61 deletions(-)
 create mode 100644 app/styles/dashboard.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 8b61afe8437..d929c464114 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -12,6 +12,7 @@ $link-color: rgb(0, 172, 91);
 @import "catch-all";
 @import "category-slugs";
 @import "crate";
+@import "dashboard";
 @import "me";
 
 * {
diff --git a/app/styles/dashboard.scss b/app/styles/dashboard.scss
new file mode 100644
index 00000000000..4058dec56de
--- /dev/null
+++ b/app/styles/dashboard.scss
@@ -0,0 +1,60 @@
+#my-crate-lists {
+    flex-direction: column;
+    flex-grow: 2;
+    margin-right: 20px;
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+}
+
+#my-info {
+    display: flex;
+
+    @media only screen and (max-width: 750px) {
+        flex-direction: column;
+
+        #my-feed {
+            order: 0;
+        }
+        #my-crate-lists {
+            order: 1;
+            margin-right: 0;
+        }
+        #my-crates, #my-following { margin: 0; }
+    }
+}
+
+#my-feed {
+    flex-grow: 5;
+    h2 { font-size: 105%; }
+
+    .row {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .small { padding-left: 10px; }
+
+    .info {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+
+        .date { flex-grow: 2; text-align: right; }
+    }
+
+    .load-more {
+        $bg: rgb(219, 217, 207);
+        text-align: center;
+        padding: 10px;
+        outline: 0;
+        border: 0;
+        margin-bottom: 20px;
+        background-color: $bg;
+        color: white;
+        &:hover, &:focus { background-color: darken($bg, 10%); }
+    }
+}
diff --git a/app/styles/me.scss b/app/styles/me.scss
index 1e1e1189996..9b7e4572590 100644
--- a/app/styles/me.scss
+++ b/app/styles/me.scss
@@ -242,67 +242,6 @@
     }
 }
 
-#my-crate-lists {
-    flex-direction: column;
-    flex-grow: 2;
-    margin-right: 20px;
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-}
-
-#my-info {
-    display: flex;
-
-    @media only screen and (max-width: 750px) {
-        flex-direction: column;
-
-        #my-feed {
-            order: 0;
-        }
-        #my-crate-lists {
-            order: 1;
-            margin-right: 0;
-        }
-        #my-crates, #my-following { margin: 0; }
-    }
-}
-
-#my-feed {
-    flex-grow: 5;
-    h2 { font-size: 105%; }
-
-    .row {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .small { padding-left: 10px; }
-
-    .info {
-        display: flex;
-        align-items: baseline;
-        justify-content: space-between;
-
-        .date { flex-grow: 2; text-align: right; }
-    }
-
-    .load-more {
-        $bg: rgb(219, 217, 207);
-        text-align: center;
-        padding: 10px;
-        outline: 0;
-        border: 0;
-        margin-bottom: 20px;
-        background-color: $bg;
-        color: white;
-        &:hover, &:focus { background-color: darken($bg, 10%); }
-    }
-}
-
 #my-invites {
     flex-grow: 5;
 

From feb77147de7d59d2a230a126fbbbd0acd30b3c27 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 21:48:01 +0100
Subject: [PATCH 04/15] Move `application` route styles to corresponding file

---
 app/styles/app.scss         | 148 +-----------------------------------
 app/styles/application.scss | 144 +++++++++++++++++++++++++++++++++++
 2 files changed, 146 insertions(+), 146 deletions(-)
 create mode 100644 app/styles/application.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index d929c464114..258900666eb 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -8,6 +8,7 @@ $main-bg-dark: #edebdd;
 $gray-border: #d5d3cb;
 $link-color: rgb(0, 172, 91);
 
+@import "application";
 @import "home";
 @import "catch-all";
 @import "category-slugs";
@@ -44,101 +45,8 @@ body > div {
 }
 
 #noscript {
-  color: white;
-  padding: 10px 0;
-}
-
-#main {
-  display: flex;
-  flex-direction: column;
-
-  margin-bottom: 10px;
-  background-color: $main-bg;
-  padding: 15px;
-  border-radius: 10px;
-  box-shadow: 0px 0px 5px 2px #3b6837;
-  border: 5px solid #62865f;
-  color: $main-color;
-}
-
-#header {
     color: white;
-    position: relative;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    a {
-        color: white; text-decoration: none;
-        &:hover { color: darken(white, 15%); }
-    }
-
-    .sep { margin: 0 10px; color: darken($html-bg, 10%); }
-    .nav, .menu {
-        text-align: right;
-        margin-right: 5px;
-    }
-
-    .menu {
-        flex-grow: 2;
-        display: none;
-    }
-    .menu ul.dropdown {
-        right: 0;
-        left: auto;
-        min-width: 200px;
-    }
-
-    button {
-        background: none;
-        border: 0;
-        padding: 10px 0;
-
-        &.active {
-            background: rgb(42, 79, 39);
-            box-shadow: inset -2px 2px 4px 0px rgb(36, 61, 38);
-        }
-
-        img {
-          vertical-align: top;
-        }
-    }
-
-    .current-user-links {
-        left: auto;
-        right: 0;
-        min-width: 200px;
-    }
-    #doc-links {
-        left: auto;
-        min-width: 150px;
-    }
-    form.search {
-        display: flex;
-        flex-grow: 1;
-    }
-    @media only screen and (max-width: 820px) {
-        form.search { display: none; }
-    }
-    @media only screen and (max-width: 900px) {
-        .menu { display: block; }
-        .nav { display: none; }
-    }
-}
-
-#header input.search, #mobile-search input.search {
-    font-size: 90%;
-    border: none;
-    color: black;
-    margin-left: 30px;
-    padding: 5px 5px 5px 25px;
-    background-color: white;
-    background-image: url('/assets/search.png');
-    background-repeat: no-repeat;
-    background-position: 6px 6px;
-    background-size: 14px 15px;
-    border-radius: 15px;
+    padding: 10px 0;
 }
 
 form.search label {
@@ -150,26 +58,6 @@ form.search label {
     overflow: hidden;
 }
 
-#header input.search {
-    width: 100%;
-    margin-left: 16px;
-    margin-right: 16px;
-}
-
-#mobile-search {
-    display: none;
-    margin-bottom: 10px;
-    margin-left: 5px;
-    margin-right: 5px;
-    input.search {
-        width: 100%;
-        margin: 0;
-    }
-    @media only screen and (max-width: 820px) {
-        display: block;
-    }
-}
-
 input.search {
     box-shadow: none;
 }
@@ -232,28 +120,6 @@ a {
     &:hover { color: darken($main-color-light, 10%); }
 }
 
-.after-main-links {
-    margin: 40px;
-
-    a { color: white; }
-    a:hover { color: darken(white, 10%); }
-    .sep { margin: 0 10px; color: darken($html-bg, 10%); }
-
-    @media only screen and (max-width: 450px) {
-        margin: 20px;
-        .sep { display: none; }
-        display: flex;
-        flex-direction: column;
-
-        a {
-            width: 50%;
-            font-size: 110%;
-            padding: 5px;
-            &:not(:first-child) { border-top: 1px solid darken($html-bg, 10%); }
-        }
-    }
-}
-
 pre {
     background: $main-color;
     color: white;
@@ -323,16 +189,6 @@ ul.dropdown {
 
 .hidden { display: none; }
 
-.fork-me {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    @media only screen and (max-width: 1180px) {
-        display: none;
-    }
-}
-
 @media only screen and (max-width: 400px) {
     h1 { font-size: 1.5em; }
 }
diff --git a/app/styles/application.scss b/app/styles/application.scss
new file mode 100644
index 00000000000..9c88e94bff0
--- /dev/null
+++ b/app/styles/application.scss
@@ -0,0 +1,144 @@
+#main {
+  display: flex;
+  flex-direction: column;
+
+  margin-bottom: 10px;
+  background-color: $main-bg;
+  padding: 15px;
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px 2px #3b6837;
+  border: 5px solid #62865f;
+  color: $main-color;
+}
+
+#header {
+    color: white;
+    position: relative;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    a {
+        color: white; text-decoration: none;
+        &:hover { color: darken(white, 15%); }
+    }
+
+    .sep { margin: 0 10px; color: darken($html-bg, 10%); }
+    .nav, .menu {
+        text-align: right;
+        margin-right: 5px;
+    }
+
+    .menu {
+        flex-grow: 2;
+        display: none;
+    }
+    .menu ul.dropdown {
+        right: 0;
+        left: auto;
+        min-width: 200px;
+    }
+
+    button {
+        background: none;
+        border: 0;
+        padding: 10px 0;
+
+        &.active {
+            background: rgb(42, 79, 39);
+            box-shadow: inset -2px 2px 4px 0px rgb(36, 61, 38);
+        }
+
+        img {
+          vertical-align: top;
+        }
+    }
+
+    .current-user-links {
+        left: auto;
+        right: 0;
+        min-width: 200px;
+    }
+    #doc-links {
+        left: auto;
+        min-width: 150px;
+    }
+    form.search {
+        display: flex;
+        flex-grow: 1;
+    }
+    @media only screen and (max-width: 820px) {
+        form.search { display: none; }
+    }
+    @media only screen and (max-width: 900px) {
+        .menu { display: block; }
+        .nav { display: none; }
+    }
+}
+
+#header input.search, #mobile-search input.search {
+    font-size: 90%;
+    border: none;
+    color: black;
+    margin-left: 30px;
+    padding: 5px 5px 5px 25px;
+    background-color: white;
+    background-image: url('/assets/search.png');
+    background-repeat: no-repeat;
+    background-position: 6px 6px;
+    background-size: 14px 15px;
+    border-radius: 15px;
+}
+
+#header input.search {
+    width: 100%;
+    margin-left: 16px;
+    margin-right: 16px;
+}
+
+#mobile-search {
+    display: none;
+    margin-bottom: 10px;
+    margin-left: 5px;
+    margin-right: 5px;
+    input.search {
+        width: 100%;
+        margin: 0;
+    }
+    @media only screen and (max-width: 820px) {
+        display: block;
+    }
+}
+
+.after-main-links {
+    margin: 40px;
+
+    a { color: white; }
+    a:hover { color: darken(white, 10%); }
+    .sep { margin: 0 10px; color: darken($html-bg, 10%); }
+
+    @media only screen and (max-width: 450px) {
+        margin: 20px;
+        .sep { display: none; }
+        display: flex;
+        flex-direction: column;
+
+        a {
+            width: 50%;
+            font-size: 110%;
+            padding: 5px;
+            &:not(:first-child) { border-top: 1px solid darken($html-bg, 10%); }
+        }
+    }
+}
+
+.fork-me {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    @media only screen and (max-width: 1180px) {
+        display: none;
+    }
+}

From b7da18f0403d7364a5c4e871de10ff941e5418bb Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 21:49:57 +0100
Subject: [PATCH 05/15] Move `crate/version` route styles to corresponding file

---
 app/styles/app.scss           | 7 +------
 app/styles/crate/version.scss | 5 +++++
 2 files changed, 6 insertions(+), 6 deletions(-)
 create mode 100644 app/styles/crate/version.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 258900666eb..6a4fc419afe 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -13,6 +13,7 @@ $link-color: rgb(0, 172, 91);
 @import "catch-all";
 @import "category-slugs";
 @import "crate";
+@import "crate/version";
 @import "dashboard";
 @import "me";
 
@@ -212,9 +213,3 @@ abbr[title] {
     text-decoration: none;
     border-bottom: 1px dotted;
 }
-
-@media only percy {
-    #crate-downloads .graph {
-       display: none;
-    }
-}
diff --git a/app/styles/crate/version.scss b/app/styles/crate/version.scss
new file mode 100644
index 00000000000..383274e45eb
--- /dev/null
+++ b/app/styles/crate/version.scss
@@ -0,0 +1,5 @@
+@media only percy {
+    #crate-downloads .graph {
+       display: none;
+    }
+}

From 151a00e3f3be12249de97f3f95b55a49dd39bf2c Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 21:50:55 +0100
Subject: [PATCH 06/15] Move `loading` route styles to corresponding file

---
 app/styles/app.scss     | 13 +------------
 app/styles/loading.scss | 11 +++++++++++
 2 files changed, 12 insertions(+), 12 deletions(-)
 create mode 100644 app/styles/loading.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 6a4fc419afe..458380b425d 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -15,6 +15,7 @@ $link-color: rgb(0, 172, 91);
 @import "crate";
 @import "crate/version";
 @import "dashboard";
+@import "loading";
 @import "me";
 
 * {
@@ -81,18 +82,6 @@ span.small {
     color: rgb(166, 0, 0)
 }
 
-div.loading-state {
-    text-align: center;
-    height: 65vh;
-    padding-top: 30vh;
-}
-span.loading {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    background-image: url(/assets/ajax-loader.gif);
-}
-
 #flash {
     display: none;
     font-weight: bold;
diff --git a/app/styles/loading.scss b/app/styles/loading.scss
new file mode 100644
index 00000000000..3f77ecbfb50
--- /dev/null
+++ b/app/styles/loading.scss
@@ -0,0 +1,11 @@
+div.loading-state {
+    text-align: center;
+    height: 65vh;
+    padding-top: 30vh;
+}
+span.loading {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url(/assets/ajax-loader.gif);
+}

From 18b2a09d67898d44d73ce9a35e658a79eea35f92 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 21:57:33 +0100
Subject: [PATCH 07/15] Move `FlashMessage` component styles to a dedicated
 file

---
 app/styles/app.scss                      | 17 +----------------
 app/styles/components/flash-message.scss | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 16 deletions(-)
 create mode 100644 app/styles/components/flash-message.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 458380b425d..630c31d0fa8 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -14,6 +14,7 @@ $link-color: rgb(0, 172, 91);
 @import "category-slugs";
 @import "crate";
 @import "crate/version";
+@import "components/flash-message";
 @import "dashboard";
 @import "loading";
 @import "me";
@@ -82,22 +83,6 @@ span.small {
     color: rgb(166, 0, 0)
 }
 
-#flash {
-    display: none;
-    font-weight: bold;
-    font-size: 110%;
-    background-color: rgb(255, 213, 213);
-    border: 2px solid rgb(228, 136, 136);
-    text-align: center;
-    margin: 0 0 10px 0;
-    padding: 10px;
-    border-radius: 5px;
-
-    &.shown {
-        display: block;
-    }
-}
-
 a {
     color: $link-color;
     text-decoration: none;
diff --git a/app/styles/components/flash-message.scss b/app/styles/components/flash-message.scss
new file mode 100644
index 00000000000..b599a9a1729
--- /dev/null
+++ b/app/styles/components/flash-message.scss
@@ -0,0 +1,15 @@
+#flash {
+    display: none;
+    font-weight: bold;
+    font-size: 110%;
+    background-color: rgb(255, 213, 213);
+    border: 2px solid rgb(228, 136, 136);
+    text-align: center;
+    margin: 0 0 10px 0;
+    padding: 10px;
+    border-radius: 5px;
+
+    &.shown {
+        display: block;
+    }
+}

From 22990b0b01dbf6b2d001f4ef06a0ef493467bc60 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 22:02:27 +0100
Subject: [PATCH 08/15] Move button styles to a dedicated file

---
 app/styles/_buttons.scss | 54 +++++++++++++++++++++++++++++++++++++++
 app/styles/app.scss      |  2 ++
 app/styles/home.scss     | 55 ----------------------------------------
 3 files changed, 56 insertions(+), 55 deletions(-)
 create mode 100644 app/styles/_buttons.scss

diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss
new file mode 100644
index 00000000000..e5b8c0994f4
--- /dev/null
+++ b/app/styles/_buttons.scss
@@ -0,0 +1,54 @@
+@mixin vertical-gradient($start, $end) {
+    background: $end;
+    background: -moz-linear-gradient(top, $start 0%, $end 100%);
+    background: -webkit-gradient(linear, left top, left bottom,
+        color-stop(0%,$start),
+        color-stop(100%,$end));
+    background: -webkit-linear-gradient(top, $start 0%,$end 100%);
+    background: -ms-linear-gradient(top, $start 0%,$end 100%);
+    background: linear-gradient(to bottom, $start 0%,$end 100%);
+}
+
+@mixin button($start, $end) {
+    $start_dark: darken($start, 5%);
+    $end_dark: darken($end, 5%);
+    $start_light: lighten($start, 5%);
+    $end_light: lighten($end, 5%);
+
+    padding: 15px 40px;
+    display: inline-block;
+    color: $main-color;
+    text-decoration: none;
+    font-weight: bold;
+    border: none;
+    outline: 0;
+    border-radius: 30px;
+    @include vertical-gradient($start, $end);
+
+    img, svg {
+        float: left;
+        display: inline-block;
+        margin-right: 10px;
+    }
+
+    &:hover, &:focus { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
+    &.active { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
+    &[disabled] {
+        @include vertical-gradient($start_light, $end_light);
+        color: $main-color-light;
+    }
+}
+
+.yellow-button {
+    @include button(#fede9e, #fdc452);
+    vertical-align: middle;
+}
+
+button.small {
+    padding: 10px 20px;
+    border-radius: 30px;
+}
+
+.tan-button {
+    @include button(rgb(232, 227, 199), rgb(214, 205, 153));
+}
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 630c31d0fa8..f00ab4cc7de 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -8,6 +8,8 @@ $main-bg-dark: #edebdd;
 $gray-border: #d5d3cb;
 $link-color: rgb(0, 172, 91);
 
+@import "buttons";
+
 @import "application";
 @import "home";
 @import "catch-all";
diff --git a/app/styles/home.scss b/app/styles/home.scss
index 935e5f131dd..47e792344f3 100644
--- a/app/styles/home.scss
+++ b/app/styles/home.scss
@@ -1,58 +1,3 @@
-@mixin vertical-gradient($start, $end) {
-    background: $end;
-    background: -moz-linear-gradient(top, $start 0%, $end 100%);
-    background: -webkit-gradient(linear, left top, left bottom,
-        color-stop(0%,$start),
-        color-stop(100%,$end));
-    background: -webkit-linear-gradient(top, $start 0%,$end 100%);
-    background: -ms-linear-gradient(top, $start 0%,$end 100%);
-    background: linear-gradient(to bottom, $start 0%,$end 100%);
-}
-
-@mixin button($start, $end) {
-    $start_dark: darken($start, 5%);
-    $end_dark: darken($end, 5%);
-    $start_light: lighten($start, 5%);
-    $end_light: lighten($end, 5%);
-
-    padding: 15px 40px;
-    display: inline-block;
-    color: $main-color;
-    text-decoration: none;
-    font-weight: bold;
-    border: none;
-    outline: 0;
-    border-radius: 30px;
-    @include vertical-gradient($start, $end);
-
-    img, svg {
-        float: left;
-        display: inline-block;
-        margin-right: 10px;
-    }
-
-    &:hover, &:focus { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
-    &.active { @include vertical-gradient($start_dark, $end_dark); outline: 0; }
-    &[disabled] {
-        @include vertical-gradient($start_light, $end_light);
-        color: $main-color-light;
-    }
-}
-
-.yellow-button {
-    @include button(#fede9e, #fdc452);
-    vertical-align: middle;
-}
-
-button.small {
-    padding: 10px 20px;
-    border-radius: 30px;
-}
-
-.tan-button {
-    @include button(rgb(232, 227, 199), rgb(214, 205, 153));
-}
-
 #title-header {
     text-align: center;
     border-bottom: 5px solid $gray-border;

From fe9189d278b9fdfdf071144639901ce87ab11fa6 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 22:05:53 +0100
Subject: [PATCH 09/15] Move `index` route styles to dedicated file

---
 app/styles/app.scss   |  1 +
 app/styles/home.scss  | 76 -------------------------------------------
 app/styles/index.scss | 75 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 76 deletions(-)
 create mode 100644 app/styles/index.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index f00ab4cc7de..9afed41273b 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -18,6 +18,7 @@ $link-color: rgb(0, 172, 91);
 @import "crate/version";
 @import "components/flash-message";
 @import "dashboard";
+@import "index";
 @import "loading";
 @import "me";
 
diff --git a/app/styles/home.scss b/app/styles/home.scss
index 47e792344f3..20f510c9546 100644
--- a/app/styles/home.scss
+++ b/app/styles/home.scss
@@ -1,67 +1,8 @@
-#title-header {
-    text-align: center;
-    border-bottom: 5px solid $gray-border;
-    padding-bottom: 40px;
-
-    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;
-        }
-    }
-}
-
 .dl {
     text-decoration: underline;
     font-weight: bold;
 }
 
-#blurb {
-    margin: 30px 0 40px 0;
-    display: flex;
-
-    #intro { flex: 6; line-height: 25px; padding: 10px;}
-
-    #stats {
-        flex: 4;
-        display: flex;
-        flex-direction: column;
-
-        border-left: 1px solid $gray-border;
-        padding: 10px;
-
-        span { margin-left: 10px; }
-        .num {
-            font-size: 30px;
-            font-weight: bold;
-        }
-        .crates { margin-top: 10px; }
-        .crates, .downloads {
-            display: flex;
-            align-items: center;
-        }
-    }
-
-    @media only screen and (max-width: 530px) {
-        flex-direction: column;
-        #stats {
-            border: none;
-            margin: auto;
-        }
-        .crates, .downloads {
-            justify-content: center;
-        }
-    }
-}
-
 .crate-lists {
     display: flex;
 
@@ -105,20 +46,3 @@
     li a:hover { background-color: darken($main-bg-dark, 5%); }
 
 }
-
-#home-crates {
-    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%;
-      }
-    }
-}
diff --git a/app/styles/index.scss b/app/styles/index.scss
new file mode 100644
index 00000000000..f3321fa4fb4
--- /dev/null
+++ b/app/styles/index.scss
@@ -0,0 +1,75 @@
+#title-header {
+    text-align: center;
+    border-bottom: 5px solid $gray-border;
+    padding-bottom: 40px;
+
+    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;
+        }
+    }
+}
+
+#blurb {
+    margin: 30px 0 40px 0;
+    display: flex;
+
+    #intro { flex: 6; line-height: 25px; padding: 10px;}
+
+    #stats {
+        flex: 4;
+        display: flex;
+        flex-direction: column;
+
+        border-left: 1px solid $gray-border;
+        padding: 10px;
+
+        span { margin-left: 10px; }
+        .num {
+            font-size: 30px;
+            font-weight: bold;
+        }
+        .crates { margin-top: 10px; }
+        .crates, .downloads {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    @media only screen and (max-width: 530px) {
+        flex-direction: column;
+        #stats {
+            border: none;
+            margin: auto;
+        }
+        .crates, .downloads {
+            justify-content: center;
+        }
+    }
+}
+
+#home-crates {
+    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%;
+      }
+    }
+}

From c10e885a2a20fd25f14059d77521db5e11bbfb83 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 22:07:44 +0100
Subject: [PATCH 10/15] Move `search` route styles to dedicated file

---
 app/styles/app.scss    | 1 +
 app/styles/crate.scss  | 4 ----
 app/styles/search.scss | 3 +++
 3 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 app/styles/search.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 9afed41273b..51ca9f46537 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -21,6 +21,7 @@ $link-color: rgb(0, 172, 91);
 @import "index";
 @import "loading";
 @import "me";
+@import "search";
 
 * {
   box-sizing: border-box;
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
index 88f1da1bcfd..63227700828 100644
--- a/app/styles/crate.scss
+++ b/app/styles/crate.scss
@@ -52,10 +52,6 @@
     }
 }
 
-.crate-search .loading-spinner {
-    margin: 0 15px;
-}
-
 #selection {
     width: 100%;
     display: flex;
diff --git a/app/styles/search.scss b/app/styles/search.scss
new file mode 100644
index 00000000000..7d52939ef76
--- /dev/null
+++ b/app/styles/search.scss
@@ -0,0 +1,3 @@
+.crate-search .loading-spinner {
+    margin: 0 15px;
+}

From dccc2a109c12387bda95d6ff1a0d3659e7714604 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 22:09:46 +0100
Subject: [PATCH 11/15] Move `CrateTomlCopy` component styles to a dedicated
 file

---
 app/styles/app.scss                        |  1 +
 app/styles/components/crate-toml-copy.scss | 21 +++++++++++++++++++++
 app/styles/crate.scss                      | 22 ----------------------
 3 files changed, 22 insertions(+), 22 deletions(-)
 create mode 100644 app/styles/components/crate-toml-copy.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 51ca9f46537..54a93a0d3f5 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -16,6 +16,7 @@ $link-color: rgb(0, 172, 91);
 @import "category-slugs";
 @import "crate";
 @import "crate/version";
+@import "components/crate-toml-copy";
 @import "components/flash-message";
 @import "dashboard";
 @import "index";
diff --git a/app/styles/components/crate-toml-copy.scss b/app/styles/components/crate-toml-copy.scss
new file mode 100644
index 00000000000..99bb2856055
--- /dev/null
+++ b/app/styles/components/crate-toml-copy.scss
@@ -0,0 +1,21 @@
+.crate-toml-copy {
+    button, button:active {
+        background-color: #FFFFFF;
+        border: none;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .copy-notification {
+        font-size: 70%;
+        font-weight: bold;
+        position: absolute;
+
+        &.copy-success {
+            color: $link-color;
+        }
+        &.copy-failure {
+            color: red;
+        }
+    }
+}
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
index 63227700828..f2a1eab1c40 100644
--- a/app/styles/crate.scss
+++ b/app/styles/crate.scss
@@ -84,28 +84,6 @@
     }
 }
 
-.crate-toml-copy {
-    button, button:active {
-        background-color: #FFFFFF;
-        border: none;
-        cursor: pointer;
-        position: relative;
-    }
-
-    .copy-notification {
-        font-size: 70%;
-        font-weight: bold;
-        position: absolute;
-
-        &.copy-success {
-            color: $link-color;
-        }
-        &.copy-failure {
-            color: red;
-        }
-    }
-}
-
 #results {
     width: 100%;
     display: flex;

From 33a7b880c10da6c8d6d67c19d8671090a848b29f Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 22:11:29 +0100
Subject: [PATCH 12/15] Move `crate/version` route styles to corresponding file

---
 app/styles/crate.scss         | 224 ----------------------------------
 app/styles/crate/version.scss | 224 ++++++++++++++++++++++++++++++++++
 2 files changed, 224 insertions(+), 224 deletions(-)

diff --git a/app/styles/crate.scss b/app/styles/crate.scss
index f2a1eab1c40..f37b9b576a6 100644
--- a/app/styles/crate.scss
+++ b/app/styles/crate.scss
@@ -246,230 +246,6 @@
     a.active { background-color: $main-bg-dark; }
 }
 
-.crate-info {
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 20px;
-    border-bottom: 5px solid $gray-border;
-    margin-bottom: 20px;
-
-    @media only screen and (min-width: 890px) {
-        flex-direction: row;
-
-        .docs {
-            flex: 7;
-            padding-right: 40px;
-            max-width: 640px;
-        }
-        .authorship {
-            flex: 3;
-            border-left: 2px solid $gray-border;
-            padding-left: 20px;
-
-            .top, .bottom {
-                flex-direction: column;
-            }
-
-            ul {
-              padding-left: 20px;
-            }
-        }
-    }
-
-    @media only screen and (max-width: 480px) {
-        .authorship {
-            .top, .bottom {
-                flex-direction: column;
-            }
-        }
-    }
-
-    .authorship {
-        .top, .bottom {
-            display: flex;
-
-            > * { flex: 1; }
-        }
-    }
-
-    .about {
-        line-height: 180%;
-        margin-bottom: 40px;
-    }
-
-
-    ul.owners, ul.keywords {
-        display: flex;
-        flex-wrap: wrap;
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        li { margin: 0 7px 7px 0; }
-    }
-
-    .install {
-        font-size: 120%;
-        padding: 10px;
-        background-color: darken($main-bg-dark, 8%);
-        display: flex;
-
-        .action {
-            display: none;
-            text-align: center;
-            padding-top: 18px;
-            padding-right: 10px;
-        }
-        code {
-            flex: 1;
-            background: $main-color;
-            color: white;
-            padding: 20px;
-        }
-        @media only screen and (min-width: 500px) {
-            .action { flex: 2; display: block; }
-            code { flex: 8; }
-        }
-        .crate-toml-copy {
-            display: flex;
-
-            button, button:active {
-                padding: 5px 0;
-                width: 60px;
-                cursor: pointer;
-                position: relative;
-            }
-            button:hover {
-                background: #edebdd;
-            }
-
-            .copy-notification {
-                &.copy-success {
-                    width: 100%;
-                    text-align: center;
-                }
-
-                &.copy-failure {
-                    bottom: -2rem;
-                    right: 0;
-                    width: 18rem;
-                    text-align: right;
-                }
-            }
-        }
-    }
-    .crate-readme {
-        line-height: 1.5;
-        overflow-wrap: break-word;
-
-        img {
-            max-width: 100%;
-        }
-
-        pre {
-            overflow-x: auto;
-        }
-
-        p {
-            code {
-                background-color: #fff;
-                padding: 0 2px;
-            }
-        }
-
-        table {
-            border-collapse: collapse;
-            display: block;
-            overflow-x: auto;
-
-            th, td {
-                border: 1px solid #dfe2e5;
-                padding: 6px 13px;
-            }
-        }
-    }
-    .last-update {
-        color: $main-color-light;
-        font-size: 90%;
-        line-height: 25px;
-    }
-    .date {
-        font-weight: bold;
-        margin-bottom: 40px;
-    }
-
-    /*
-        Since crate_size is a new field, older crates won't have it.
-        Preserve behaviour for older crates. For newer ones, keep
-        `Crate Size` closer to last updated.
-    */
-    .date-with-small-margin-bot {
-        font-weight: bold;
-        margin-bottom: 20px;
-    }
-    .crate-size {
-        color: $main-color-light;
-        font-size: 90%;
-        line-height: 25px;
-    }
-    .size {
-        font-weight: bold;
-        margin-bottom: 40px;
-    }
-}
-
-#crate-downloads {
-    display: flex;
-    flex-wrap: wrap;
-
-    h3 { width: 100%; }
-    .stat {
-        border-left: 1px solid $gray-border;
-        padding: 10px 20px;
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        flex-grow: 1;
-
-        .num {
-            font-size: 160%;
-            font-weight: bold;
-            margin-bottom: 4px;
-            &__align {
-                position: relative;
-                bottom: 0.4rem;
-            }
-        }
-    }
-
-    .stats {
-        flex-grow: 7;
-        display: flex;
-        flex-wrap: wrap;
-    }
-    .versions {
-        flex-grow: 3;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        .small { padding: 10px; }
-    }
-
-    .button-holder { position: relative; }
-
-    .graph {
-        flex-grow: 10;
-        width: 100%;
-        margin: 30px 0;
-        padding-bottom: 20px;
-
-        h4 { color: $main-color-light; }
-    }
-    .graph-data {
-        width: 100%;
-        height: 500px;
-    }
-}
-
 #crate-links {
     display: flex;
     padding-bottom: 20px;
diff --git a/app/styles/crate/version.scss b/app/styles/crate/version.scss
index 383274e45eb..037ed0e4e70 100644
--- a/app/styles/crate/version.scss
+++ b/app/styles/crate/version.scss
@@ -1,3 +1,227 @@
+.crate-info {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 20px;
+    border-bottom: 5px solid $gray-border;
+    margin-bottom: 20px;
+
+    @media only screen and (min-width: 890px) {
+        flex-direction: row;
+
+        .docs {
+            flex: 7;
+            padding-right: 40px;
+            max-width: 640px;
+        }
+        .authorship {
+            flex: 3;
+            border-left: 2px solid $gray-border;
+            padding-left: 20px;
+
+            .top, .bottom {
+                flex-direction: column;
+            }
+
+            ul {
+                padding-left: 20px;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 480px) {
+        .authorship {
+            .top, .bottom {
+                flex-direction: column;
+            }
+        }
+    }
+
+    .authorship {
+        .top, .bottom {
+            display: flex;
+
+            > * { flex: 1; }
+        }
+    }
+
+    .about {
+        line-height: 180%;
+        margin-bottom: 40px;
+    }
+
+
+    ul.owners, ul.keywords {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        li { margin: 0 7px 7px 0; }
+    }
+
+    .install {
+        font-size: 120%;
+        padding: 10px;
+        background-color: darken($main-bg-dark, 8%);
+        display: flex;
+
+        .action {
+            display: none;
+            text-align: center;
+            padding-top: 18px;
+            padding-right: 10px;
+        }
+        code {
+            flex: 1;
+            background: $main-color;
+            color: white;
+            padding: 20px;
+        }
+        @media only screen and (min-width: 500px) {
+            .action { flex: 2; display: block; }
+            code { flex: 8; }
+        }
+        .crate-toml-copy {
+            display: flex;
+
+            button, button:active {
+                padding: 5px 0;
+                width: 60px;
+                cursor: pointer;
+                position: relative;
+            }
+            button:hover {
+                background: #edebdd;
+            }
+
+            .copy-notification {
+                &.copy-success {
+                    width: 100%;
+                    text-align: center;
+                }
+
+                &.copy-failure {
+                    bottom: -2rem;
+                    right: 0;
+                    width: 18rem;
+                    text-align: right;
+                }
+            }
+        }
+    }
+    .crate-readme {
+        line-height: 1.5;
+        overflow-wrap: break-word;
+
+        img {
+            max-width: 100%;
+        }
+
+        pre {
+            overflow-x: auto;
+        }
+
+        p {
+            code {
+                background-color: #fff;
+                padding: 0 2px;
+            }
+        }
+
+        table {
+            border-collapse: collapse;
+            display: block;
+            overflow-x: auto;
+
+            th, td {
+                border: 1px solid #dfe2e5;
+                padding: 6px 13px;
+            }
+        }
+    }
+    .last-update {
+        color: $main-color-light;
+        font-size: 90%;
+        line-height: 25px;
+    }
+    .date {
+        font-weight: bold;
+        margin-bottom: 40px;
+    }
+
+    /*
+        Since crate_size is a new field, older crates won't have it.
+        Preserve behaviour for older crates. For newer ones, keep
+        `Crate Size` closer to last updated.
+    */
+    .date-with-small-margin-bot {
+        font-weight: bold;
+        margin-bottom: 20px;
+    }
+    .crate-size {
+        color: $main-color-light;
+        font-size: 90%;
+        line-height: 25px;
+    }
+    .size {
+        font-weight: bold;
+        margin-bottom: 40px;
+    }
+}
+
+#crate-downloads {
+    display: flex;
+    flex-wrap: wrap;
+
+    h3 { width: 100%; }
+    .stat {
+        border-left: 1px solid $gray-border;
+        padding: 10px 20px;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        flex-grow: 1;
+
+        .num {
+            font-size: 160%;
+            font-weight: bold;
+            margin-bottom: 4px;
+            &__align {
+                position: relative;
+                bottom: 0.4rem;
+            }
+        }
+    }
+
+    .stats {
+        flex-grow: 7;
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .versions {
+        flex-grow: 3;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        .small { padding: 10px; }
+    }
+
+    .button-holder { position: relative; }
+
+    .graph {
+        flex-grow: 10;
+        width: 100%;
+        margin: 30px 0;
+        padding-bottom: 20px;
+
+        h4 { color: $main-color-light; }
+    }
+    .graph-data {
+        width: 100%;
+        height: 500px;
+    }
+}
+
 @media only percy {
     #crate-downloads .graph {
        display: none;

From 5620f3f121b4cb2e2e83a2a318a867bc21a86cb9 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 22:11:57 +0100
Subject: [PATCH 13/15] Move `crate/versions` route styles to corresponding
 file

---
 app/styles/crate.scss          | 10 ----------
 app/styles/crate/versions.scss |  9 +++++++++
 2 files changed, 9 insertions(+), 10 deletions(-)
 create mode 100644 app/styles/crate/versions.scss

diff --git a/app/styles/crate.scss b/app/styles/crate.scss
index f37b9b576a6..1d46abdfc69 100644
--- a/app/styles/crate.scss
+++ b/app/styles/crate.scss
@@ -274,13 +274,3 @@
 }
 
 .all-versions-back { margin-bottom: 20px; }
-
-#crate-all-versions {
-    margin-top: 10px;
-
-    .small { margin-left: 20px; display: inline-block; }
-    a.arrow {
-        display: inline-block;
-        float: right;
-    }
-}
diff --git a/app/styles/crate/versions.scss b/app/styles/crate/versions.scss
new file mode 100644
index 00000000000..fa75d56d7e6
--- /dev/null
+++ b/app/styles/crate/versions.scss
@@ -0,0 +1,9 @@
+#crate-all-versions {
+    margin-top: 10px;
+
+    .small { margin-left: 20px; display: inline-block; }
+    a.arrow {
+        display: inline-block;
+        float: right;
+    }
+}

From 85629c499211189756506922ef15a8e94125b448 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 22:13:15 +0100
Subject: [PATCH 14/15] styles: Merge `pagination` styles

---
 app/styles/app.scss   | 18 ++++++++++++++++++
 app/styles/crate.scss | 20 --------------------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 54a93a0d3f5..354395d8a38 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -108,6 +108,24 @@ pre {
 }
 
 .pagination {
+    text-align: center;
+    font-size: 90%;
+    margin-bottom: 20px;
+
+    ol {
+        list-style: none;
+        padding: 0;
+    }
+    ol, li { display: inline; }
+
+    a {
+        color: $main-color-light;
+        text-decoration: none;
+        padding: 5px 6px;
+    }
+    a:hover { background-color: $main-bg-dark; }
+    a.active { background-color: $main-bg-dark; }
+
     img, svg { vertical-align: middle; }
 
     .next.active,
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
index 1d46abdfc69..8dd8bbda82e 100644
--- a/app/styles/crate.scss
+++ b/app/styles/crate.scss
@@ -226,26 +226,6 @@
     }
 }
 
-.pagination {
-    text-align: center;
-    font-size: 90%;
-    margin-bottom: 20px;
-
-    ol {
-        list-style: none;
-        padding: 0;
-    }
-    ol, li { display: inline; }
-
-    a {
-        color: $main-color-light;
-        text-decoration: none;
-        padding: 5px 6px;
-    }
-    a:hover { background-color: $main-bg-dark; }
-    a.active { background-color: $main-bg-dark; }
-}
-
 #crate-links {
     display: flex;
     padding-bottom: 20px;

From 7f5c164c5aac8a234a5c55b86632f6cf8ee0b174 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias.bieniek@gmail.com>
Date: Tue, 7 Jan 2020 22:30:27 +0100
Subject: [PATCH 15/15] Move `Pagination` component styles to a dedicated file

---
 app/styles/app.scss                   | 30 +--------------------------
 app/styles/components/pagination.scss | 28 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 29 deletions(-)
 create mode 100644 app/styles/components/pagination.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index 354395d8a38..8edb10652dc 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -18,6 +18,7 @@ $link-color: rgb(0, 172, 91);
 @import "crate/version";
 @import "components/crate-toml-copy";
 @import "components/flash-message";
+@import "components/pagination";
 @import "dashboard";
 @import "index";
 @import "loading";
@@ -107,35 +108,6 @@ pre {
     font-family: Consolas, Monaco, 'Andale Mono', monospace;
 }
 
-.pagination {
-    text-align: center;
-    font-size: 90%;
-    margin-bottom: 20px;
-
-    ol {
-        list-style: none;
-        padding: 0;
-    }
-    ol, li { display: inline; }
-
-    a {
-        color: $main-color-light;
-        text-decoration: none;
-        padding: 5px 6px;
-    }
-    a:hover { background-color: $main-bg-dark; }
-    a.active { background-color: $main-bg-dark; }
-
-    img, svg { vertical-align: middle; }
-
-    .next.active,
-    .prev.active,
-    .next:hover,
-    .prev:hover {
-        background: none;
-    }
-}
-
 button.dropdown, a.dropdown {
     color: inherit;
     cursor: pointer;
diff --git a/app/styles/components/pagination.scss b/app/styles/components/pagination.scss
new file mode 100644
index 00000000000..0d68f690121
--- /dev/null
+++ b/app/styles/components/pagination.scss
@@ -0,0 +1,28 @@
+.pagination {
+    text-align: center;
+    font-size: 90%;
+    margin-bottom: 20px;
+
+    ol {
+        list-style: none;
+        padding: 0;
+    }
+    ol, li { display: inline; }
+
+    a {
+        color: $main-color-light;
+        text-decoration: none;
+        padding: 5px 6px;
+    }
+    a:hover { background-color: $main-bg-dark; }
+    a.active { background-color: $main-bg-dark; }
+
+    img, svg { vertical-align: middle; }
+
+    .next.active,
+    .prev.active,
+    .next:hover,
+    .prev:hover {
+        background: none;
+    }
+}