cerulean theme: new users view

app.js

@@ -125,4 +125,4 @@
 			process.exit();
 		});
 	}
-}());
+}());

public/templates/users.tpl

@@ -23,16 +23,18 @@
 			<a href="/users/{users.userslug}">
 				<img src="{users.picture}" class="img-thumbnail"/>
 			</a>
-			<br/>
-			<a href="/users/{users.userslug}">{users.username}</a>
-			<br/>
-			<div title="reputation">
-				<span class='formatted-number'>{users.reputation}</span>
-				<i class='icon-star'></i>
-			</div>
-			<div title="post count">
-				<span class='formatted-number'>{users.postcount}</span>
-				<i class='icon-pencil'></i>
+			<br />
+			<div class="user-info">
+				<a href="/users/{users.userslug}">{users.username}</a>
+				<br />
+				<div title="reputation" class="reputation">
+					<span class='formatted-number'>{users.reputation}</span>
+					<i class='icon-star'></i>
+				</div>
+				<div title="post count" class="post-count">
+					<span class='formatted-number'>{users.postcount}</span>
+					<i class='icon-pencil'></i>
+				</div>
 			</div>
 		</div>
 		<!-- END users -->

public/themes/cerulean/users.less

@@ -1 +1,51 @@
-@import "../vanilla/users";
+@import "../vanilla/users";
+
+.users {
+	.users-container {
+		padding-top: 20px; // might be better off in vanilla
+		padding-left: 6px;
+	}
+
+	.users-box {
+		padding: 0;
+		margin: 0px;
+		margin-left: -6px; // todo: check why do I have to do this?
+		max-width: 164px;
+		width: 164px;
+		height: 164px;
+
+		a {
+			padding: 0;
+			margin: 0;
+
+			img {
+				padding: 0;
+				margin: 0;
+				width: 164px;
+				height: 164px;
+				border: 1px solid #777;
+				border-radius: 0;
+
+			}
+		}
+
+		position: relative;
+		.user-info {
+			background: rgba(0,0,0,0.65);
+			padding: 2px;
+			position: absolute;
+			bottom: 0px;
+			width: 164px;
+			a, span, i {
+				color: white;
+			}
+			a {
+				font-weight: 700;
+			}
+		}
+
+		.post-count, .reputation {
+			display: inline-block;
+		}
+	}
+}