new docked title category style - needs additional work

app/assets/javascripts/discourse/templates/header.hbs

@@ -98,14 +98,12 @@
           {{#if showStarButton}}
             <a {{bind-attr class=":star topic.starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
           {{/if}}
+          <div class="title-wrapper">
           <h1>
             {{#if showPrivateMessageGlyph}}
               <span class="private-message-glyph">{{fa-icon envelope}}</span>
             {{/if}}
-            {{#if topic.category.parentCategory}}
-              {{bound-category-link topic.category.parentCategory}}
-            {{/if}}
-            {{bound-category-link topic.category}}
+
             {{#if topic.details.loaded}}
               {{topic-status topic=topic}}
               <a class='topic-link' href='{{unbound topic.url}}' {{action "jumpToTopPost"}}>{{{topic.fancy_title}}}</a>
@@ -117,11 +115,14 @@
               {{/if}}
             {{/if}}
           </h1>
+          {{#if topic.category.parentCategory}}
+            {{bound-category-link topic.category.parentCategory}}
+          {{/if}}
+          {{bound-category-link topic.category}}
+        </div>
         </div>
       </div>
     {{/if}}
 
   </div>
 </div>
-
-

app/assets/stylesheets/desktop/topic-post.scss

@@ -551,7 +551,7 @@ iframe {
   a.star {
     margin-right: 7px;
     font-size: 20px;
-    margin-top: 6px;
+    margin-top: 10px;
     color: dark-light-diff($secondary, $primary, 80%, -20%) !important;
 
   }
@@ -562,11 +562,18 @@ iframe {
   }
 
   .badge-category {
+    border-left: 5px solid;
+    border-color: #aaa;
+    font-weight: normal;
+    text-transform: lowercase;
+    padding: 0 0 0 5px;
+    margin: 0 5px 0 1px;
     vertical-align: top;
-    margin-top: 2px;
+
+  }
+
+  .title-wrapper {
     float: left;
-    margin-right: 5px;
-    display: none;
   }
 
 }