Update the default theme

This uses better color contrast and component spacing to improve
legibility. The updated HTML also has better compatibility with browsers
with limited/no CSS support.

26 files changed, 348 insertions, 370 deletions

diff --git a/templates/about.tmpl b/templates/about.tmpl
index 0e4d001..c6129f9 100644
--- a/templates/about.tmpl
+++ b/templates/about.tmpl
@@ -1,7 +1,7 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
 
-<div class="page-title"> About </div>
+<h1>About</h1>
 <div>
 	<p>
 		A web client for <a href="https://pleroma.social" target="_blank">Mastadon Network</a>.
@@ -14,7 +14,7 @@
 	</P>
 </div>
 
-<div class="page-title"> Keyboard shortcuts </div>
+<h1>Keyboard shortcuts</h1>
 <div>
 	<table class="keyboard-shortcuts">
 		<tr>
@@ -42,11 +42,11 @@
 			<td> <kbd>5</kbd> </td>
 		</tr>
 		<tr>
-			<td> Search </td>
+			<td> Lists </td>
 			<td> <kbd>6</kbd> </td>
 		</tr>
 		<tr>
-			<td> Lists </td>
+			<td> Search </td>
 			<td> <kbd>7</kbd> </td>
 		</tr>
 		<tr>
diff --git a/templates/emoji.tmpl b/templates/emoji.tmpl
index 4b07e81..86ab285 100644
--- a/templates/emoji.tmpl
+++ b/templates/emoji.tmpl
@@ -1,12 +1,12 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Emojis </div>
+<h1>Emojis</h1>
 
 <div class="emoji-list-container">
 	{{range .Emojis}}
 	<div class="emoji-item-container">
 		<div class="emoji-item">
-			<img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" loading="lazy" />
+			<img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" loading="lazy">
 			<span title=":{{.ShortCode}}:" class="emoji-shortcode">:{{.ShortCode}}:</span>
 		</div>
 	</div>
diff --git a/templates/error.tmpl b/templates/error.tmpl
index c8da1e6..4763fcf 100644
--- a/templates/error.tmpl
+++ b/templates/error.tmpl
@@ -1,8 +1,8 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Error </div>
+<h1>Error</h1>
 
-<div class="error-text"> {{.Err}} </div>
+<p>{{.Err}}</p>
 <div>
 	<a href="/timeline/home">home</a>
 	{{if .Retry}}
diff --git a/templates/filters.tmpl b/templates/filters.tmpl
index ef7c024..8bdae41 100644
--- a/templates/filters.tmpl
+++ b/templates/filters.tmpl
@@ -1,9 +1,9 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Filters </div>
+<h1>Filters</h1>
 
 {{if .Filters}}
-<table class="filters">
+<table>
 	{{range .Filters}}
 	<tr>
 		<td> {{.Phrase}}{{if not .WholeWord}}*{{end}} </td>
@@ -11,29 +11,23 @@
 			<form action="/unfilter/{{.ID}}" method="POST">
 				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<button type="submit"> Delete </button>
+				<button type="submit">Delete</button>
 			</form>
 		</td>
 	</tr>
 	{{end}}
 </table>
 {{else}}
-	<div class="filters"> No filters added </div>
+	<p> No filters added </p>
 {{end}}
 
-<div class="page-title"> Add filter </div>
+<h1>Add filter</h1>
 <form action="/filter" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<span class="settings-form-field">
-		<label for="phrase"> Phrase </label>
-		<input id="phrase" name="phrase" required>
-	</span>
-	<span class="settings-form-field">
-		<input id="whole-word" name="whole_word" type="checkbox" value="true" checked>
-		<label for="whole-word"> Whole word </label>
-	</span>
-	<button type="submit"> Add </button>
+	<label>Phrase <input type="text" name="phrase" required></label>
+	<label><input name="whole_word" type="checkbox" value="true" checked> Whole word</label>
+	<button type="submit">Add</button>
 </form>
 
 {{template "footer.tmpl"}}
diff --git a/templates/header.tmpl b/templates/header.tmpl
index 7ebf65e..713aa96 100644
--- a/templates/header.tmpl
+++ b/templates/header.tmpl
@@ -17,6 +17,9 @@
 	{{if .RefreshInterval}}
 	<meta http-equiv="refresh" content="{{.RefreshInterval}}">
 	{{end}}
+	{{if $.Ctx.DarkMode}}
+	<meta name="color-scheme" content="dark">
+	{{end}}
 	<title> {{if gt .Count 0}}({{.Count}}){{end}} {{.Title}} </title>
 	<link rel="stylesheet" href="/static/style.css">
 	{{if .CustomCSS}}
diff --git a/templates/likedby.tmpl b/templates/likedby.tmpl
index 222254c..6f62647 100644
--- a/templates/likedby.tmpl
+++ b/templates/likedby.tmpl
@@ -1,6 +1,6 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Liked By </div>
+<h1>Liked By</h1>
 
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
diff --git a/templates/list.tmpl b/templates/list.tmpl
index dcc6ee8..ad2e538 100644
--- a/templates/list.tmpl
+++ b/templates/list.tmpl
@@ -1,21 +1,23 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> List {{.List.Title}} </div>
+<h1>List {{.List.Title}}</h1>
 
 <form action="/list/{{.List.ID}}/rename" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<input id="title" name="title" value="{{.List.Title}}">
-	<button type="submit"> Rename </button>
+	<div class="form-field">
+		<input type="text" id="title" name="title" value="{{.List.Title}}">
+		<button type="submit"> Rename </button>
+	<div>
 </form>
 
-<div class="page-title"> Users </div>
+<h1>Users</h1>
 {{if .Accounts}}
 <table>
 {{range .Accounts}}
 	<tr>
-		<td class="p-0"> {{template "userlistitem.tmpl" (WithContext . $.Ctx)}} </td>
-		<td class="p-0"> 
+		<td>{{template "userlistitem.tmpl" (WithContext . $.Ctx)}}</td>
+		<td>
 			<form class="user-list-action" action="/list/{{$.Data.List.ID}}/removeuser?uid={{.ID}}" method="POST">
 				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
@@ -26,16 +28,16 @@
 {{end}}
 </table>
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
-<div class="page-title"> Add user </div>
-<form class="search-form" action="/list/{{.List.ID}}" method="GET">
-	<span class="post-form-field">
+<h1>Add user</h1>
+<form action="/list/{{.List.ID}}" method="GET">
+	<div class="form-field">
 		<label for="query"> Query </label>
-		<input id="query" name="q" value="{{.Q}}">
-	</span>
-	<button type="submit"> Search </button>
+		<input type="text" id="query" name="q" value="{{.Q}}">
+		<button type="submit"> Search </button>
+	</div>
 </form>
 
 {{if .Q}}
