more semantic html

5 years ago · e904398905
parent 0b114ead3e
commit e904398905
4 changed files with 15 additions and 15 deletions
--- a/views/header.html
+++ b/views/header.html
@ -10,7 +10,7 @@
 <meta name="viewport" content="width=device-width">
 </head>
 <body>
-<div class="header">
+<header>
 <span><a href="/">honk</a></span>
 {{ if .UserInfo }}
 <span><a href="/atme">@me</a></span>
@ -24,4 +24,4 @@
 {{ if .ShowRSS }}
 <span><a href="/rss">rss</a></span>
 {{ end }}
-</div>
+</header>
--- a/views/honk.html
+++ b/views/honk.html
@ -1,6 +1,6 @@
-<div class="honk {{ .Honk.What }} {{ .Honk.Privacy }}">
+<article class="honk {{ .Honk.What }} {{ .Honk.Privacy }}">
 {{ with .Honk }}
-<div class="title">
+<header>
 <img alt="avatar" src="/a?a={{ .Honker}}">
 <p><a href="{{ .Honker }}" rel=noreferrer>{{ .Username }}</a> <span class="clip">{{ .What }} {{ .Date.Format "02 Jan 2006 15:04" }} <a href="{{ .URL }}" rel=noreferrer>{{ .URL }}</a></span>
 {{ if .RID }}
@ -13,7 +13,7 @@ in reply to: <a href="{{ .RID }}" rel=noreferrer>{{ .RID }}</a>
 <span style="margin-left: 3em;" class="clip">
 convoy: <a href="/t?c={{ .Convoy }}">{{ .Convoy }}</a>
 </span>
-</div>
+</header>
 <div class="noise">
 <p>{{ .HTML }}
 {{ range .Donks }}
@ -45,4 +45,4 @@ convoy: <a href="/t?c={{ .Convoy }}">{{ .Convoy }}</a>
 </div>
 <p>
 {{ end }}
-</div>
+</article>
--- a/views/honkpage.html
+++ b/views/honkpage.html
@ -1,5 +1,5 @@
 {{ template "header.html" . }}
-<div class="center">
+<main>
 <div class="info" id="infobox">
 {{ if .Name }}
 <p>{{ .Name }} <span style="margin-left:1em;"><a href="/u/{{ .Name }}/rss">rss</a></span>
@ -26,7 +26,7 @@
 {{ range .Honks }}
 {{ template "honk.html" map "Honk" . "BonkCSRF" $BonkCSRF }}
 {{ end }}
-</div>
+</main>
 {{ if $BonkCSRF }}
 <script>
 function encode(hash) {
--- a/views/style.css
+++ b/views/style.css
@ -22,16 +22,16 @@ input {
 	line-height: 1.2em;
 	padding: 0.5em;
 }
-.header {
+body > header {
 	max-width: 1200px;
 	margin: 1em auto;
 	font-size: 1.5em;
 	text-align: right;
 }
-.header span {
+body > header span {
 	margin-right: 2em;
 }
-.center {
+main {
 	max-width: 1200px;
 	margin: auto;
 	font-size: 1.5em;
@ -108,10 +108,10 @@ button a {
 .honk a {
 	color: #dde;
 }
-.honk .title .clip a {
+.honk header .clip a {
 	color: #88a;
 }
-.honk .title {
+.honk header {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@ -119,13 +119,13 @@ button a {
 	margin-top: 1em;
 	height: 64px;
 }
-.honk .title img {
+.honk header img {
 	float: left;
 	margin-right: 1em;
 	width: 64px;
 	height: 64px;
 }
-.honk .title p {
+.honk header p {
 	margin-top: 0px;
 }
 .honk button {