UX: Improve alignment and spacing of category headers (#12829)

UX: Improve alignment and spacing of category headers (#12829)

diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index bcb53b1..277d08e 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -95,6 +95,11 @@
 
 .category-heading {
   max-width: 100%;
+  p {
+    margin-top: 0;
+    line-height: $line-height-large;
+    font-size: $font-up-3;
+  }
 }
 
 .category-logo.aspect-image {
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 4292172..db5cf44 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -210,16 +210,9 @@ button.dismiss-read {
   }
 }
 
-.category-heading {
-  p {
-    line-height: $line-height-large;
-    font-size: $font-up-3;
-  }
-}
-
 .category-logo.aspect-image {
   float: left;
-  margin: 0.25em 1em 0.5em 0;
+  margin: 0.33em 2em 2em 0;
 }
 
 /* Tablet (portrait) ----------- */
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 2b9fb91..c6474ee 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -418,10 +418,16 @@ tr.category-topic-link {
   }
 }
 
+.category-heading {
+  p {
+    font-size: $font-up-1;
+    margin-bottom: 0.75em;
+  }
+}
+
 .category-logo.aspect-image {
   display: block;
-  margin: 8px 0;
-
+  margin: 1.5em 0 1em;
   img {
     max-width: 100%;
   }

GitHub sha: c0bd7db7

This commit appears in #12829 which was approved by CvX. It was merged by awesomerobot.