@@ -55,7 +57,7 @@
 {{end}}
 </table>
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 {{end}}
 
diff --git a/templates/lists.tmpl b/templates/lists.tmpl
index 27979cb..98cdb78 100644
--- a/templates/lists.tmpl
+++ b/templates/lists.tmpl
@@ -1,33 +1,37 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Lists </div>
+<h1>Lists</h1>
 
-{{range .Lists}}
-<div>
-	<a href="/timeline/list?list={{.ID}}"> {{.Title}} timeline </a> 
-	-
-	<form class="d-inline" action="/list/{{.ID}}" method="GET">
-		<button type="submit" class="btn-link"> edit </button>
-	</form>
-	-
-	<form class="d-inline" action="/list/{{.ID}}/remove" method="POST">
-		<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-		<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-		<button type="submit" class="btn-link"> delete </button>
-	</form>
-</div>
+{{if .Lists}}
+<table>
+	{{range .Lists}}
+	<tr>
+		<td><a href="/timeline/list?list={{.ID}}">{{.Title}} timeline</a></td>
+		<td>
+			<form action="/list/{{.ID}}" method="GET">
+				<button type="submit">Edit</button>
+			</form>
+		</td>
+		<td>
+			<form action="/list/{{.ID}}/remove" method="POST">
+				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+				<button type="submit">Delete</button>
+			</form>
+		</td>
+	</tr>
+	{{end}}
+</table>
 {{else}}
-<div class="no-data-found">No data found</div>
+	<p>No lists added</p>
 {{end}}
 
-<div class="page-title"> Add list </div>
+<h1>Add list</h1>
 <form action="/list" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<span class="settings-form-field">
-		<label for="title"> Title </label>
-		<input id="title" name="title" required>
-	</span>
+	<label for="title">Title</label>
+	<input type="text" id="title" name="title" required>
 	<button type="submit"> Add </button>
 </form>
 
diff --git a/templates/mute.tmpl b/templates/mute.tmpl
index ee66b91..0defc80 100644
--- a/templates/mute.tmpl
+++ b/templates/mute.tmpl
@@ -1,15 +1,15 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Mute {{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}} @{{.User.Acct}} </div>
+<h1>Mute {{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}} @{{.User.Acct}}</h1>
 
 <form action="/mute/{{.User.ID}}" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<div class="settings-form-field">
+	<div class="form-field-s">
 		<input id="notifications" name="notifications" type="checkbox" value="true" checked>
 		<label for="notifications"> Mute notifications </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field-s">
 		<label for="duration"> Auto unmute </label>
 		<select id="duration" name="duration">
 			<option value="0" selected>Disabled</option>
diff --git a/templates/nav.tmpl b/templates/nav.tmpl
index bdb72be..c01f64e 100644
--- a/templates/nav.tmpl
+++ b/templates/nav.tmpl
@@ -1,39 +1,35 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="user-info">
-	<div class="user-info-img-container">
+<div class="nav-container">
+	<div class="nav-profile-img-container">
 		<a class="img-link" href="/timeline/home" title="Home (1)">
-			<img class="user-info-img" src="{{.User.Avatar}}" alt="profile-avatar" height="64" />
+			<img class="nav-profile-img" src="{{.User.Avatar}}" alt="avatar" height="64">
 		</a>
 	</div>
-	<div class="user-info-details-container">
-		<div class="user-info-details-name">
-			<bdi class="status-dname">{{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}}</bdi>
-			<a class="nav-link" href="/user/{{.User.ID}}" accesskey="0" title="User profile (0)">
-				<span class="status-uname">@{{.User.Acct}}</span>
-			</a>
-			<a class="profile-edit-link" href="/profile" title="edit profile" target="_top">
-				edit
-			</a>
-		</div>
-		<div class="user-info-details-nav">
-			<a class="nav-link" href="/timeline/home" accesskey="1" title="Home timeline (1)">home</a>
-			<a class="nav-link" href="/timeline/direct" accesskey="2" title="Direct timeline (2)">direct</a>
-			<a class="nav-link" href="/timeline/local" accesskey="3" title="Local timeline (3)">local</a>
-			<a class="nav-link" href="/timeline/twkn" accesskey="4" title="The Whole Known Netwwork (4)">twkn</a>
-			<a class="nav-link" href="/timeline/remote" accesskey="5" title="Remote timeline (5)">remote</a>
-			<a class="nav-link" href="/search" accesskey="6" title="Search (6)">search</a>
-		</div>
-		<div>
-			<a class="nav-link" href="/lists" accesskey="7" title="Lists (7)">lists</a>
-			<a class="nav-link" href="/settings" target="_top" accesskey="8" title="Settings (8)">settings</a>
-			<form class="signout" action="/signout" method="post" target="_top">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="signout" class="btn-link nav-link" title="Signout">
-			</form>
-			<a class="nav-link" href="/about" accesskey="9" title="About (9)">about</a>
-		</div>
+	<div class="nav-link-container">
+		<bdi class="status-dname">{{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}}</bdi>
+		<a class="nav-link" href="/user/{{.User.ID}}" accesskey="0" title="User profile (0)"><span class="status-uname">@{{.User.Acct}}</span></a>
+		<a class="nav-profile-link" href="/profile" title="edit profile" target="_top">edit</a>
+		<form class="d-inline" action="/signout" method="post" target="_top">
+			<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+			<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+			<input type="submit" value="signout" class="btn-link nav-profile-link" title="Signout">
+		</form>
+		<nav>
+			<ul>
+				<li><a class="nav-link" href="/timeline/home" accesskey="1" title="Home timeline (1)">home</a></li>
+				<li><a class="nav-link" href="/timeline/direct" accesskey="2" title="Direct timeline (2)">direct</a></li>
+				<li><a class="nav-link" href="/timeline/local" accesskey="3" title="Local timeline (3)">local</a></li>
+				<li><a class="nav-link" href="/timeline/twkn" accesskey="4" title="The Whole Known Netwwork (4)">twkn</a></li>
+				<li><a class="nav-link" href="/timeline/remote" accesskey="5" title="Remote timeline (5)">remote</a></li>
+			</ul>
+			<ul>
+				<li><a class="nav-link" href="/lists" accesskey="6" title="Lists (6)">lists</a></li>
+				<li><a class="nav-link" href="/search" accesskey="7" title="Search (7)">search</a></li>
+				<li><a class="nav-link" href="/settings" target="_top" accesskey="8" title="Settings (8)">settings</a></li>
+				<li><a class="nav-link" href="/about" accesskey="9" title="About (9)">about</a></li>
+			</ul>
+		</nav>
 	</div>
 </div>
 
diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index f1336d3..395987e 100644
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -1,73 +1,66 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title-container">
-	<span class="page-title">
-		Notifications
-		{{if and (not $.Ctx.AntiDopamineMode) (gt .UnreadCount 0)}}
+
+<form action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self">
+	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+	<h1>Notifications
+		{{- if and (not $.Ctx.AntiDopamineMode) (gt .UnreadCount 0)}}
 			({{.UnreadCount }})
 		{{end}}
-	</span>
-	<a class="page-refresh" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a>
-	{{if .ReadID}}
-	<form class="notification-read" action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self">
-		<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-		<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-		<input type="submit" value="read" class="btn-link" accesskey="C" title="Clear unread notifications (C)">
-	</form>
-	{{end}}
-</div>
+		<a class="page-link" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a>
+		{{if .ReadID}}
+		<input type="submit" value="read" class="btn-link page-link" accesskey="C" title="Clear unread notifications (C)">
+		{{end}}
+	</h1>
+</form>
 
 {{range .Notifications}}
-<div class="notification-container {{.Type}} {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
+<article class="notification-container {{.Type}} {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
 	{{if eq .Type "follow"}}
-	<div class="notification-follow-container">
-		<div class="status-profile-img-container">
+	<div class="user-list-item">
+		<div class="user-list-profile-img">
 			<a class="img-link" href="/user/{{.Account.ID}}">
-				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="profile-avatar" height="48" />
+				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 			</a>
 		</div>
-		<div class="notification-follow">
-			<div class="notification-info-text">
-				<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
-				<span class="notification-text"> followed you - 
-					<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
-				</span>
-			</div>
-			<div>
-				<a href="/user/{{.Account.ID}}"> <span class="status-uname">@{{.Account.Acct}}</span> </a>
-			</div>
+		<div class="user-list-name">
+			<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+			followed you - <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+			<br>
+			<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 		</div>
+		<br class="hidden">
 	</div>
 
 	{{else if eq .Type "follow_request"}}
-	<div class="notification-follow-container">
-		<div class="status-profile-img-container">
+	<div class="user-list-item">
+		<div class="user-list-profile-img">
 			<a class="img-link" href="/user/{{.Account.ID}}">
-				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="profile-avatar" height="48" />
+				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 			</a>
 		</div>
-		<div class="notification-follow">
-			<div class="notification-info-text">
-				<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
-				<span class="notification-text"> wants to follow you - 
-					<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
-				</span>
-			</div>
-			<div>
-				<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
+		<div class="user-list-name">
+			<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+			wants to follow you - 
+			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+			<br>
+			<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
+			<div class="follow-request-actions">
+				<form class="d-inline" action="/accept/{{.Account.ID}}" method="post" target="_self">
+					<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+					<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+					<input type="submit" value="accept" class="btn-link">
+				</form>
+				-
+				<form class="d-inline" action="/reject/{{.Account.ID}}" method="post" target="_self">
+					<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+					<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+					<input type="submit" value="reject" class="btn-link">
+				</form>
 			</div>
-			<form class="d-inline" action="/accept/{{.Account.ID}}" method="post" target="_self">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="accept" class="btn-link">
-			</form>
-			-
-			<form class="d-inline" action="/reject/{{.Account.ID}}" method="post" target="_self">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="reject" class="btn-link">
-			</form>
 		</div>
+		<br class="hidden">
 	</div>
 
 	{{else if eq .Type "mention"}}
@@ -76,11 +69,10 @@
 	{{else if eq .Type "reblog"}}
 	<div class="retweet-info">
 		<a class="img-link" href="/user/{{.Account.ID}}">
-			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="48" />
-		</a>
-		<a href="/user/{{.Account.ID}}">
-			<span class="status-uname">@{{.Account.Acct}}</span>
+			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 		</a>
+		<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+		<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 		<span class="notification-text"> retweeted your post - 
 			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 		</span>
@@ -90,11 +82,10 @@
 	{{else if eq .Type "favourite"}}
 	<div class="retweet-info">
 		<a class="img-link" href="/user/{{.Account.ID}}">
-			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="48" />
-		</a>
-		<a href="/user/{{.Account.ID}}">
-			<span class="status-uname">@{{.Account.Acct}}</span>
+			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 		</a>
+		<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+		<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 		<span class="notification-text"> liked your post - 
 			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 		</span>
@@ -104,25 +95,24 @@
 	{{else}}
 	<div class="retweet-info">
 		<a class="img-link" href="/user/{{.Account.ID}}">
-			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="48" />
-		</a>
-		<a href="/user/{{.Account.ID}}">
-			<span class="status-uname">@{{.Account.Acct}}</span>
+			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 		</a>
+		<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+		<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 		<span class="notification-text"> {{.Type}} - 
 			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 		</span>
 	</div>
 	{{if .Status}}{{template "status" (WithContext .Status $.Ctx)}}{{end}}
 	{{end}}
-</div>
+</article>
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .NextLink}}
 		<a href="{{.NextLink}}" target="_self">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}
diff --git a/templates/postform.tmpl b/templates/postform.tmpl
index 0af50fb..5ee1a51 100644
--- a/templates/postform.tmpl
+++ b/templates/postform.tmpl
@@ -3,49 +3,41 @@
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
 	{{if .ReplyContext}}
-	<input type="hidden" name="reply_to_id" value="{{.ReplyContext.InReplyToID}}" />
-	<input type="hidden" name="quickreply" value="{{.ReplyContext.QuickReply}}" />
-	<label for="post-content" class="post-form-title"> Reply to @{{.ReplyContext.InReplyToName}} </label>
+	<input type="hidden" name="reply_to_id" value="{{.ReplyContext.InReplyToID}}">
+	<input type="hidden" name="quickreply" value="{{.ReplyContext.QuickReply}}">
+	<label for="post-content">Reply to @{{.ReplyContext.InReplyToName}}</label>
 	{{else}}
-	<label for="post-content" class="post-form-title"> New post </label>
+	<label for="post-content">New post</label>
 	{{end}}
-	<a class="post-form-emoji-link" href="/emojis" target="_blank" title="Emoji list (L)" accesskey="L">
-		emoji list
-	</a>
-	<div class="post-form-content-container">
+	<a class="emoji-link" href="/emojis" target="_blank" title="Emoji list (L)" accesskey="L">emoji list</a>
+	<div class="form-field-s">
 		<textarea id="post-content" name="content" class="post-content" cols="34" rows="5" accesskey="E" title="Edit post (E)">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>
 	</div>
-	<div>
+	<div class="form-field-s">
 		{{if .Formats}}
