commit 16ddad36b252a1dbe489b8fc58461570be9ef8b4
parent 4a69651a7c7945b11760d9ca82d9945834f01f73
Author: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Mon, 4 Jul 2022 16:23:59 +0200
[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>
Diffstat:
12 files changed, 375 insertions(+), 169 deletions(-)
diff --git a/web/assets/NotoSans-Bold.ttf b/web/assets/NotoSans-Bold.ttf
Binary files differ.
diff --git a/web/assets/NotoSans-Regular.ttf b/web/assets/NotoSans-Regular.ttf
Binary files differ.
diff --git a/web/assets/OFL.txt b/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.
diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
@@ -21,15 +21,53 @@
postcss-custom-prop-vars will transpile these to css --variables
*/
-$bg: #525c66;
-$fg: #fafaff;
-$fg_dark: #b0b0b5;
+/* Color definitions */
-$bg_darker3: color-mod($bg lightness(-3%));
-$bg_darker5: color-mod($bg lightness(-5%));
+$near_white: #fafaff;
-$bg_lighter3: color-mod($bg lightness(+3%));
+$sloth_gray1: #b0b0b5;
+$sloth_gray2: #4d4e56;
-$acc1: #de8957; // sloth light orange
-$acc2: #c76d33; // sloth dark orange
-$blue: #5897df;
+$sloth_orange1: #e78e5a;
+$sloth_orange2: #D87841;
+$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;
+\ No newline at end of file
diff --git a/web/source/css/base.css b/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-column: 1;
- }
+ grid-template-rows: auto 1fr auto;
+}
- .right {
- grid-column: 3;
- }
+h1 {
+ margin: 0;
+ line-height: 2.4rem;
+}
- &.lightgray {
- background: $bg;
- }
+a {
+ color: $link_fg;
+}
- & > * {
- align-self: start;
- grid-column: 2;
- }
+header, footer {
+ grid-column: 1 / span 3;
}
-header {
- background: $bg_darker5;
- padding: 2rem 0;
- padding-bottom: 0;
+.content {
+ grid-column: 2;
+ align-self: start;
+}
+
+header a {
+ margin: 2rem;
+ /* background: $header_bg; */
display: flex;
+ flex-direction: column;
flex-wrap: wrap;
img {
- height: 4rem;
- padding-left: 2rem;
- padding-bottom: 2rem;
+ margin-bottom: 1rem;
+ align-self: center;
+ 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 {
- /* color: $acc1; */
- margin: 0;
- line-height: 2.4rem;
+.excerpt_top {
+ margin-top: -1rem;
+ margin-bottom: 2rem;
+ font-style: italic;
+ font-weight: normal;
+ text-align: center;
+ font-size: 1.2rem;
+
+ .count {
+ font-weight: bold;
+ color: $fg_accent;
+ }
}
-a {
- color: $acc1;
+main {
+ 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: $fg;
+ color: $button_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;
- gap: 0.5rem;
+ grid-template-columns: 25% 1fr;
+ 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 {
@@ -199,18 +225,18 @@ section.error {
display: flex;
flex-direction: row;
align-items: center;
- span {
- font-size: 2em;
- }
- pre {
- border: 1px solid #ff000080;
- margin-left: 1em;
- padding: 0 0.7em;
- border-radius: 0.5em;
- background-color: #ff000010;
- font-size: 1.3em;
- white-space: pre-wrap;
- }
+ span {
+ font-size: 2em;
+ }
+ pre {
+ border: 1px solid #ff000080;
+ margin-left: 1em;
+ padding: 0 0.7em;
+ border-radius: 0.5em;
+ background-color: #ff000010;
+ font-size: 1.3em;
+ white-space: pre-wrap;
+ }
}
input, select, textarea {
@@ -224,8 +250,13 @@ footer {
align-self: end;
padding: 2rem;
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
+ display: flex;
+ 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;
}
diff --git a/web/source/css/profile.css b/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-rows: 6.5rem auto;
+ grid-template-columns: 1rem auto 1fr;
+ 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 {
- position: relative;
- z-index: 1;
+ a, div {
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;
- color: $acc1;
+ grid-area: username;
+ 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;
- padding: 0 1.2rem;
+ justify-content: space-around;
border-radius: 0 0 $br $br;
+ border-top: 0.1rem solid $bg;
.entry {
- padding: 1rem 0;
+ padding: 1rem 1.2rem;
text-align: center;
}
}
@@ -140,4 +166,4 @@ main {
#recent {
margin-left: 1rem;
-}
-\ No newline at end of file
+}
diff --git a/web/source/css/status.css b/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,10 +43,18 @@ 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;
-
+
img {
height: 100%;
width: 100%;
@@ -60,16 +65,21 @@ main {
border-radius: calc($br / 1.5);
}
}
-
+
.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;
- border-radius: 0.3rem;
- padding: 0.3rem;
+ padding: 0.2rem 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;
- padding-bottom: 1.5rem;
+ border-bottom-left-radius: $br;
+ border-bottom-right-radius: $br;
margin-bottom: 0;
}
&.expanded {
- background: $bg;
- padding-bottom: 1.5rem;
+ background: $status_focus_bg;
+ 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 {
diff --git a/web/template/footer.tmpl b/web/template/footer.tmpl
@@ -1,19 +1,21 @@
<!-- footer.tmpl -->
+ </div>
<footer>
<div id="version">
- GoToSocial: <span class="accent">{{.instance.Version}}</span><br>
- <a href="https://github.com/superseriousbusiness/gotosocial">Source Code</a>
- </div>
- <div id="contact">
- {{ if .instance.ContactAccount }}
- Contact: <a href="{{.instance.ContactAccount.URL}}" class="nounderline">{{.instance.ContactAccount.Username}}</a><br>
- {{ end }}
- </div>
- <div id="email">
- {{ if .instance.Email }}
- Email: <a href="mailto:{{.instance.Email}}" class="nounderline">{{.instance.Email}}</a><br>
- {{ end }}
+ <a name="Source code" href="https://github.com/superseriousbusiness/gotosocial">
+ GoToSocial <span class="accent">{{.instance.Version}}</span>
+ </a>
</div>
+ {{ if .instance.ContactAccount }}
+ <div id="contact">
+ Contact: <a href="{{.instance.ContactAccount.URL}}" class="nounderline">{{.instance.ContactAccount.Username}}</a><br>
+ </div>
+ {{ end }}
+ {{ if .instance.Email }}
+ <div id="email">
+ Email: <a href="mailto:{{.instance.Email}}" class="nounderline">{{.instance.Email}}</a><br>
+ </div>
+ {{ end }}
</footer>
</div>
{{ if .javascript }}
diff --git a/web/template/header.tmpl b/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>
+ <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>
+ </a>
+ </header>
+ <div class="content">
diff --git a/web/template/index.tmpl b/web/template/index.tmpl
@@ -1,19 +1,19 @@
{{ template "header.tmpl" .}}
+<section class="excerpt_top">
+ 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.
+</section>
<main class="lightgray">
-
<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>
<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.
- You can use this server through a variety of clients:
+ GoToSocial does not provide its own webclient, but implements the Mastodon client API.
+ 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>
diff --git a/web/template/profile.tmpl b/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>
- <a href="{{.account.URL}}" class="username">@{{.account.Username}}</a>
+ <div class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</div>
+ <div class="username">@{{.account.Username}}@{{.instance.Title}}</div>
</div>
<div class="detailed">
<div class="bio">
diff --git 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">
