diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/assets/NotoSans-Bold.ttf | bin | 0 -> 415132 bytes | |||
| -rw-r--r-- | web/assets/NotoSans-Regular.ttf | bin | 0 -> 414820 bytes | |||
| -rw-r--r-- | web/assets/OFL.txt | 96 | ||||
| -rw-r--r-- | web/source/css/_colors.css | 56 | ||||
| -rw-r--r-- | web/source/css/base.css | 165 | ||||
| -rw-r--r-- | web/source/css/profile.css | 60 | ||||
| -rw-r--r-- | web/source/css/status.css | 57 | ||||
| -rw-r--r-- | web/template/footer.tmpl | 26 | ||||
| -rw-r--r-- | web/template/header.tmpl | 11 | ||||
| -rw-r--r-- | web/template/index.tmpl | 18 | ||||
| -rw-r--r-- | web/template/profile.tmpl | 5 | ||||
| -rw-r--r-- | web/template/status.tmpl | 48 |
12 files changed, 374 insertions, 168 deletions
diff --git a/web/assets/NotoSans-Bold.ttf b/web/assets/NotoSans-Bold.ttf Binary files differnew file mode 100644 index 000000000..6e00cdce1 --- /dev/null +++ b/web/assets/NotoSans-Bold.ttf diff --git a/web/assets/NotoSans-Regular.ttf b/web/assets/NotoSans-Regular.ttf Binary files differnew file mode 100644 index 000000000..9dd10199b --- /dev/null +++ b/web/assets/NotoSans-Regular.ttf diff --git a/web/assets/OFL.txt b/web/assets/OFL.txt new file mode 100644 index 000000000..13f3f8d59 --- /dev/null +++ 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 index b768792c5..25bfae26e 100644 --- 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 index 69a549d99..c2cd78b67 100644 --- 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 index 954519a97..ca4192e11 100644 --- 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 index a6e9305b8..db56b7a50 100644 --- 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 index 075682f60..11e14ba4d 100644 --- 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 index b355c83be..ebee0958f 100644 --- 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 index 34d795373..715aec908 100644 --- 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 index f05ce696e..b8e3b0f6e 100644 --- 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 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"> |