Fix another bunch of HTML violations (#383)

* Fix desciption

(Subdescription icon shrunk 4 pixels in size)

* Use valid HTML

* Change inline div to span

* change name attribute to id

* Use rem instead of pixels

less/category.less

@@ -130,13 +130,24 @@
 		color: @gray-light;
 	}
 
-	h2.title .description {
-		font-size: 65%;
+	.description {
+		font-size: 0.73125rem;
 		font-weight: normal;
 		line-height: 1;
 		color: @gray-light;
 		margin-top: 5px;
-		display: block;
+	}
+	
+	.description, .category-children {
+		margin-left: 62px;
+	}
+	
+	.category-children {
+		font-size: 15px;
+		
+		small {
+			color: #999999;
+		}
 	}
 }
 

templates/partials/categories/item.tpl

@@ -7,14 +7,18 @@
 		</div>
 
 		<h2 class="title">
-			<!-- IMPORT partials/categories/link.tpl --><br/>
+			<!-- IMPORT partials/categories/link.tpl -->
+		</h2>
+		<div>
 			<!-- IF ../descriptionParsed -->
-			<span class="description">{../descriptionParsed}</span>
+			<div class="description">
+				{../descriptionParsed}
+			</div>
 			<!-- ENDIF ../descriptionParsed -->
 			<!-- IF !config.hideSubCategories -->
 			{function.generateChildrenCategories}
 			<!-- ENDIF !config.hideSubCategories -->
-		</h2>
+		</div>
 		<span class="visible-xs pull-right">
 			<!-- IF ../teaser.timestampISO -->
 			<a class="permalink" href="{../teaser.url}">

templates/partials/menu.tpl

@@ -6,12 +6,14 @@
 					<span class="icon-bar"></span>
 				</button>
 
+				<!-- IF brand:logo -->
 				<a href="<!-- IF brand:logo:url -->{brand:logo:url}<!-- ELSE -->{relative_path}/<!-- ENDIF brand:logo:url -->">
 					<img alt="{brand:logo:alt}" class="{brand:logo:display} forum-logo" src="{brand:logo}" />
 				</a>
+				<!-- ENDIF brand:logo -->
 				<!-- IF config.showSiteTitle -->
 				<a href="<!-- IF title:url -->{title:url}<!-- ELSE -->{relative_path}/<!-- ENDIF title:url -->">
-					<h1 class="navbar-brand forum-title">{title}</h1>
+					<h1 class="navbar-brand forum-title">{config.siteTitle}</h1>
 				</a>
 				<!-- ENDIF config.showSiteTitle -->
 
@@ -63,8 +65,11 @@
 
 					<li id="user_label" class="dropdown">
 						<label for="user-control-list-check" class="dropdown-toggle" data-toggle="dropdown" id="user_dropdown" title="[[global:header.profile]]" role="button">
-							<img component="header/userpicture" src="{user.picture}" alt="{user.username}"<!-- IF !user.picture --> style="display: none;"<!-- ENDIF !user.picture --> />
-							<div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};<!-- IF user.picture --> display: none;<!-- ENDIF user.picture -->">{user.icon:text}</div>
+							<!-- IF user.picture -->
+							<img component="header/userpicture" src="{user.picture}" alt="{user.username}"/>
+							<!-- ELSE -->
+							<span component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor}; display: block;">{user.icon:text}</span>
+							<!-- ENDIF user.picture --> 
 							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
 						</label>
 						<input type="checkbox" class="hidden" id="user-control-list-check" aria-hidden="true">
@@ -183,7 +188,7 @@
 
 				<ul class="nav navbar-nav navbar-right hidden-xs">
 					<li>
-						<a href="#" id="reconnect" class="hide" title="Connection to {title} has been lost, attempting to reconnect...">
+						<a href="#" id="reconnect" class="hide" title="Connection to {config.siteTitle} has been lost, attempting to reconnect...">
 							<i class="fa fa-check"></i>
 						</a>
 					</li>

templates/partials/topic/post.tpl

@@ -22,7 +22,7 @@
 		<span class="label label-danger">[[user:banned]]</span>
 		<!-- ENDIF posts.user.banned -->
 
-		<div class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
+		<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
 			<a class="permalink" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
 
 			<i class="fa fa-pencil-square pointer edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
@@ -41,7 +41,7 @@
 				<!-- END custom_profile_info -->
 				<!-- ENDIF posts.user.custom_profile_info.length -->
 			</span>
-		</div>
+		</span>
 		<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>
 
 	</small>

templates/topic.tpl

@@ -34,7 +34,7 @@
 		<ul component="topic" class="posts" data-tid="{tid}" data-cid="{cid}">
 			<!-- BEGIN posts -->
 				<li component="post" class="<!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
-					<a component="post/anchor" data-index="{posts.index}" name="{posts.index}"></a>
+					<a component="post/anchor" data-index="{posts.index}" id="{posts.index}"></a>
 
 					<meta itemprop="datePublished" content="{posts.timestampISO}">
 					<meta itemprop="dateModified" content="{posts.editedISO}">