-		<span class="post-form-field">
 			{{$defFormat := .DefaultFormat}}
 			<select id="post-format" name="format" accesskey="F" title="Format (F)">
 				{{range .Formats}} 
 					<option value="{{.Type}}" {{if eq $defFormat .Type}}selected{{end}}>{{.Name}}</option> 
 				{{end}}
 			</select>
-		</span>
 		{{end}}
-		<span class="post-form-field">
-			<select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}} accesskey="S" title="Scope (S)">
-				<option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option>
-				<option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option>
-				<option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option>
-				<option value="direct" {{if eq .DefaultVisibility "direct"}}selected{{end}}>Direct</option>
-			</select>
-		</span>
-		<span class="post-form-field">
-			<input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="true" accesskey="N" title="NSFW (N)">
-			<label for="nsfw-checkbox"> NSFW </label>
-		</span>
+		<select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}} accesskey="S" title="Scope (S)">
+			<option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option>
+			<option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option>
+			<option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option>
+			<option value="direct" {{if eq .DefaultVisibility "direct"}}selected{{end}}>Direct</option>
+		</select>
+		<input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="true" accesskey="N" title="NSFW (N)">
+		<label for="nsfw-checkbox"> NSFW </label>
+	</div>
+	<div class="form-field-s">
+		<input id="post-file-picker" type="file" name="attachments" multiple accesskey="A" title="Attachments (A)">
 	</div>
-	<div>
-		<span class="post-form-field">
-			<input id="post-file-picker" type="file" name="attachments" multiple accesskey="A" title="Attachments (A)">
-		</span>
+	<div class="form-field-s">
+		<button type="submit" accesskey="P" title="Post (P)"> Post </button>
+		<button type="reset" title="Reset"> Reset </button>
 	</div>
-	<button type="submit" accesskey="P" title="Post (P)"> Post </button>
-	<button type="reset" title="Reset"> Reset </button>
 </form>
 {{end}}
 
diff --git a/templates/profile.tmpl b/templates/profile.tmpl
index 4bf1937..0b2573c 100644
--- a/templates/profile.tmpl
+++ b/templates/profile.tmpl
@@ -1,55 +1,61 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Edit Profile </div>
+<h1>Edit Profile</h1>
 
-<form class="profile-form" action="/profile" method="POST" enctype="multipart/form-data">
+<form action="/profile" method="POST" enctype="multipart/form-data">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<div class="profile-form-field">
+	<div class="form-field">
 		<div class="block-label">
 			<label for="avatar">Avatar</label> -
 			<input class="btn-link" type="submit" formaction="/profile/delavatar" formmethod="POST" value="delete">
 		</div>
-		<div>
-			<a href="{{.User.Avatar}}" target="_blank">
+		<div class="profile-img-container">
+			<a class="img-link" href="{{.User.Avatar}}" target="_blank">
 				<img class="profile-avatar" src="{{.User.Avatar}}" alt="profile-avatar" height="96">
 			</a>
 		</div>
 		<div><input id="avatar" name="avatar" type="file"></div>
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<div class="block-label">
 			<label for="banner">Banner</label> -
 			<input class="btn-link" type="submit" formaction="/profile/delbanner" formmethod="POST" value="delete">
 		</div>
-		<div>
-			<a href="{{.User.Header}}" target="_blank">
+		<div class="profile-img-container">
+			<a class="img-link" href="{{.User.Header}}" target="_blank">
 				<img class="profile-banner" src="{{.User.Header}}" alt="profile-banner" height="120">
 			</a>
 		</div>
 		<input id="banner" name="banner" type="file">
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<div class="block-label"><label for="name">Name</label></div>
-		<div><input id="name" name="name" type="text" value="{{.User.DisplayName}}"></div>
+		<div><input id="name" name="name" type="text" class="input-w" value="{{.User.DisplayName}}"></div>
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<div class="block-label"><label for="bio">Bio</label></div>
 		<textarea id="bio" name="bio" cols="80" rows="8">{{.User.Source.Note}}</textarea>
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<div class="block-label"><label>Metadata</label></div>
 		{{range $i, $f := .User.Source.Fields}}
-		<div class="profile-field">
-			<input id="field-name-{{$i}}" name="field-name-{{$i}}" type="text" value="{{$f.Name}}" placeholder="name">
-			<input id="field-value-{{$i}}" name="field-value-{{$i}}" type="text" value="{{$f.Value}}" placeholder="value">
+		<div class="form-field">
+			<input id="field-name-{{$i}}" name="field-name-{{$i}}" type="text" class="input-w" value="{{$f.Name}}" placeholder="name">
+			<input id="field-value-{{$i}}" name="field-value-{{$i}}" type="text" class="input-w" value="{{$f.Value}}" placeholder="value">
 		</div>
 		{{end}}
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<input id="locked" name="locked" type="checkbox" value="true" {{if .User.Locked}}checked{{end}}>
 		<label for="locked">Require manual approval of follow requests</label>
 	</div>
+	<br class="hidden">
 	<button type="submit"> Save </button>
 	<button type="reset"> Reset </button>
 </form>
