From 0238a076f3f64753a64a53d1fbbae0a26287063f Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Mon, 20 Mar 2017 14:43:55 -0400
Subject: [PATCH] Change category-boxes so it's easier to customize with CSS

---
 .../templates/components/categories-boxes.hbs | 17 +++++-----
 .../stylesheets/desktop/category-list.scss    | 33 ++++++++++---------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
index 00ee5fe8ff5..8bced38d5ca 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
+++ b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
@@ -1,15 +1,16 @@
 {{#each categories as |c|}}
-  <div class='category-box'>
+  <div class='category-box category-box-{{unbound c.slug}}'>
     <a href={{c.url}}>
-      {{#if c.uploaded_logo.url}}
-        {{cdn-img src=c.uploaded_logo.url class="logo"}}
-      {{/if}}
+      <div class='category-box-heading'>
+        {{#if c.uploaded_logo.url}}
+          {{cdn-img src=c.uploaded_logo.url class="logo"}}
+        {{/if}}
 
-      <div class='details'>
         <h3>{{c.name}}</h3>
-        <div class='description'>
-          {{{c.description_excerpt}}}
-        </div>
+      </div>
+
+      <div class='description'>
+        {{{c.description_excerpt}}}
       </div>
     </a>
   </div>
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 0ec0040da77..73bfee33fe0 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -197,19 +197,6 @@
       width: 100%;
     }
 
-    .details {
-      h3 {
-        font-size: 1.5em;
-        margin-bottom: 0.5em;
-        margin-top: 0.25em;
-        line-height: 1.1em;
-      }
-      .description {
-        font-size: 1.05em;
-        color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
-      }
-    }
-
     .logo {
       display: block;
       height: 40px;
@@ -230,10 +217,26 @@
     margin: 0 1% 1.5em 1%;
     > a {
       width: 100%;
-      padding: 1em;
+      padding: 0;
     }
   }
-  .details {
+
+  .category-box-heading {
+    padding: 1em 1em 0 1em;
+  }
+
+  .description {
+    padding: 0 1em 1em 1em;
+    text-align: center;
+    font-size: 1.05em;
+    color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
+  }
+
+  h3 {
+    font-size: 1.5em;
+    margin-bottom: 0.5em;
+    margin-top: 0.25em;
+    line-height: 1.1em;
     text-align: center;
   }