Use more specific elements for header text

This somewhat improves rendering in browsers which don't support CSS,
such as Kristall. Might improve this more in the future.

static/style.css

@@ -36,17 +36,18 @@ header div.info div {
 	float: left;
 }
 
-header div.info span.title {
+header div.info h1.title {
 	display: block;
 	font-size: 48px;
 	font-weight: bold;
 	margin-bottom: 24px;
 }
 
-header div.info span.subtext {
+header div.info p.subtext {
 	display: block;
 	font-size: 32px;
-	margin-top: 24px;	
+	margin-top: 24px;
+	margin-bottom: 0px;
 }
 
 nav {
@@ -241,12 +242,12 @@ p.openring {
 		display: inline-block;
 	}
 
-	header div.info span.title {
+	header div.info h1.title {
 		font-size: 50px;
 		margin-bottom: 14px;
 	}
 
-	header div.info span.subtext {
+	header div.info p.subtext {
 		font-size: 26px;
 		margin-top: 14px;	
 	}
@@ -292,7 +293,7 @@ p.openring {
 		padding: 0 0 0 0;
 	}
 
-	header div.info span.title {
+	header div.info h1.title {
 		display: block;
 		text-align: center;
 		font-size: 24px;
@@ -300,7 +301,7 @@ p.openring {
 		margin-bottom: 6px;
 	}
 
-	header div.info span.subtext {
+	header div.info p.subtext {
 		display: block;
 		text-align: center;
 		font-size: 20px;

templates/page.html

@@ -13,8 +13,8 @@
 			<div class="info">
 				<img src="{root}assets/avatar.png" alt="My avatar"/>
 				<div>
-					<span class="title">flewkey</span>
-					<span class="subtext">Level 10 Computer Mage</span>
+					<h1 class="title">flewkey</h1>
+					<p class="subtext">Level 10 Computer Mage</p>
 				</div>
 			</div>
 			<nav>