diff --git a/templates/quickreply.tmpl b/templates/quickreply.tmpl
index 97ff20a..245cd21 100644
--- a/templates/quickreply.tmpl
+++ b/templates/quickreply.tmpl
@@ -1,6 +1,6 @@
 {{with $s := .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Quick Reply </div>
+<h1>Quick Reply</h1>
 
 {{if .Ancestor}}
 {{template "status.tmpl" (WithContext .Ancestor $.Ctx)}}
diff --git a/templates/requestlist.tmpl b/templates/requestlist.tmpl
index f0b2dee..1826404 100644
--- a/templates/requestlist.tmpl
+++ b/templates/requestlist.tmpl
@@ -4,33 +4,33 @@
 	<div class="user-list-item">
 		<div class="user-list-profile-img">
 			<a class="img-link" href="/user/{{.ID}}">
-				<img class="status-profile-img" src="{{.Avatar}}" title="@{{.Acct}}" alt="avatar" height="48" />
+				<img class="status-profile-img" src="{{.Avatar}}" title="@{{.Acct}}" alt="@{{.Acct}}" height="48">
 			</a>
 		</div>
 		<div class="user-list-name">
-			<div>
-				<div class="status-dname">{{EmojiFilter (HTML .DisplayName) .Emojis | Raw}}</div>
-				<a class="img-link" href="/user/{{.ID}}">
-					<div class="status-uname">{{.Acct}}</div>
-				</a>
+			<bdi class="status-dname">{{EmojiFilter (HTML .DisplayName) .Emojis | Raw}}</bdi>
+			<br>
+			<a class="img-link" href="/user/{{.ID}}"> <div class="status-uname">{{.Acct}}</div> </a>
+			<div class="follow-request-actions">
+				<form class="d-inline" action="/accept/{{.ID}}" method="post" target="_self">
+					<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+					<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+					<input type="submit" value="accept" class="btn-link">
+				</form>
+				-
+				<form class="d-inline" action="/reject/{{.ID}}" method="post" target="_self">
+					<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+					<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+					<input type="submit" value="reject" class="btn-link">
+				</form>
 			</div>
-			<form class="d-inline" action="/accept/{{.ID}}" method="post" target="_self">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="accept" class="btn-link">
-			</form>
-			-
-			<form class="d-inline" action="/reject/{{.ID}}" method="post" target="_self">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="reject" class="btn-link">
-			</form>
 		</div>
 	</div>
+	<br class="hidden">
 	{{else}}
-	<div class="no-data-found">No data found</div>
+	<p>No data found</p>
 	{{end}}
 </div>
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
diff --git a/templates/retweetedby.tmpl b/templates/retweetedby.tmpl
index 9492ee6..f8548c6 100644
--- a/templates/retweetedby.tmpl
+++ b/templates/retweetedby.tmpl
@@ -1,6 +1,6 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Retweeted By </div>
+<h1>Retweeted By</h1>
 
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
diff --git a/templates/search.tmpl b/templates/search.tmpl
index 0473d4a..076858e 100644
--- a/templates/search.tmpl
+++ b/templates/search.tmpl
@@ -1,27 +1,28 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Search </div>
+<h1>Search</h1>
 
-<form class="search-form" action="/search" method="GET">
-	<span class="post-form-field">
-		<label for="query"> Query </label>
-		<input id="query" name="q" value="{{.Q}}">
-	</span>
-	<span class="post-form-field">
-		<label for="type"> Type </label>
-		<select id="type" name="type">
-			<option value="statuses" {{if eq .Type "statuses"}}selected{{end}}>Statuses</option>
-			<option value="accounts" {{if eq .Type "accounts"}}selected{{end}}>Accounts</option>
-		</select>
-	</span>
-	<button type="submit"> Search </button>
+<form action="/search" method="GET">
+	<p>
+		<label>
+			Query <input type="text" name="q" value="{{.Q}}">
+		</label>
+		<label>
+			Type
+			<select  name="type">
+				<option value="statuses" {{if eq .Type "statuses"}}selected{{end}}>Statuses</option>
+				<option value="accounts" {{if eq .Type "accounts"}}selected{{end}}>Accounts</option>
+			</select>
+		</label>
+		<button type="submit"> Search </button>
+	</p>
 </form>
 
 {{if eq .Type "statuses"}}
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-{{if .Q}}<div class="no-data-found">No data found</div>{{end}}
+{{if .Q}}<p>No data found</p>{{end}}
 {{end}}
 {{end}}
 
@@ -29,11 +30,11 @@
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .NextLink}}
 		<a href="{{.NextLink}}">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}
diff --git a/templates/settings.tmpl b/templates/settings.tmpl
index ebb0458..1f0f8a2 100644
--- a/templates/settings.tmpl
+++ b/templates/settings.tmpl
@@ -1,12 +1,12 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Settings </div>
+<h1>Settings</h1>
 
-<form id="settings-form" action="/settings" method="POST">
+<form action="/settings" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
 	{{if .PostFormats}}
-	<div class="settings-form-field">
+	<div class="form-field">
 		<label for="post-format"> Default format </label>
 		{{$defFormat := .Settings.DefaultFormat}}
 		<select id="post-format" name="format">
@@ -16,7 +16,7 @@
 		</select>
 	</div>
 	{{end}}
-	<div class="settings-form-field">
+	<div class="form-field">
 		<label for="visibility"> Default scope </label>
 		<select id="visibility" name="visibility">
 			<option value="public" {{if eq .Settings.DefaultVisibility "public"}}selected{{end}}>Public</option>
@@ -25,7 +25,7 @@
 			<option value="direct" {{if eq .Settings.DefaultVisibility "direct"}}selected{{end}}>Direct</option>
 		</select>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<label for="notification-interval"> Refresh Notifications </label>
 		<select id="notification-interval" name="notification_interval">
 			<option value="0" {{if eq .Settings.NotificationInterval 0}}selected{{end}}>Disabled</option>
@@ -36,45 +36,45 @@
 			<option value="600" {{if eq .Settings.NotificationInterval 600}}selected{{end}}>After 10m</option>
 		</select>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="copy-scope" name="copy_scope" type="checkbox" value="true" {{if .Settings.CopyScope}}checked{{end}}>
 		<label for="copy-scope"> Copy scope when replying </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="thread-tab" name="thread_in_new_tab" type="checkbox" value="true" {{if .Settings.ThreadInNewTab}}checked{{end}}>
 		<label for="thread-tab"> Open threads in new tab from timeline </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="hide-attachments" name="hide_attachments" type="checkbox" value="true" {{if .Settings.HideAttachments}}checked{{end}}>
 		<label for="hide-attachments"> Hide attachments </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="mask-nsfw" name="mask_nsfw" type="checkbox" value="true" {{if .Settings.MaskNSFW}}checked{{end}}>
 		<label for="mask-nsfw"> Mask NSFW attachments </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="fluoride-mode" name="fluoride_mode" type="checkbox" value="true" {{if .Settings.FluorideMode}}checked{{end}}>
 		<label for="fluoride-mode"> Enable <abbr title="Enable JavaScript based functionality, e.g., like/retweet without page reload and reply preview on thread page">fluoride mode</abbr> </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="anti-dopamine-mode" name="anti_dopamine_mode" type="checkbox"
 		value="true" {{if .Settings.AntiDopamineMode}}checked{{end}}>
 		<label for="anti-dopamine-mode"> Enable <abbr title="Remove like/retweet/unread notification count and disable like/retweet/follow notifications">anti-dopamine mode</abbr> </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="hide-unsupported-notifs" name="hide_unsupported_notifs" type="checkbox"
 		value="true" {{if .Settings.HideUnsupportedNotifs}}checked{{end}}>
 		<label for="hide-unsupported-notifs"> Hide unsupported notifications </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="dark-mode" name="dark_mode" type="checkbox" value="true" {{if .Settings.DarkMode}}checked{{end}}>
 		<label for="dark-mode"> Use dark theme </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<label for="css"> Custom CSS: </label>
 	</div>
-	<div>
-		<textarea id="css" name="css" cols="80" rows="8">{{.Settings.CSS}}</textarea>
+	<div class="form-field">
+		<textarea id="css" class="monospace" name="css" cols="80" rows="8">{{.Settings.CSS}}</textarea>
 	</div>
 	<button type="submit"> Save </button>
 </form>
