From 16ddad36b252a1dbe489b8fc58461570be9ef8b4 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Mon, 4 Jul 2022 16:23:59 +0200
Subject: [frontend] Redesign / color scheme (#688)

* fix css indentation

* profile styling update

* update status styling to match profile

* empty header fix

* generate random avatars for thread views

* appease the linter gods

* upgrade deps

* turn profile accent into border + $bg background

* upgrade deps

* small accessibility tweaks

* general redesign, clearer css variables

* configure instance.Version for testrig

* footer styling

* add sublte borders to box-shadow for separation

* accessible blues, other tweaks

* background bg_accent

* fix viewport

* change client entry buttons to links

* cw button styling

* status display+username spacing

* small thread view tweaks

* color tweaks for accessible contrasts

* use Noto Sans

* biiit less dark bg

* .info contrast, border

Co-authored-by: f0x <f0x@cthu.lu>
---
 web/template/status.tmpl | 48 +++++++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

(limited to 'web/template/status.tmpl')

diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index 4fea3ef6f..a6dcc30f8 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -1,29 +1,31 @@
-<a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a>
-<a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{.Account.DisplayName}}{{else}}{{.Account.Username}}{{end}}</a>
-<a href="{{.Account.URL}}" class="username">@{{.Account.Username}}</a>
-<div class="text">
-	{{if .SpoilerText}}
-	<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
-	<div class="spoiler">
-		<span>{{.SpoilerText}}</span><label class="spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
+<div class="contentgrid">
+	<a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a>
+	<a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{.Account.DisplayName}}{{else}}{{.Account.Username}}{{end}}</a>
+	<a href="{{.Account.URL}}" class="username">@{{.Account.Username}}</a>
+	<div class="text">
+		{{if .SpoilerText}}
+		<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
+		<div class="spoiler">
+			<span>{{.SpoilerText}}</span><label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
+		</div>
+		{{end}}
+		<div class="content">
+			{{.Content |noescape}}
+		</div>
 	</div>
+	{{with .MediaAttachments}}
+		<div class="media {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
+			{{range .}}
+				<a href="{{.URL}}" target="_blank" title="{{.Description}}">
+						{{if not .Description}}
+			 			<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div>
+					{{end}}
+					<img src="{{.PreviewURL}}" alt="{{.Description}}"/>
+				</a>
+			{{end}}
+		</div>
 	{{end}}
-	<div class="content">
-		{{.Content |noescape}}
-	</div>
 </div>
-{{with .MediaAttachments}}
-	<div class="media {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
-		{{range .}}
-			<a href="{{.URL}}" target="_blank" title="{{.Description}}">
-					{{if not .Description}}
-			 		<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div>
-				{{end}}
-				<img src="{{.PreviewURL}}" alt="{{.Description}}"/>
-			</a>
-		{{end}}
-	</div>
-{{end}}
 <div class="info">
 	<div id="date">{{.CreatedAt | timestamp}}</div>
 	<div class="stats">
-- 
cgit v1.3