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.

1 files changed, 56 insertions, 66 deletions

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}}