diff --git a/templates/signin.tmpl b/templates/signin.tmpl
index c7699f7..b12e0aa 100644
--- a/templates/signin.tmpl
+++ b/templates/signin.tmpl
@@ -1,18 +1,17 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Bloat </div>
-<div class="signin-desc">
-	A web client for <a href="https://pleroma.social" target="_blank">Mastadon Network</a>.
-</div>
 
-<form class="signin-form" action="/signin" method="post">
-	Enter the domain name of your instance to continue
-	<br/>
-	<input type="text" name="instance" placeholder="example.com" required>
-	<br/>
-	<button type="submit"> Signin </button>
+<h1>Bloat</h1>
+<p>A web client for <a href="https://pleroma.social" target="_blank">Mastadon Network</a>.</p>
+<form action="/signin" method="post">
+	<div class="form-field-s">
+		<label for="instance">Enter the domain name of your instance to continue</label>
+	</div>
+	<div class="form-field-s">
+		<input id="instance" type="text" class="input-w" name="instance" placeholder="example.com" required>
+	</div>
+	<div class="form-field-s"><button type="submit">Signin</button></div>
 </form>
-
 <p>
 	See
 	<a href="https://git.freesoftwareextremist.com/bloat" target="_blank">git.freesoftwareextremist.com/bloat</a>
diff --git a/templates/status.tmpl b/templates/status.tmpl
index 0b09dfb..503b6f1 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -1,15 +1,15 @@
 {{with .Data}}
-<div id="status-{{.ID}}" class="status-container-container">
+<article id="status-{{.ID}}" class="status-container-container">
 	{{if .Reblog}}
 	<div class="retweet-info">
 		<a class="img-link" href="/user/{{.Account.ID}}">
-			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="24" />
+			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="24">
 		</a>
 		<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
 		<a href="/user/{{.Account.ID}}"> 
 			<span class="status-uname">@{{.Account.Acct}}</span> 
 		</a>
-		retweeted
+		<span>retweeted</span>
 	</div>
 	{{template "status" (WithContext .Reblog $.Ctx)}}
 	{{else}}
@@ -18,26 +18,20 @@
 	<div class="status-container status-{{.ID}}" data-id="{{.ID}}">
 		<div class="status-profile-img-container">
 			<a class="img-link" href="/user/{{.Account.ID}}">
-				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="48" />
+				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 			</a>
 		</div>
 		<div class="status"> 
 			<div class="status-name">
 				<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
-				<a href="/user/{{.Account.ID}}">
-					<span class="status-uname">@{{.Account.Acct}}</span>
-				</a>
+				<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 				<div class="more-container">
 					<div class="remote-link">
 						{{if .IDNumbers}}#{{index .IDNumbers .ID}}{{end}} {{.Visibility}}
 					</div>
 					<div class="more-content">
-						<a class="more-link" href="{{.URL}}" target="_blank">
-							source
-						</a>
-						<a class="more-link" href="/quickreply/{{.ID}}#status-{{.ID}}">
-							quickreply
-						</a>
+						<a class="more-link" href="{{.URL}}" target="_blank">source</a>
+						<a class="more-link" href="/quickreply/{{.ID}}#status-{{.ID}}">quickreply</a>
 						{{if .Muted}}
 						<form action="/unmuteconv/{{.ID}}" method="post" target="_self">
 							<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
@@ -76,6 +70,7 @@
 					</div>
 				</div>
 			</div>
+			{{if (or .InReplyToID .ShowReplies)}}
 			<div class="status-reply-container">
 				{{if .InReplyToID}}
 				<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> 
@@ -90,9 +85,10 @@
 				{{end}}
 				{{end}}
 			</div>
+			{{end}}
 			{{if (or .Content .SpoilerText)}}
 			<div class="status-content">
-				{{- if .SpoilerText}}{{EmojiFilter (HTML .SpoilerText) .Emojis | Raw}}<br/>{{end -}}
+				{{- if .SpoilerText}}{{EmojiFilter (HTML .SpoilerText) .Emojis | Raw}}<br>{{end -}}
 				{{- StatusContentFilter .Content .Emojis .Mentions | Raw -}}
 			</div>
 			{{end}}
@@ -100,42 +96,36 @@
 			<div class="status-media-container">
 				{{range .MediaAttachments}}
 
-				{{if eq .Type "image"}}
+				{{- if eq .Type "image" -}}
 				{{if $.Ctx.HideAttachments}}
