diff --git a/web/assets/NotoSans-Bold.ttf b/web/assets/NotoSans-Bold.ttf new file mode 100644 index 000000000..6e00cdce1 Binary files /dev/null and b/web/assets/NotoSans-Bold.ttf differ diff --git a/web/assets/NotoSans-Regular.ttf b/web/assets/NotoSans-Regular.ttf new file mode 100644 index 000000000..9dd10199b Binary files /dev/null and b/web/assets/NotoSans-Regular.ttf differ 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 . */ +@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; } 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 . */ +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 @@ + {{ 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 @@ - {{range .stylesheets}} @@ -18,14 +17,14 @@
- -
+
+ Instance Logo

{{.instance.Title}}

-
-
- + +
+
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" .}} +
+ home to {{.instance.Stats.user_count}} users + who posted {{.instance.Stats.status_count}} statuses, + federating with {{.instance.Stats.domain_count}} other instances. +
-
-

Home to {{.instance.Stats.user_count}} users - who posted {{.instance.Stats.status_count}} statuses, - federating with {{.instance.Stats.domain_count}} other instances.

{{.instance.ShortDescription |noescape}}
-

- 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:

@@ -25,7 +25,7 @@

Pinafore

Pinafore is a web client designed for speed and simplicity.

- Use Pinafore + Use Pinafore
@@ -33,7 +33,7 @@

Tusky

Tusky is a lightweight mobile client for Android

- Get Tusky + Get Tusky
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 }}
+
{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}'s avatar - {{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}} - @{{.account.Username}} +
{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}
+
@{{.account.Username}}@{{.instance.Title}}
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 @@ - -{{if .Account.DisplayName}}{{.Account.DisplayName}}{{else}}{{.Account.Username}}{{end}} -@{{.Account.Username}} -
- {{if .SpoilerText}} - -
- {{.SpoilerText}} -
- {{end}} -
- {{.Content |noescape}} -
-
-{{with .MediaAttachments}} -
- {{range .}} - - {{if not .Description}} - - {{end}} - {{.Description}} - +
+ + {{if .Account.DisplayName}}{{.Account.DisplayName}}{{else}}{{.Account.Username}}{{end}} + @{{.Account.Username}} +
+ {{if .SpoilerText}} + +
+ {{.SpoilerText}} +
{{end}} +
+ {{.Content |noescape}} +
-{{end}} + {{with .MediaAttachments}} +
+ {{range .}} + + {{if not .Description}} + + {{end}} + {{.Description}} + + {{end}} +
+ {{end}} +
{{.CreatedAt | timestamp}}