subcategory styling

less/category.less

@@ -20,3 +20,10 @@
 		}
 	}
 }
+
+.subcategory {
+	> p {
+		text-transform: uppercase;
+		color: @gray-light;
+	}
+}

templates/category.tpl

@@ -1,11 +1,6 @@
 <div class="category">
 	<!-- IMPORT partials/breadcrumbs.tpl -->
-
-	<div class="subcategories row">
-		<!-- BEGIN children -->
 	<!-- IMPORT partials/category/subcategory.tpl -->
-		<!-- END children -->
-	</div>
 	
 	<!-- IF children.length --><hr /><!-- ENDIF children.length -->
 

templates/partials/category/subcategory.tpl

@@ -1,50 +1,59 @@
-		<div class="{children.class}" data-cid="{children.cid}" data-numRecentReplies="{children.numRecentReplies}">
+<div class="subcategory">
+	<!-- IF children.length --><p>Subcategories</p><!-- ENDIF children.length -->
+
+	<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+		<!-- BEGIN children -->
+		<li data-cid="{children.cid}" data-numRecentReplies="{children.numRecentReplies}" class="row clearfix">
 			<meta itemprop="name" content="{children.name}">
-			<h4 class="category-title">
-				<!-- IF !children.link -->
-				<span class="badge {children.unread-class}">{children.topic_count} </span>
-				<!-- ENDIF !children.link -->
 
+			<div class="col-md-7 col-sm-12 col-xs-12 content">
+				<div class="icon pull-left" style="{function.generateCategoryBackground}">
+					<i class="fa fa-fw {children.icon}"></i>
+				</div>
+
+				<h1 class="title pull-left">
 					<!-- IF children.link -->
 					<a href="{children.link}" itemprop="url" target="_blank">
 					<!-- ELSE -->
 					<a href="{relative_path}/category/{children.slug}" itemprop="url">
 					<!-- ENDIF children.link -->
 					{children.name}
-				</a>
-			</h4>
-
-			<!-- IF children.link -->
-			<a style="color: {children.color};" href="{children.link}" itemprop="url" target="_blank">
-			<!-- ELSE -->
-			<a style="color: {children.color};" href="{relative_path}/category/{children.slug}" itemprop="url">
-			<!-- ENDIF children.link -->
-				<div
-					id="category-{children.cid}" class="category-header category-header-image-{children.imageClass}"
-					title="{children.description}"
-					style="
-						<!-- IF children.backgroundImage -->background-image: url({children.backgroundImage});<!-- ENDIF children.backgroundImage -->
-						<!-- IF children.bgColor -->background-color: {children.bgColor};<!-- ENDIF children.bgColor -->
-					"
-				>
-					<div id="category-{children.cid}" class="category-slider-{children.post_count}">
-						<!-- IF children.icon -->
-						<div class="category-box"><i class="fa {children.icon} fa-4x"></i></div>
-						<!-- ENDIF children.icon -->
-						<div class="category-box" itemprop="description">{children.description}</div>
+					</a><br />
+					<small>{children.description}</small>
+				</h1>
+			</div>
 
+			<div class="hidden-sm hidden-xs">
+				<!-- IF !children.link -->
+				<div class="col-md-1 stats">
+					<span class="{children.unread-class}">{children.topic_count}</span><br />
+					<small>Topics</small>
+				</div>
+				<div class="col-md-1 stats">
+					<span class="{children.unread-class}">{children.post_count}</span><br />
+					<small>Posts</small>
+				</div>
+				<div class="col-md-3">
 					<!-- BEGIN posts -->
-						<div class="category-box">
-							<div class="post-preview">
-								<img src="{children.posts.user.picture}" class="pull-left" />
-								<p class=""><strong>{children.posts.user.username}</strong>: {children.posts.content}</p>
+					<!-- IF @first -->
+					<div class="card" style="border-color: {children.bgColor}">
+						<p>
+							<strong>{children.posts.user.username}</strong> <small class="timeago" title="{children.posts.relativeTime}"></small>
+						</p>
+						<div class="post-content">
+							{children.posts.content}
 						</div>
 					</div>
+					<!-- ENDIF @first -->
 					<!-- END posts -->
-						<!-- IF children.icon -->
-						<div class="category-box"><i class="fa {children.icon} fa-4x"></i></div>
-						<!-- ENDIF children.icon -->
 				</div>
+				<!-- ELSE -->
+				<div class="col-md-4">
+
+				</div>
+				<!-- ENDIF !children.link -->
 			</div>
-			</a>
+		</li>
+		<!-- END children -->
+	</ul>
 </div>