mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-11-22 03:36:39 +00:00
[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>
This commit is contained in:
tobi
GitHub
parent
4a69651a7c
commit
16ddad36b2
BIN
web/assets/NotoSans-Bold.ttf
Normal file
BIN
web/assets/NotoSans-Bold.ttf
Normal file
Binary file not shown.
BIN
web/assets/NotoSans-Regular.ttf
Normal file
BIN
web/assets/NotoSans-Regular.ttf
Normal file
Binary file not shown.
96
web/assets/OFL.txt
Normal file
96
web/assets/OFL.txt
Normal file
|
|
@ -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.
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.right {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
&.lightgray {
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
& > * {
|
||||
align-self: start;
|
||||
grid-column: 2;
|
||||
}
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
header {
|
||||
background: $bg_darker5;
|
||||
padding: 2rem 0;
|
||||
padding-bottom: 0;
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link_fg;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{{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>
|
||||
<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>
|
||||
{{end}}
|
||||
{{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>
|
||||
<div class="info">
|
||||
<div id="date">{{.CreatedAt | timestamp}}</div>
|
||||
<div class="stats">
|
||||
|
|
|
|||
Loading…
Reference in a new issue