closes #21

less/categories.less

@@ -4,6 +4,7 @@
 
 	> li {
 		margin-bottom: 20px;
+		min-height: 53px;
 
 		.content {
 			margin-top: 7px;
@@ -45,12 +46,19 @@
 			}
 		}
 
+		@media (max-width: 500px) {
+			.teaser {
+				position: absolute;
+				right: 4px;
+			}
+		}
+
 		.card {
 			border-left: 4px solid #ccc;
 			text-align: left;
-			height: 53px;
 			margin-top: 2px;
 			overflow: hidden;
+			height: 53px;
 
 			> * {
 				padding-left: 20px;

templates/categories.tpl

@@ -35,12 +35,12 @@
 			<span class="{categories.unread-class} human-readable-number" title="{categories.post_count}">{categories.post_count}</span><br />
 			<small>[[global:posts]]</small>
 		</div>
-		<div class="col-md-3 col-sm-3 col-xs-1">
+		<div class="col-md-3 col-sm-3 col-xs-1 teaser">
 			<!-- IMPORT partials/categories/lastpost.tpl -->
 		</div>
 		<!-- ELSE -->
 		<div class="col-md-2 hidden-sm-hidden-xs"></div>
-		<div class="col-md-3 col-sm-3 col-xs-1">
+		<div class="col-md-3 col-sm-3 col-xs-1 teaser">
 			<div class="card" style="border-color: {categories.bgColor}"></div>
 		</div>
 		<!-- ENDIF !categories.link -->

templates/partials/category/subcategory.tpl

@@ -32,7 +32,7 @@
 				<span class="{children.unread-class} human-readable-number" title="{children.post_count}">{children.post_count}</span><br />
 				<small>[[global:posts]]</small>
 			</div>
-			<div class="col-md-3 col-sm-3 col-xs-1">
+			<div class="col-md-3 col-sm-3 col-xs-1 teaser">
 				<div class="card" style="border-color: {children.bgColor}">
 					<!-- BEGIN posts -->
 					<!-- IF @first -->
@@ -54,7 +54,7 @@
 			</div>
 			<!-- ELSE -->
 			<div class="col-md-2 hidden-sm-hidden-xs"></div>
-			<div class="col-md-3 col-sm-3 col-xs-1">
+			<div class="col-md-3 col-sm-3 col-xs-1 teaser">
 				<div class="card" style="border-color: {children.bgColor}"></div>
 			</div>
 			<!-- ENDIF !children.link -->

templates/partials/topics_list.tpl

@@ -31,7 +31,6 @@
 			</h1>
 		</div>
 
-		<!-- IF !categories.link -->
 		<div class="col-md-1 hidden-sm hidden-xs stats">
 			<span class="human-readable-number" title="{topics.postcount}">{topics.postcount}</span><br />
 			<small>[[global:posts]]</small>
@@ -40,7 +39,7 @@
 			<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
 			<small>[[global:views]]</small>
 		</div>
-		<div class="col-md-3 col-sm-3 col-xs-1">
+		<div class="col-md-3 col-sm-3 col-xs-1 teaser">
 			<div class="card" style="border-color: {bgColor}">
 				<!-- IF topics.unreplied -->
 				<p class="hidden-xs">
@@ -59,11 +58,6 @@
 				<!-- ENDIF topics.unreplied -->
 			</div>
 		</div>
-		<!-- ELSE -->
-		<div class="col-md-4">
-
-		</div>
-		<!-- ENDIF !categories.link -->
 	</li>
 	<!-- END topics -->
 </ul>