toying around with category listing again

public/css/style.less

@@ -156,11 +156,15 @@ footer.footer {
 	}
 .topic-row-icon {
 	border-radius: 5px 0 0 5px;
-	height: 75px;
+	height: 64px;
 	background: #0059B2;
 	color: white;
 	line-height: 105px;
-	min-width: 75px;
+	min-width: 64px;
+	i {
+		vertical-align: 25%;
+		margin-left: 8px;
+	}
 }
 
 @media (max-width: 767px) 
@@ -173,6 +177,28 @@ footer.footer {
 .top-posters {
 	float: right;
 	padding-top: 2px;
+
+	div.img-polaroid {
+		width: 300px;
+		height: 50px;
+		line-height: 16px;
+		img {
+			display: block;
+			float: left;
+		}
+		p {
+			display: block;
+			float: left;
+			width: 240px;
+			margin-left: 10px;
+			overflow: hidden;
+			height: 50px;
+		}
+	}
+	.img-polaroid {
+		margin-left: 1px;
+		border: 1px solid rgba(0,0,0,0.1);
+	}
 }
 
 .topic-row-content {
@@ -183,6 +209,7 @@ footer.footer {
 	padding: 0;
 	margin: 0;
 	margin-top: 4px;
+	line-height: 30px;
 }
 
 .topic-row-content h3 small {

public/templates/category.tpl

@@ -11,19 +11,24 @@
 <a href="../../topic/{topics.slug}"><li class="topic-row">
 	<div class="row">
 		<div class="span1 topic-row-icon">
-			<i class="icon-lock icon-4x"></i>
+			<i class="icon-lock icon-3x"></i>
 			<i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i>
 		</div>
 		<div class="span11 topic-row-content">
 			<div class="top-posters">
-				<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=60" class="img-polaroid" />
+				<!--<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=50" class="img-polaroid" />
-				<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=60" class="img-polaroid" />
+				<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=50" class="img-polaroid" />
-				<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=60" class="img-polaroid" />
+				<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=50" class="img-polaroid" />-->
+				<div class="img-polaroid pull-right">
+					<img src="http://www.gravatar.com/avatar/fd37ce111f863c6665045c2d72d199bf?s=50" />
+					<p><strong>psychobunny</strong>: Some post content goes here, the latest posts of course blah blahposts of course blah blahposts of course blah blahposts of course blah blah</p>
+				</div>
+				<img src="http://www.gravatar.com/avatar/07c9c7170c3ac676c2561e3eeaee063c?s=50" class="img-polaroid pull-right" />
+				<img src="http://www.gravatar.com/avatar/91050ce0072697b53380c6a03a1bc12a?s=50" class="img-polaroid pull-right" />
 			</div>
 			<div>
-				<h3><span class="badge {topics.badgeclass}">{topics.post_count}</span> {topics.title} <small>24<i class="icon-star"></i></small></h3> 
+				<h3><span class="badge {topics.badgeclass}">{topics.post_count}</span> {topics.title} <small>24<i class="icon-star"></i><br />Posted {topics.relativeTime} ago by 
-				<p> Posted {topics.relativeTime} ago by 
+					<span class="username">{topics.username}</span>.</small></h3> 
-					<span class="username">{topics.username}</span>.</p>
 			</div>
 		</div>
 	</div>