[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/assets/OFL.txt

@@ -0,0 +1,96 @@
+Open Font License applies to NotoSans-Regular.ttf and NotoSans-Bold.ttf in this directory
+
+Copyright 2012 Google Inc. All Rights Reserved.
+
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to
+provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software
+components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to,
+deleting, or substituting -- in part or in whole -- any of the
+components of the Original Version, by changing formats or by porting
+the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed,
+modify, redistribute, and sell modified and unmodified copies of the
+Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created using
+the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web/source/css/_colors.css

@@ -21,15 +21,53 @@
    postcss-custom-prop-vars will transpile these to css --variables
 */
 
-$bg: #525c66;
+/* Color definitions */
-$fg: #fafaff;
-$fg_dark: #b0b0b5;
 
-$bg_darker3: color-mod($bg lightness(-3%));
+$near_white: #fafaff;
-$bg_darker5: color-mod($bg lightness(-5%));
 
-$bg_lighter3: color-mod($bg lightness(+3%));
+$sloth_gray1: #b0b0b5;
+$sloth_gray2: #4d4e56;
 
-$acc1: #de8957; // sloth light orange
+$sloth_orange1: #e78e5a;
-$acc2: #c76d33; // sloth dark orange
+$sloth_orange2: #D87841;
-$blue: #5897df;
+$blue: #63b1de; // complementary color to $sloth_orange1
+
+/* derivative colors */
+
+$sloth_gray2_darker3: color-mod($sloth_gray2 lightness(-3%));
+$sloth_gray2_darker5: color-mod($sloth_gray2 lightness(-5%));
+$sloth_gray2_darker7: color-mod($sloth_gray2 lightness(-7%));
+$sloth_gray2_darker15: color-mod($sloth_gray2 lightness(-15%));
+$sloth_gray2_lighter3: color-mod($sloth_gray2 lightness(+3%));
+$sloth_gray2_lighter5: color-mod($sloth_gray2 lightness(+5%));
+
+$blue_lighter8: color-mod($blue lightness(+4%));
+$lightblue: color-mod($blue lightness(+16%));
+
+$fg: $near_white;
+$bg: $sloth_gray2_darker7;
+
+$bg_trans: color-mod($sloth_gray2 alpha(62%));
+
+$bg_accent: $sloth_gray2_lighter3;
+$fg_accent: $lightblue;
+
+/* Color variables as used in a specific location */
+
+$footer_bg: $bg_accent;
+
+$link_fg: $fg_accent;
+
+$button_border: 0.08rem solid color-mod($sloth_orange2 lightness(-15%));
+$button_bg: $blue_lighter8;
+$button_fg: $sloth_gray2_darker15;
+$button_hover_bg: $lightblue;
+
+$status_focus_bg: $bg_accent;
+$status_unfocus_bg: $sloth_gray2_darker3;
+$status_info_fg: #CBCBD7;
+
+$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
+$boxshadow_border: 0.08rem solid $sloth_gray2_darker5;
+
+$profile_avatar_border: 0.2rem solid $sloth_orange2;

web/source/css/base.css

@@ -16,15 +16,26 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+@font-face {
+	font-family: "Noto Sans";
+	font-weight: 400;
+	src: url(../NotoSans-Regular.ttf) format('truetype');
+}
+
+@font-face {
+	font-family: "Noto Sans";
+	font-weight: bold;
+	src: url(../NotoSans-Bold.ttf) format('truetype');
+}
+
 $br: 0.4rem;
-$boxshadow: 0 0.4rem 1rem -0.2rem rgba(0,0,0,0.2);
 
 html, body {
 	padding: 0;
 	margin: 0;
-	background: $bg_darker5;
+	background: $bg;
 	color: $fg;
-	font-family: sans-serif;
+	font-family: "Noto Sans", sans-serif;
 }
 
 body {
@@ -39,52 +50,44 @@ body {
 	min-height: 100%;
 	min-width: 100%;
 
-	grid-template-rows: auto 1fr auto;
-}
-
-main {
-	background: $bg;
-	display: grid;
-	padding-top: 2rem;
-	padding-bottom: 2rem;
 	grid-template-columns: 1fr 50% 1fr;
 	grid-template-columns: auto min(92%, 90ch) auto;
 
-	.left {
+	grid-template-rows: auto 1fr auto;
-		grid-column: 1;
 }
 
-	.right {
+h1 {
-		grid-column: 3;
+	margin: 0;
+	line-height: 2.4rem;
 }
 
-	&.lightgray {
+a {
-		background: $bg;
+	color: $link_fg;
 }
 
-	& > * {
+header, footer {
-		align-self: start;
+	grid-column: 1 / span 3;
+}
+
+.content {
 	grid-column: 2;
-	}
+	align-self: start;
 }
 
-header {
+header a {
-	background: $bg_darker5;
+	margin: 2rem;
-	padding: 2rem 0;
+	/* background: $header_bg; */
-	padding-bottom: 0;
 	display: flex;
+	flex-direction: column;
 	flex-wrap: wrap;
 
 	img {
-		height: 4rem;
+		margin-bottom: 1rem;
-		padding-left: 2rem;
+		align-self: center;
-		padding-bottom: 2rem;
+		height: 6rem;
 	}
 
 	div {
-		height: 100%;
-		margin: 0 2rem;
-		margin-top: -2rem;
 		flex-grow: 1;
 		align-self: center;
 		display: flex;
@@ -96,20 +99,45 @@ header {
 	}
 }
 
-h1 {
+.excerpt_top {
-	/* color: $acc1; */
+	margin-top: -1rem;
-	margin: 0;
+	margin-bottom: 2rem;
-	line-height: 2.4rem;
+	font-style: italic;
+	font-weight: normal;
+	text-align: center;
+	font-size: 1.2rem;
+
+	.count {
+		font-weight: bold;
+		color: $fg_accent;
+	}
 }
 
-a {
+main {
-	color: $acc1;
+	section {
+		background: $bg_accent;
+		box-shadow: $boxshadow;
+		border: $boxshadow_border;
+		border-radius: $br;
+		padding: 2rem;
+		margin-bottom: 2rem;
+	}
+
+	p:first-child {
+		margin-top: 0;
+	}
+
+	p:last-child {
+		margin-bottom: 0;
+	}
 }
 
 .button, button {
 	border-radius: 0.2rem;
-	background: $acc1;
+	color: $button_fg;
-	color: $fg;
+	background: $button_bg;
+	box-shadow: $boxshadow;
+	border: $button_border;
 	text-decoration: none;
 	font-size: 1.2rem;
 	font-weight: bold;
@@ -118,16 +146,10 @@ a {
 	cursor: pointer;
 
 	&:hover {
-		background: $acc2;
+		background: $button_hover_bg;
 	}
 }
 
-.count {
-	background: $bg_darker5;
-	border-radius: 0.3rem;
-	padding: 0.2rem;
-}
-
 .nounderline {
 	text-decoration: none;
 }
@@ -154,10 +176,10 @@ section.apps {
 
 		.entry {
 			display: grid;
-			grid-template-columns: 30% 1fr;
+			grid-template-columns: 25% 1fr;
-			gap: 0.5rem;
+			gap: 1.5rem;
 			padding: 0.5rem;
-			background: $bg_darker5;
+			background: $bg_accent;
 			border-radius: 0.5rem;
 
 			.logo {
@@ -172,6 +194,10 @@ section.apps {
 				stroke: $fg;
 			}
 
+			a {
+				font-weight: bold;
+			}
+
 			div {
 				padding: 1rem 0;
 				h3 {
@@ -224,8 +250,13 @@ footer {
 	align-self: end;
 
 	padding: 2rem;
-	display: grid;
+	display: flex;
-	grid-template-columns: 1fr 1fr 1fr 1fr;
+	justify-content: center;
+
+	div {
+		margin: 0 2rem;
+		padding: 1rem;
+	}
 
 	a {
 		font-weight: bold;
@@ -233,7 +264,7 @@ footer {
 }
 
 @media screen and (orientation: portrait) {
-	main {
+	.page {
 		grid-template-columns: 1fr 92% 1fr;
 	}
 

web/source/css/profile.css

@@ -16,6 +16,12 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+header {
+	a img {
+		height: 5rem;
+	}
+}
+
 main {
 	background: transparent;
 	padding-top: 0;
@@ -23,7 +29,7 @@ main {
 
 .profile {
 	position: relative;
-	background: $bg_darker3;
+	background: $bg_accent;
 	display: grid;
 	grid-template-rows: minmax(6rem, 20%) auto auto;
 	grid-template-columns: 1fr;
@@ -34,6 +40,7 @@ main {
 	border-radius: $br;
 
 	box-shadow: $boxshadow;
+	border: $boxshadow_border;
 
 	.headerimage {
 		height: 100%;
@@ -50,20 +57,31 @@ main {
 	}
 
 	.basic {
+		max-height: 10rem;
 		margin-top: -7rem;
-		padding: 0 1rem;
 
 		display: grid;
-		grid-template-columns: auto 1fr;
+		grid-template-columns: 1rem auto 1fr;
-		grid-template-rows: 6.5rem auto;
+		grid-template-rows: 1fr auto auto;
+
+		grid-template-areas:
+			". avatar ."
+			"filler2 avatar displayname"
+			". avatar username";
+
+		#profile-basic-filler2 {
+			grid-area: filler2;
+			background: $bg_trans;
+			margin-top: 0.3rem;
+		}
 
 		.avatar {
 			box-sizing: border-box;
 			height: 8.5rem;
 			width: 8.5rem;
-			grid-row: 1 / span 2;
+			grid-area: avatar;
 			background: $bg;
-			border: 0.2rem solid $acc2;
+			border: $profile_avatar_border;
 			padding: 0;
 			border-radius: $br;
 			position: relative;
@@ -77,24 +95,33 @@ main {
 			}
 		}
 
-		a {
+		a, div {
-			position: relative;
-			z-index: 1;
 			color: inherit;
 			text-decoration: none;
 			padding: 0.5rem;
 		}
 
 		.displayname {
+			grid-area: displayname;
+			padding-right: 1rem;
 			align-self: end;
 			font-weight: bold;
 			font-size: 2rem;
+			margin-top: 0.3rem;
 			line-height: 2.2rem;
+			background: $bg_trans;
+			word-break: break-all;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			max-height: 6rem;
 		}
 
 		.username {
-			padding-top: 0.25rem;
+			grid-area: username;
-			color: $acc1;
+			padding-top: 0;
+			margin-top: 0.25rem;
+			padding-bottom: 0.25rem;
+			color: $fg_accent;
 			font-weight: bold;
 		}
 	}
@@ -110,7 +137,7 @@ main {
 		}
 
 		.bio {
-			margin: 0;
+			margin: 0.5rem 0;
 
 			a {
 				color: $acc1;
@@ -121,15 +148,14 @@ main {
 }
 
 .accountstats {
-	background: $bg_lighter3;
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: space-between;
+	justify-content: space-around;
-	padding: 0 1.2rem;
 	border-radius: 0 0 $br $br;
+	border-top: 0.1rem solid $bg;
 
 	.entry {
-		padding: 1rem 0;
+		padding: 1rem 1.2rem;
 		text-align: center;
 	}
 }

web/source/css/status.css

@@ -25,19 +25,16 @@ main {
 	display: flex;
 	flex-direction: column;
 	border-radius: $br;
-	background: $bg_darker5;
-	box-shadow: $boxshadow;
 }
 
 .toot {
+	background: $status_unfocus_bg;
+	box-shadow: $boxshadow;
+	border: $boxshadow_border;
 	position: relative;
-	background: $bg_darker3;
-	padding: 1.5rem;
-	display: grid;
-	grid-template-columns: 4rem auto 1fr;
-	column-gap: 0.5rem;
 	margin-bottom: $br;
 	border-radius: $br;
+	padding: 1.5rem 0;
 
 	a {
 		position: relative;
@@ -46,6 +43,14 @@ main {
 		text-decoration: none;
 	}
 
+	.contentgrid {
+		padding: 0 1.5rem;
+		display: grid;
+		grid-template-columns: 4rem auto 1fr;
+		grid-template-rows: 1.5rem auto auto;
+		column-gap: 0.5rem;
+	}
+
 	.avatar {
 		grid-row: span 2;
 		aspect-ratio: 1/1;
@@ -64,12 +69,17 @@ main {
 	.displayname {
 		font-weight: bold;
 		font-size: 1.2rem;
+		line-height: 2rem;
+		margin-top: -0.5rem;
 		align-self: start;
 	}
 	
 	.username {
-		color: $fg_dark;
+		color: $link_fg;
+		line-height: 2rem;
+		margin-top: -0.5rem;
 		justify-self: start;
+		align-self: start;
 	}
 
 	input.spoiler:checked ~ .content {
@@ -78,25 +88,24 @@ main {
 
 	.spoiler {
 		label {
-			background: $acc1;
+			padding: 0.2rem 0.3rem;
-			border-radius: 0.3rem;
-			padding: 0.3rem;
 			margin-left: 0.4rem;
 			position: relative;
 			z-index: 2;
 			cursor: pointer;
+			font-size: 1rem;
 		}
 		label:hover {
-			background: $acc2;
 		}
 	}
 
 	.text {
 		margin: 0;
+		margin-top: 0.5rem;
 		grid-column: span 2;
 
 		a {
-			color: $acc1;
+			color: $link_fg;
 			text-decoration: underline;
 		}
 	}
@@ -161,6 +170,8 @@ main {
 
 	.info {
 		display: none;
+		border-top: 0.15rem solid $status_unfocus_bg;
+		padding: 0.5rem 1.5rem;
 
 		div {
 			position: relative;
@@ -171,7 +182,6 @@ main {
 			display: flex;
 		}
 
-		color: #b0b0b5;
 		grid-column: span 3;
 		margin-top: 0.5rem;
 		flex-wrap: wrap;
@@ -216,28 +226,29 @@ main {
 
 	&:first-child {
 		/* top left, top right */
-		border-radius: $br $br 0 0;
+		border-top-left-radius: $br;
+		border-top-right-radius: $br;
 	}
 
 	&:last-child {
 		/* bottom left, bottom right */
-		border-radius: 0 0 $br $br;
+		border-bottom-left-radius: $br;
-		padding-bottom: 1.5rem;
+		border-bottom-right-radius: $br;
 		margin-bottom: 0;
 	}
 
 	&.expanded {
-		background: $bg;
+		background: $status_focus_bg;
-		padding-bottom: 1.5rem;
+		padding-bottom: 0;
 
 		.displayname {
 			grid-column: span 2;
 		}
 
 		.text {
+			margin-top: 0;
 			grid-column: span 3;
 			grid-row: span 1;
-			margin-top: 0.3rem;
 		}
 
 		.info {

web/template/footer.tmpl

@@ -1,19 +1,21 @@
 		<!-- footer.tmpl -->
+		</div>
 		<footer>
 			<div id="version">
-				GoToSocial: <span class="accent">{{.instance.Version}}</span><br>
+				<a name="Source code" href="https://github.com/superseriousbusiness/gotosocial">
-				<a href="https://github.com/superseriousbusiness/gotosocial">Source Code</a>
+					GoToSocial <span class="accent">{{.instance.Version}}</span>
+				</a>
 			</div>
-			<div id="contact">
 			{{ if .instance.ContactAccount }} 
+				<div id="contact">
 					Contact: <a href="{{.instance.ContactAccount.URL}}" class="nounderline">{{.instance.ContactAccount.Username}}</a><br>
-				{{ end }}
 				</div>
-			<div id="email">
+			{{ end }}
 			{{ if .instance.Email }} 
+				<div id="email">
 					Email: <a href="mailto:{{.instance.Email}}" class="nounderline">{{.instance.Email}}</a><br>
-				{{ end }}
 				</div>
+			{{ end }}
 		</footer>
 	</div>
 	{{ if .javascript }}

web/template/header.tmpl

@@ -8,7 +8,6 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="og:title" content="{{.instance.Title}} - GoToSocial">
 	<meta name="og:description" content="{{.instance.ShortDescription}}">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="/assets/dist/_colors.css">
 	<link rel="stylesheet" href="/assets/dist/base.css">
 	{{range .stylesheets}}<link rel="stylesheet" href="{{.}}">
@@ -18,14 +17,14 @@
 </head>
 <body>
 	<div class="page">
-		<a aria-label="instance homepage" href="/" class="nounderline header">
 		<header>
+			<a aria-label="instance homepage" href="/" class="nounderline header">
 				<img src="/assets/logo.png" alt="Instance Logo"/>
 				<div>
 					<h1>
 						{{.instance.Title}}
 					</h1>
 				</div>
-				<div></div>
-			</header>
 			</a>
+		</header>
+		<div class="content">

web/template/index.tmpl

@@ -1,19 +1,19 @@
 {{ template "header.tmpl" .}}
-<main class="lightgray">
+<section class="excerpt_top">
-
+	home to <span class="count">{{.instance.Stats.user_count}}</span> users
-	<section>
-		<h1>Home to <span class="count">{{.instance.Stats.user_count}}</span> users
 		who posted <span class="count">{{.instance.Stats.status_count}}</span> statuses,
-			federating with  <span class="count">{{.instance.Stats.domain_count}}</span> other instances.</h1>
+		federating with  <span class="count">{{.instance.Stats.domain_count}}</span> other instances.
+</section>
+<main class="lightgray">
+	<section>
 		<div className="short-description">
 			{{.instance.ShortDescription |noescape}}
 		</div>
 	</section>
-	
 	<section class="apps">
 		<p>
-			GoToSocial does not provide its own frontend, but implements the Mastodon client API.
+			GoToSocial does not provide its own webclient, but implements the Mastodon client API.
-			You can use this server through a variety of clients:
+			You can use this server through a variety of other clients:
 		</p>
 		<div class="applist">
 			<div class="entry">
@@ -25,7 +25,7 @@
 				<div>
 					<h2>Pinafore</h2>
 					<p>Pinafore is a web client designed for speed and simplicity.</p>
-					<a class="button" href="https://pinafore.social/settings/instances/add">Use Pinafore</a>
+					<a href="https://pinafore.social/settings/instances/add">Use Pinafore</a>
 				</div>
 			</div>
 			<div class="entry">
@@ -33,7 +33,7 @@
 				<div>
 					<h2>Tusky</h2>
 					<p>Tusky is a lightweight mobile client for Android</p>
-					<a class="button" href="https://tusky.app">Get Tusky</a>
+					<a href="https://tusky.app">Get Tusky</a>
 				</div>
 			</div>
 		</div>

web/template/profile.tmpl

@@ -10,9 +10,10 @@
             {{ end }}
         </div>
         <div class="basic">
+            <div id="profile-basic-filler2"></div>
             <a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}" alt="{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}'s avatar"></a>
-            <a href="{{.account.URL}}" class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</a>
+            <div class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</div>
-            <a href="{{.account.URL}}" class="username">@{{.account.Username}}</a>
+            <div class="username">@{{.account.Username}}@{{.instance.Title}}</div>
         </div>
         <div class="detailed">
             <div class="bio">

web/template/status.tmpl

@@ -1,3 +1,4 @@
+<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>
@@ -5,7 +6,7 @@
 		{{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>
+			<span>{{.SpoilerText}}</span><label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
 		</div>
 		{{end}}
 		<div class="content">
@@ -24,6 +25,7 @@
 			{{end}}
 		</div>
 	{{end}}
+</div>
 <div class="info">
 	<div id="date">{{.CreatedAt | timestamp}}</div>
 	<div class="stats">