-				<a href="{{.URL}}" target="_blank">
-					[image{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]
-				</a>
-				{{else}}
-				<a class="img-link" href="{{.URL}}" target="_blank" title="{{.Description}}">
-					<img class="status-image" src="{{.PreviewURL}}" alt="status-image" height="240" />
+				<a href="{{.URL}}" target="_blank">[image{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]</a>
+				{{- else -}}
+				<a class="img-link status-image-container" href="{{.URL}}" target="_blank" title="{{.Description}}">
+					<img class="status-image" src="{{.PreviewURL}}" alt="{{.Description}}" height="240">
 					{{if (and $.Ctx.MaskNSFW $s.Sensitive)}}
 					<div class="status-nsfw-overlay"></div>
 					{{end}}
 				</a>
-				{{end}}
+				{{- end -}}
 
 				{{else if eq .Type "audio"}}
 				{{if $.Ctx.HideAttachments}}
-				<a href="{{.URL}}" target="_blank">
-					[audio{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]
-				</a>
+				<a href="{{.URL}}" target="_blank">[audio{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]</a>
 				{{else}}
 				<audio class="status-audio" controls title="{{.Description}}">
 					<source src="{{.URL}}">
-					<a href="{{.URL}}" target="_blank"> [audio] </a>
+					<a href="{{.URL}}" target="_blank">[audio]</a>
 				</audio>
 				{{end}}
 
 				{{else if eq .Type "video"}}
 				{{if $.Ctx.HideAttachments}}
-				<a href="{{.URL}}" target="_blank">
-					[video{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]
-				</a>
+				<a href="{{.URL}}" target="_blank">[video{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]</a>
 				{{else}}
 				<div class="status-video-container" title="{{.Description}}">
 					<video class="status-video" controls height="240">
 						<source src="{{.URL}}">
-						<a href="{{.URL}}" target="_blank"> [video] </a>
+						<a href="{{.URL}}" target="_blank">[video]</a>
 					</video>
 					{{if (and $.Ctx.MaskNSFW $s.Sensitive)}}
 					<div class="status-nsfw-overlay"></div>
@@ -144,20 +134,18 @@
 				{{end}}
 
 				{{else}}
-				<a href="{{.URL}}" target="_blank"> 
-					[attachment{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]
-				</a>
-				{{end}}
+				<a href="{{.URL}}" target="_blank">[attachment{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]</a>
 				{{end}}
+				{{- end -}}
 			</div>
 			{{end}}
 			{{if .Poll}}
-			<form class="poll-form" action="/vote/{{.Poll.ID}}" method="POST" target="_self">
+			<form class="status-poll" action="/vote/{{.Poll.ID}}" method="POST" target="_self">
 				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
 				<input type="hidden" name="status_id" value="{{$s.ID}}">
 				{{range $i, $o := .Poll.Options}}
-				<div class="poll-option">
+				<div class="form-field-s">
 					{{if (or $s.Poll.Expired $s.Poll.Voted)}}
 					<div> {{EmojiFilter (HTML $o.Title) $s.Emojis | Raw}} - {{$o.VotesCount}} votes </div>
 					{{else}}
@@ -170,9 +158,11 @@
 				</div>
 				{{end}}
 				{{if not (or .Poll.Expired .Poll.Voted)}}
+				<div class="form-field-s">
 				<button type="submit"> Vote </button>
+				</div>
 				{{end}}
-				<div class="poll-info">
+				<div>
 					<span>{{.Poll.VotesCount}} votes</span>
 					{{if .Poll.Expired}}
 					<span> - poll expired </span>
@@ -189,10 +179,9 @@
 			{{end}}
 			<div class="status-action-container"> 
 				<div class="status-action">
-					<a href="/thread/{{.ID}}?reply=true#status-{{.ID}}"> 
-						reply
-					</a>
-					<a class="status-reply-count" href="/thread/{{.ID}}#status-{{.ID}}" {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}>
+					<a href="/thread/{{.ID}}?reply=true#status-{{.ID}}">reply</a>
+					<a class="status-reply-count {{if or $.Ctx.AntiDopamineMode (not .RepliesCount)}}hidden{{end}}" 
+						href="/thread/{{.ID}}#status-{{.ID}}" {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}} title="replies">
 						{{if and (not $.Ctx.AntiDopamineMode) .RepliesCount}}
 							({{DisplayInteractionCount .RepliesCount}})
 						{{end}}
@@ -206,7 +195,8 @@
 						<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
 						<input type="submit" value="{{$rt}}" class="btn-link" 
 							{{if or (eq .Visibility "private") (eq .Visibility "direct")}}title="this status cannot be retweeted" disabled{{end}}>
-						<a class="status-retweet-count" href="/retweetedby/{{.ID}}" title="click to see the the list"> 
+						<a class="status-retweet-count {{if or $.Ctx.AntiDopamineMode (not .ReblogsCount)}}hidden{{end}}" 
+							href="/retweetedby/{{.ID}}" title="click to see the the list"> 
 							{{if and (not $.Ctx.AntiDopamineMode) .ReblogsCount}}
 								({{DisplayInteractionCount .ReblogsCount}})
 							{{end}}
@@ -220,7 +210,8 @@
 						<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
 						<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
 						<input type="submit" value="{{$like}}" class="btn-link">
-						<a class="status-like-count" href="/likedby/{{.ID}}" title="click to see the the list"> 
+						<a class="status-like-count {{if or $.Ctx.AntiDopamineMode (not .FavouritesCount)}}hidden{{end}}" 
+							href="/likedby/{{.ID}}" title="click to see the the list"> 
 							{{if and (not $.Ctx.AntiDopamineMode) .FavouritesCount}}
 								({{DisplayInteractionCount .FavouritesCount}})
 							{{end}}
@@ -238,8 +229,9 @@
 			</div>
 		</div>
 	</div>
+	<br class="hidden">
 	{{end}}
 	{{end}}
 	{{end}}
-</div>
+</article>
 {{end}}
diff --git a/templates/thread.tmpl b/templates/thread.tmpl
index d6a1c7d..2426434 100644
--- a/templates/thread.tmpl
+++ b/templates/thread.tmpl
@@ -1,8 +1,7 @@
 {{with $s := .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title-container">
-	<span class="page-title"> Thread </span>
-	<a class="page-refresh" href="{{$.Ctx.Referrer}}" accesskey="T" title="Refresh (T)">refresh</a>
+<div>
+	<h1>Thread <a class="page-link" href="{{$.Ctx.Referrer}}" accesskey="T" title="Refresh (T)">refresh</a></h1>
 </div>
 
 {{range .Statuses}}
diff --git a/templates/timeline.tmpl b/templates/timeline.tmpl
index 38659dc..5b02c5f 100644
--- a/templates/timeline.tmpl
+++ b/templates/timeline.tmpl
@@ -1,15 +1,14 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title-container">
-	<span class="page-title"> {{.Title}}  </span>
-	<a class="page-refresh" href="{{$.Ctx.Referrer}}" accesskey="T" title="Refresh (T)">refresh</a>
+<div>
+	<h1>{{.Title}} <a class="page-link" href="{{$.Ctx.Referrer}}" accesskey="T" title="Refresh (T)">refresh</a></h1>
 </div>
 
 {{if eq .Type "remote"}}
-<form class="search-form" action="/timeline/remote" method="GET">
-	<span class="post-form-field">
+<form action="/timeline/remote" method="GET">
+	<span>
 		<label for="instance"> Instance </label>
-		<input id="instance" name="instance" value="{{.Instance}}">
+		<input type="text" id="instance" name="instance" value="{{.Instance}}">
 	</span>
 	<button type="submit"> Submit </button>
 </form>
@@ -19,14 +18,14 @@
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .PrevLink}}
 		<a href="{{.PrevLink}}">[prev]</a>
 	{{end}}
 	{{if .NextLink}}
 		<a href="{{.NextLink}}">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}
diff --git a/templates/user.tmpl b/templates/user.tmpl
index 3b1a5cd..1ae75f9 100644
--- a/templates/user.tmpl
+++ b/templates/user.tmpl
@@ -1,11 +1,11 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> User </div>
+<h1>User</h1>
 
 <div class="user-info-container">
 	<div class="user-profile-img-container">
 		<a class="img-link" href="{{.User.Avatar}}" target="_blank">
-			<img class="user-profile-img" src="{{.User.Avatar}}" alt="profile-avatar" height="96" />
+			<img class="user-profile-img" src="{{.User.Avatar}}" alt="@{{.User.Acct}}" height="96">
 		</a>
 	</div>
 	<div class="user-profile-details-container">
@@ -78,7 +78,7 @@
 				<input type="submit" value="unmute" class="btn-link">
 			</form>
 			{{else}}
-			<a href="/mute/{{.User.ID}}"> mute </a>
+			<a href="/mute/{{.User.ID}}">mute</a>
 			{{end}}
 			{{if .User.Pleroma.Relationship.Following}} 
 			-
@@ -99,26 +99,26 @@
 		</div>
 		{{end}}
 		<div>
-			<a href="/user/{{.User.ID}}"> statuses ({{.User.StatusesCount}}) </a> - 
-			<a href="/user/{{.User.ID}}/following"> following ({{.User.FollowingCount}}) </a> - 
-			<a href="/user/{{.User.ID}}/followers"> followers ({{.User.FollowersCount}}) </a> - 
-			<a href="/user/{{.User.ID}}/media"> media </a>
+			<a href="/user/{{.User.ID}}">statuses ({{.User.StatusesCount}})</a> -
+			<a href="/user/{{.User.ID}}/following">following ({{.User.FollowingCount}})</a> -
+			<a href="/user/{{.User.ID}}/followers">followers ({{.User.FollowersCount}})</a> -
+			<a href="/user/{{.User.ID}}/media">media</a>
 		</div>
 		{{if .IsCurrent}}
 		<div>
-			<a href="/user/{{.User.ID}}/bookmarks"> bookmarks </a>
-			- <a href="/user/{{.User.ID}}/likes"> likes </a>
-			- <a href="/user/{{.User.ID}}/mutes"> mutes </a>
-			- <a href="/user/{{.User.ID}}/blocks"> blocks </a>
-			{{if .User.Locked}}- <a href="/user/{{.User.ID}}/requests"> requests </a>{{end}}
+			<a href="/user/{{.User.ID}}/bookmarks">bookmarks</a>
+			- <a href="/user/{{.User.ID}}/likes">likes</a>
+			- <a href="/user/{{.User.ID}}/mutes">mutes</a>
+			- <a href="/user/{{.User.ID}}/blocks">blocks</a>
+			{{if .User.Locked}}- <a href="/user/{{.User.ID}}/requests">requests</a>{{end}}
 		</div>
 		{{end}}
 		<div>
-			<a href="/usersearch/{{.User.ID}}"> search statuses </a>
-			{{if .IsCurrent}} - <a href="/filters"> filters </a> {{end}}
+			<a href="/usersearch/{{.User.ID}}">search statuses</a>
+			{{if .IsCurrent}} - <a href="/filters">filters</a> {{end}}
 		</div>
 	</div>
-	<div class="user-profile-decription">
+	<div class="user-profile-description">
 	{{- EmojiFilter .User.Note .User.Emojis | Raw -}}
 	</div>
 	{{if .User.Fields}}
@@ -131,63 +131,63 @@
 </div>
 
 {{if eq .Type ""}}
-<div class="page-title"> Statuses </div>
+<h1>Statuses</h1>
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
 {{else if eq .Type "following"}}
-<div class="page-title"> Following </div>
+<h1>Following</h1>
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
 {{else if eq .Type "followers"}}
-<div class="page-title"> Followers </div>
+<h1>Followers</h1>
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
 {{else if eq .Type "media"}}
-<div class="page-title"> Statuses with media </div>
+<h1>Statuses with media</h1>
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
 {{else if eq .Type "bookmarks"}}
-<div class="page-title"> Bookmarks </div>
+<h1>Bookmarks</h1>
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
 {{else if eq .Type "likes"}}
-<div class="page-title"> Likes </div>
+<h1>Likes</h1>
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
 {{else if eq .Type "mutes"}}
-<div class="page-title"> Mutes </div>
+<h1>Mutes</h1>
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
 {{else if eq .Type "blocks"}}
-<div class="page-title"> Blocks </div>
+<h1>Blocks</h1>
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
 {{else if eq .Type "requests"}}
-<div class="page-title"> Follow requests </div>
+<h1>Follow requests</h1>
 {{template "requestlist.tmpl" (WithContext .Users $.Ctx)}}
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .NextLink}}
 		<a href="{{.NextLink}}">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}
diff --git a/templates/userlist.tmpl b/templates/userlist.tmpl
index f206397..83ed088 100644
--- a/templates/userlist.tmpl
+++ b/templates/userlist.tmpl
@@ -3,9 +3,9 @@
 	{{range .}}
 		{{template "userlistitem.tmpl" (WithContext . $.Ctx)}}
 	{{else}}
-	<div class="no-data-found">No data found</div>
+	<p>No data found</p>
 	{{end}}
 </div>
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
diff --git a/templates/userlistitem.tmpl b/templates/userlistitem.tmpl
index ed53b2e..dd50aa8 100644
--- a/templates/userlistitem.tmpl
+++ b/templates/userlistitem.tmpl
@@ -2,14 +2,14 @@
 <div class="user-list-item">
 	<div class="user-list-profile-img">
 		<a class="img-link" href="/user/{{.ID}}">
-			<img class="status-profile-img" src="{{.Avatar}}" title="@{{.Acct}}" alt="avatar" height="48" />
+			<img class="status-profile-img" src="{{.Avatar}}" title="@{{.Acct}}" alt="@{{.Acct}}" height="48">
 		</a>
 	</div>
 	<div class="user-list-name">
-		<div class="status-dname">{{EmojiFilter (HTML .DisplayName) .Emojis | Raw}}</div>
-		<a class="img-link" href="/user/{{.ID}}">
-			<div class="status-uname">@{{.Acct}}</div>
-		</a>
+		<bdi class="status-dname">{{EmojiFilter (HTML .DisplayName) .Emojis | Raw}}</bdi>
+		<br>
+		<a class="img-link" href="/user/{{.ID}}"><span class="status-uname">@{{.Acct}}</span></a>
 	</div>
+	<br class="hidden">
 </div>
 {{end}}
diff --git a/templates/usersearch.tmpl b/templates/usersearch.tmpl
index 78fa7b8..5011b99 100644
--- a/templates/usersearch.tmpl
+++ b/templates/usersearch.tmpl
@@ -1,26 +1,27 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Search {{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}}'s statuses </div>
+<h1>Search {{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}} @{{.User.Acct}}'s statuses</h1>
 
-<form class="search-form" action="/usersearch/{{.User.ID}}" method="GET">
-	<span class="post-form-field">
-		<label for="query"> Query </label>
-		<input id="query" name="q" value="{{.Q}}">
-	</span>
-	<button type="submit"> Search </button>
+<form action="/usersearch/{{.User.ID}}" method="GET">
+	<p>
+		<label> 
+			Query <input type="text" name="q" value="{{.Q}}">
+		</label>
+		<button type="submit"> Search </button>
+	</p>
 </form>
 
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-{{if .Q}}<div class="no-data-found">No data found</div>{{end}}
+{{if .Q}}<p>No data found</p>{{end}}
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .NextLink}}
 		<a href="{{.NextLink}}">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}