BS3 sourcefiles + modified category row to new format. now mobile has two columns of categories, looks much neater.

public/css/style.less

@@ -253,95 +253,9 @@ footer.footer {
   }
 }
 
-.category-icon {
-	width: 100%;
-	height: 90px;
-	text-align: center;
-	border-radius: 0px;
-	margin: 0;
-	padding-top:25px;
-	cursor: pointer;
-	margin-bottom: 20px;
-	border-radius: 5px;
-	overflow:hidden;
-}
-.category-row h4 {
-	font-weight: 700;
-	text-align: left;
-	/*color: #555;*/ // NOTE: color for cat/topic header links should be grey in the default theme when we get around to it.
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.category-row a {
-	text-decoration: none;
-	border: 0;
-}
-
-.category-purple {
-	@color: #ab1290;
-	background: @color;
-	color: white;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-
-.category-darkblue {
-	@color: #004C66;
-	background: @color;
-	color: white;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-
-.category-blue {
-	@color: #0059B2;
-	background: @color;
-	color: white;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-
-.category-darkgreen {
-	@color: #004000;
-	background: @color;
-	color: white;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-.category-orange {
-	@color: #FF7A4D;
-	color: white;
-	background: @color;
-
-	&:hover {
-		background: lighten(@color, 10%);
-	}
-}
-
-.category-list {
-	li {
-		.inline-block;
-		.pointer;
-		padding: 0.5em 0;
-		text-align: center;
-		margin: 0.5em;
-		-webkit-border-radius: 5px;
-		-moz-border-radius: 5px;
-		border-radius: 5px;
-		padding: 0.5em;
-	}
-}
 
 .hero-unit {
+	// goes into theme
 	background: #56BCDA;
 	color: white;
 	padding: 30px;
@@ -877,4 +791,104 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
     padding-right:10px;
   }
 
-}
+}
+
+
+
+//topic
+.category-list {
+	li {
+		.inline-block;
+		.pointer;
+		padding: 0.5em 0;
+		text-align: center;
+		margin: 0.5em;
+		-webkit-border-radius: 5px;
+		-moz-border-radius: 5px;
+		border-radius: 5px;
+		padding: 0.5em;
+	}
+}
+
+
+
+/*START: Goes into home.less */
+
+.categories {
+	h4 {
+		font-weight: 700;
+		text-align: left;
+		/*color: #555;*/ // NOTE: color for cat/topic header links should be grey in the default theme when we get around to it.
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	a {
+		text-decoration: none;
+		border: 0;
+	}
+	.icon {
+		width: 100%;
+		height: 110px;
+		text-align: center;
+		border-radius: 0px;
+		margin: 0;
+		padding-top:25px;
+		cursor: pointer;
+		margin-bottom: 20px;
+		border-radius: 5px;
+		overflow:hidden;
+	}
+
+}
+
+.category-purple {
+	@color: #ab1290;
+	background: @color;
+	color: white;
+
+	&:hover {
+		background: lighten(@color, 10%);
+	}
+}
+
+.category-darkblue {
+	@color: #004C66;
+	background: @color;
+	color: white;
+
+	&:hover {
+		background: lighten(@color, 10%);
+	}
+}
+
+.category-blue {
+	@color: #0059B2;
+	background: @color;
+	color: white;
+
+	&:hover {
+		background: lighten(@color, 10%);
+	}
+}
+
+.category-darkgreen {
+	@color: #004000;
+	background: @color;
+	color: white;
+
+	&:hover {
+		background: lighten(@color, 10%);
+	}
+}
+.category-orange {
+	@color: #FF7A4D;
+	color: white;
+	background: @color;
+
+	&:hover {
+		background: lighten(@color, 10%);
+	}
+}
+
+/*END: Goes into home.less */

public/templates/home.tpl

@@ -2,12 +2,12 @@
 	{motd}
 </div>
 
-<div class="row category-row">
+<div class="row categories">
 	<!-- BEGIN categories -->
-	<div class="span3">
+	<div class="col-md-3 col-xs-6">
 		<a href="category/{categories.slug}">
 			<h4><span class="badge {categories.badgeclass}">{categories.topic_count} </span> {categories.name}</h4>
-			<div class="category-icon {categories.blockclass}">
+			<div class="icon {categories.blockclass}">
 				<div id="category-{categories.cid}" class="category-slider-{categories.post_count}">
 					<div class="category-box"><i class="{categories.icon} icon-4x"></i></div>
 					<div class="category-box">{categories.description}</div>