From 70342681c19fd03e8b3410e910e5d0da7c6f0637 Mon Sep 17 00:00:00 2001 From: f0x Date: Tue, 5 Nov 2024 15:53:22 +0100 Subject: [PATCH] refactor/split css, templates --- internal/web/about.go | 1 + internal/web/index.go | 2 +- internal/web/profile.go | 1 + web/source/css/about.css | 36 - web/source/css/base.css | 641 ------------------ web/source/css/{tag.css => base/_license.css} | 9 +- web/source/css/base/_normalize.css | 1 + web/source/css/base/fonts.css | 19 + web/source/css/base/main.css | 69 ++ web/source/css/components/account-card.css | 33 + web/source/css/components/column-header.css | 44 ++ web/source/css/components/emoji.css | 23 + web/source/css/components/forms.css | 68 ++ web/source/css/components/html-elements.css | 71 ++ web/source/css/components/lists.css | 128 ++++ web/source/css/components/prism.css | 51 ++ web/source/css/components/status/header.css | 67 ++ web/source/css/components/status/indent.css | 43 ++ .../css/{ => components/status}/status.css | 92 --- web/source/css/components/utility.css | 21 + web/source/css/index.css | 127 ---- web/source/css/{ => layout}/page.css | 99 ++- web/source/css/layout/sectioned.css | 16 + web/source/css/layout/single-page.css | 14 + web/source/css/layout/thread.css | 15 + web/source/css/pages/error.css | 17 + web/source/css/pages/form.css | 50 ++ web/source/css/pages/index.css | 65 ++ web/source/css/pages/oob-token.css | 8 + web/source/css/{ => pages}/profile.css | 123 +++- .../css/{_colors.css => themes/default.css} | 61 +- web/source/css/thread.css | 99 --- web/source/css/{ => vendor}/prism.css | 0 web/source/settings/components/status.tsx | 16 +- web/source/settings/style.css | 2 +- web/template/about.tmpl | 93 +-- web/template/email_new_report.tmpl | 2 +- web/template/finalize.tmpl | 17 +- web/template/index.tmpl | 8 +- web/template/index_apps.tmpl | 74 +- web/template/index_register.tmpl | 13 +- web/template/index_what_is_this.tmpl | 34 +- web/template/page.tmpl | 84 +-- web/template/page_footer.tmpl | 30 +- web/template/page_header.tmpl | 47 +- web/template/sign-up.tmpl | 64 +- web/template/signed-up.tmpl | 2 +- web/template/status.tmpl | 21 +- web/template/status_attachments.tmpl | 100 +-- web/template/status_attributes.tmpl | 34 +- web/template/status_header.tmpl | 65 +- web/template/status_poll.tmpl | 18 +- web/template/tag.tmpl | 2 +- web/template/thread.tmpl | 131 ++-- 54 files changed, 1371 insertions(+), 1600 deletions(-) delete mode 100644 web/source/css/about.css delete mode 100644 web/source/css/base.css rename web/source/css/{tag.css => base/_license.css} (85%) create mode 100644 web/source/css/base/_normalize.css create mode 100644 web/source/css/base/fonts.css create mode 100644 web/source/css/base/main.css create mode 100644 web/source/css/components/account-card.css create mode 100644 web/source/css/components/column-header.css create mode 100644 web/source/css/components/emoji.css create mode 100644 web/source/css/components/forms.css create mode 100644 web/source/css/components/html-elements.css create mode 100644 web/source/css/components/lists.css create mode 100644 web/source/css/components/prism.css create mode 100644 web/source/css/components/status/header.css create mode 100644 web/source/css/components/status/indent.css rename web/source/css/{ => components/status}/status.css (76%) create mode 100644 web/source/css/components/utility.css delete mode 100644 web/source/css/index.css rename web/source/css/{ => layout}/page.css (56%) create mode 100644 web/source/css/layout/sectioned.css create mode 100644 web/source/css/layout/single-page.css create mode 100644 web/source/css/layout/thread.css create mode 100644 web/source/css/pages/error.css create mode 100644 web/source/css/pages/form.css create mode 100644 web/source/css/pages/index.css create mode 100644 web/source/css/pages/oob-token.css rename web/source/css/{ => pages}/profile.css (78%) rename web/source/css/{_colors.css => themes/default.css} (84%) delete mode 100644 web/source/css/thread.css rename web/source/css/{ => vendor}/prism.css (100%) diff --git a/internal/web/about.go b/internal/web/about.go index 6d77d25fc..ac6b8ab67 100644 --- a/internal/web/about.go +++ b/internal/web/about.go @@ -59,6 +59,7 @@ func (m *Module) aboutGETHandler(c *gin.Context) { "showStrap": true, "blocklistExposed": config.GetInstanceExposeSuspendedWeb(), "languages": config.GetInstanceLanguages().DisplayStrs(), + "pageType": "with-sidebar", }, } diff --git a/internal/web/index.go b/internal/web/index.go index 0db8f5153..2c24e0dae 100644 --- a/internal/web/index.go +++ b/internal/web/index.go @@ -60,7 +60,7 @@ func (m *Module) indexHandler(c *gin.Context) { Instance: instance, OGMeta: apiutil.OGBase(instance), Stylesheets: []string{}, - Extra: map[string]any{"showStrap": true}, + Extra: map[string]any{"showStrap": true, "largeHeader": true}, } apiutil.TemplateWebPage(c, page) diff --git a/internal/web/profile.go b/internal/web/profile.go index ce28f02d1..3950d46ad 100644 --- a/internal/web/profile.go +++ b/internal/web/profile.go @@ -156,6 +156,7 @@ func (m *Module) profileGETHandler(c *gin.Context) { Javascript: []string{jsFrontend}, Extra: map[string]any{ "account": targetAccount, + "pageType": "wider", "rssFeed": rssFeed, "robotsMeta": robotsMeta, "statuses": statusResp.Items, diff --git a/web/source/css/about.css b/web/source/css/about.css deleted file mode 100644 index 80bca999f..000000000 --- a/web/source/css/about.css +++ /dev/null @@ -1,36 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -.about { - display: flex; - flex-direction: column; - gap: 2rem; - padding: 2rem; - - background: $bg-accent; - box-shadow: $boxshadow; - border: $boxshadow-border; - border-radius: $br; - - .about-section { - h1, h2, h3, h4, h5 { - margin-top: 0; - } - } -} diff --git a/web/source/css/base.css b/web/source/css/base.css deleted file mode 100644 index 5f2f75802..000000000 --- a/web/source/css/base.css +++ /dev/null @@ -1,641 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -/*************************************** -***** SECTION 0: IMPORTS AND FONTS ***** -****************************************/ - -@import "modern-normalize/modern-normalize.css"; -@import "./prism.css"; - -/* noto-sans-regular - latin */ -@font-face { - font-family: "Noto Sans"; - font-weight: 400; - font-display: swap; - font-style: normal; - src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), - url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'); -} - -/* noto-sans-700 - latin */ -@font-face { - font-family: "Noto Sans"; - font-weight: 700; - font-display: swap; - font-style: normal; - src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), - url('../fonts/noto-sans-v27-latin-700.woff') format('woff'); -} - -/************************************* -***** SECTION 1: HANDY VARIABLES ***** -**************************************/ - -/* - Standard border radius - for nice squircles. -*/ -$br: 0.4rem; - -/* - Border radius for items that - are framed/bordered inside - something with $br, eg avatar, - header img, etc. -*/ -$br-inner: 0.2rem; - -/* - Fork-Awesome 'fa-fw' fixed icon width; - keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50 -*/ -$fa-fw: 1.28571429em; - -/****************************************** -***** SECTION 2: BASIC GLOBAL STYLING ***** -*******************************************/ - -html, body { - padding: 0; - margin: 0; - background: $bg; - color: $fg; - font-family: "Noto Sans", sans-serif; - scrollbar-color: $orange1 $gray3; -} - -body { - line-height: 1.5em; - position: relative; -} - -a { - color: $link-fg; -} - -/* - Normalize margins of first and last children. - We generally don't want to open a paragraph or - paragraph-like element with a top margin or - close it with a bottom margin. -*/ -main { - p:first-child, ol:first-child, ul:first-child { - margin-top: 0; - } - - p:last-child, ol:last-child, ul:last-child { - margin-bottom: 0; - } -} - -.button, button { - border-radius: $br-inner; - color: $button-fg; - background: $button-bg; - box-shadow: $boxshadow; - border: $button-border; - text-decoration: none; - font-size: 1.2rem; - font-weight: bold; - padding: 0.5rem; - border: none; - cursor: pointer; - text-align: center; - font-family: 'Noto Sans', sans-serif; - - &.danger { - color: $button-danger-fg; - background: $button-danger-bg; - - &:hover { - background: $button-danger-hover-bg; - } - } - - &:disabled, - &.disabled { - color: $white2; - background: $gray2; - cursor: not-allowed; - - &:hover { - background: $gray3; - } - } - - &:hover { - background: $button-hover-bg; - } -} - -/* - Form styling - used in settings frontend as well. -*/ -input, select, textarea, .input { - box-sizing: border-box; - border: 0.15rem solid $input-border; - border-radius: 0.1rem; - color: $fg; - background: $input-bg; - width: 100%; - font-family: 'Noto Sans', sans-serif; - font-size: 1rem; - padding: 0.3rem; - - &:focus, &:active { - border-color: $input-focus-border; - } - - &:invalid, .invalid & { - border-color: $input-error-border; - } - - &:disabled { - background: transparent; - } - - &::placeholder { - opacity: 1; - color: $fg-reduced - } -} - -select { - /* - By default this looks awful on Gnome - Web so restyle a bit to try to make - it consistent with firefox + chrome. - */ - appearance: none; - line-height: 1.5rem; -} - -/* - Squeeze emojis so they fit inline in text. -*/ -.emoji { - width: 1.45em; - height: 1.45em; - margin: -0.2em 0.02em 0; - object-fit: contain; - vertical-align: middle; - - @media (prefers-reduced-motion: no-preference) { - /* - Enlarge emojis on hover to give - viewer a good look at them. - */ - transition: 0.1s; - &:hover, &:active { - transform: scale(2); - background-color: $bg; - box-shadow: $boxshadow; - border: $boxshadow-border; - border-radius: $br-inner; - } - } -} - -/* - Restyle unordered lists; outdent - and replace dot with orange dot. -*/ -ul { - padding-left: 2.5rem; - list-style: none; - - li::before { - content: "\2022"; - color: $border-accent; - font-weight: bold; - display: inline-block; - width: 1.5rem; - margin-left: -1.5rem; - } -} - -/* - Mirror the same styling a little bit - for ordered lists by making marker bold. -*/ -ol { - padding-left: 2.5rem; - - li::marker { - font-weight: bold; - } -} - -/* - Outdent block quotes a bit; use - orange strip for left border. -*/ -blockquote { - padding: 0.5rem; - border-left: 0.2rem solid $border-accent; - margin: 0; - font-style: normal; - - /* - Same background color we - use for code blocks - */ - background-color: $gray2; - border-radius: 0; -} - -/* - Nice dashed orange line - for horizontal rules. -*/ -hr { - border: 0; - border-top: 1px dashed $border-accent; -} - -/* - Don't indent definition - lists and definitions. -*/ -dl { - margin: 0; - - dd { - margin-left: 0; - } -} - -label { - cursor: pointer; -} - -/* - Set our own nice background for - monospace code and pre blocks. -*/ -pre, pre[class*="language-"], -code, code[class*="language-"] { - background-color: $gray2; -} - -/* - Just code on its own inside status - content, ie, `here is some code`. -*/ -code { - padding: 0.25rem; - border-radius: $br-inner; - white-space: pre-wrap; -} - -/* - Restyle Prism code highlighting toolbar - plugin buttons to our own button style. - - We have to use really specific selectors - because of how specific prism.css is. -*/ -div.code-toolbar > div.toolbar { - margin-right: 0.5rem; - display: flex; - gap: 0.25rem; - - > div.toolbar-item { - > span, > button { - color: $button-fg; - background: $button-bg; - font-weight: bold; - box-shadow: $boxshadow; - - &:hover, &:focus { - color: $button-fg; - } - } - - .copy-to-clipboard-button:hover { - background: $button-hover-bg; - } - } -} - -pre, pre[class*="language-"] { - border-radius: $br; - padding: 0.5rem; - white-space: pre; - overflow-x: auto; - - /* - Code inside a pre block, ie., - - ``` - here is some code - ``` - */ - code { - width: 100%; - padding: 0; - white-space: pre; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } -} - -/************************************* -***** SECTION 3: UTILITY CLASSES ***** -**************************************/ - -/* - Column header that appears at the top - of threads, at the top of sections of - profiles (About, Pinned Posts, etc). -*/ -.col-header { - display: grid; - grid-template-columns: auto 1fr; - gap: 1rem; - - justify-content: start; - align-items: center; - - margin: 0; - background: $profile-bg; - border-top-left-radius: $br; - border-top-right-radius: $br; - padding: 0.75rem; - - a { - justify-self: end; - } - - h1, h2, h3, h4 { - font-size: 1.2rem; - line-height: 1.3rem; - margin: 0; - } -} - -.hidden { - display: none; -} - -.nounderline { - text-decoration: none; -} - -.accent { - color: $acc1; -} - -.text-cutoff { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -/* - Class for lists that don't - want the orange dot. -*/ -.nodot { - li::before { - content: initial; - } -} - -/* - Forms and sign-in / sign-up / confirm pages. -*/ -section.with-form { - form { - display: flex; - flex-direction: column; - gap: 1rem; - - padding-bottom: 1rem; - padding-top: 1rem; - - p { - /* - We use gap so we don't - need top + bottom margins. - */ - margin-top: 0; - margin-bottom: 0; - } - - label, input { - padding-left: 0.2rem; - } - - .labelinput { - display: flex; - flex-direction: column; - gap: 0.4rem; - } - - .checkbox { - display: flex; - flex-direction: row-reverse; - gap: 0.4rem; - - & > input { - height: 100%; - width: 5%; - min-width: 1.2rem; - align-self: center; - } - } - - .btn { - /* Visually separate buttons a bit */ - margin-top: 1rem; - } - } -} - -/*********************************** -***** SECTION 4: SHAMEFUL MESS ***** -************************************/ - -/* - EVERYTHING BELOW THIS POINT: - Should be moved somewhere else - to avoid cluttering up this file. -*/ - -/* - Below section stylings are used - in transient pages + error templates. -*/ - -section.error { - word-break: break-word; - margin-bottom: 0.5rem; - - pre { - border: 1px solid #ff000080; - padding: 0.5rem; - border-radius: 0.5em; - background-color: #ff000010; - font-size: 1.3em; - white-space: pre-wrap; - } -} - -section.oob-token { - code { - background: $gray1; - padding: 0.5rem; - margin: 0; - border-radius: 0.3rem; - } -} - -/* - TODO: list and blocklist are only used - in settings panel and on blocklist page; - consider moving them somewhere else. -*/ -.list { - display: flex; - flex-direction: column; - - .header, .entry { - padding: 0.5rem; - } - - .header { - border: 0.1rem solid transparent !important; /* for alignment with .entry border padding */ - background: $gray1 !important; - display: flex; - font-weight: bold; - } - - .entries { - display: flex; - flex-direction: column; - - &.scrolling { - height: 20rem; - max-height: 20rem; - overflow: auto; - } - } - - input[type=checkbox] { - margin-left: 0.5rem; - } - - .entry { - display: flex; - flex-wrap: wrap; - background: $list-entry-bg; - border: 0.1rem solid transparent; - - &:nth-child(even) { - background: $list-entry-alternate-bg; - } - - &:hover { - background: $list-entry-hover-bg; - } - - &:active, &:focus, &:hover, &:target { - border-color: $fg-accent; - } - } -} - -.domain-blocklist { - box-shadow: $boxshadow; - - .entry { - display: grid; - grid-template-columns: max(30%, 10rem) 1fr; - gap: 0.5rem; - align-items: start; - border: $boxshadow-border; - border-top-color: transparent; - - & > div { - display: flex; - align-items: center - } - - .domain a { - font-weight: bold; - text-decoration: none; - display: inline-block; /* so it wraps properly */ - } - - .public_comment p { - margin: 0; - } - } - - .header .domain { - color: $fg; - } -} - -@media screen and (max-width: 30rem) { - .domain-blocklist .entry { - grid-template-columns: 1fr; - gap: 0; - } -} - -/* - TODO: this is only used on About - page and in settings application; - consider moving it somewhere else. -*/ -.account-card { - display: inline-grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto auto; - text-decoration: none; - gap: 0.5rem 1rem; - border-radius: $br; - padding: 0.5rem; - min-width: 40%; - margin-bottom: 0.3rem; - - background: $list-entry-bg; - - &:hover { - background: $list-entry-alternate-bg; - } - - h3 { - align-self: end; - margin: 0; - color: $fg; - } - - img.avatar { - border-radius: 0.5rem; - width: 5rem; - height: 5rem; - object-fit: cover; - grid-row: 1 / span 2; - } -} diff --git a/web/source/css/tag.css b/web/source/css/base/_license.css similarity index 85% rename from web/source/css/tag.css rename to web/source/css/base/_license.css index 2f1c9db98..1d64ef093 100644 --- a/web/source/css/tag.css +++ b/web/source/css/base/_license.css @@ -15,11 +15,4 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . -*/ - -.thread { - #tag-name { - /* Ensure ridiculous length tags get wrapped */ - word-wrap: anywhere; - } -} +*/ \ No newline at end of file diff --git a/web/source/css/base/_normalize.css b/web/source/css/base/_normalize.css new file mode 100644 index 000000000..0c8f0bfd9 --- /dev/null +++ b/web/source/css/base/_normalize.css @@ -0,0 +1 @@ +@import "modern-normalize/modern-normalize.css"; \ No newline at end of file diff --git a/web/source/css/base/fonts.css b/web/source/css/base/fonts.css new file mode 100644 index 000000000..ef40d989a --- /dev/null +++ b/web/source/css/base/fonts.css @@ -0,0 +1,19 @@ +/* noto-sans-regular - latin */ +@font-face { + font-family: "Noto Sans"; + font-weight: 400; + font-display: swap; + font-style: normal; + src: url('/assets/fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), + url('/assets/fonts/noto-sans-v27-latin-regular.woff') format('woff'); +} + +/* noto-sans-700 - latin */ +@font-face { + font-family: "Noto Sans"; + font-weight: 700; + font-display: swap; + font-style: normal; + src: url('/assets/fonts/noto-sans-v27-latin-700.woff2') format('woff2'), + url('/assets/fonts/noto-sans-v27-latin-700.woff') format('woff'); +} diff --git a/web/source/css/base/main.css b/web/source/css/base/main.css new file mode 100644 index 000000000..7c2f59d02 --- /dev/null +++ b/web/source/css/base/main.css @@ -0,0 +1,69 @@ +/* + Standard border radius + for nice squircles. +*/ +$br: 0.4rem; + +/* + Border radius for items that + are framed/bordered inside + something with $br, eg avatar, + header img, etc. +*/ +$br-inner: 0.2rem; + +/* + Fork-Awesome 'fa-fw' fixed icon width; + keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50 +*/ +$fa-fw: 1.28571429em; + +html, body { + padding: 0; + margin: 0; + background: $bg; + color: $fg; + font-family: "Noto Sans", sans-serif; + scrollbar-color: $orange1 $gray3; +} + +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } +} + +body { + line-height: 1.5em; + position: relative; +} + +a { + color: $link-fg; +} + +/* + Normalize margins of first and last children. + We generally don't want to open a paragraph or + paragraph-like element with a top margin or + close it with a bottom margin. +*/ +main { + display: flex; + flex-direction: column; + padding: 0; + + h1, h2, h3, h4, h5 { + & ~ p { + margin-top: 0; + } + } + + p:first-child, ol:first-child, ul:first-child { + margin-top: 0; + } + + p:last-child, ol:last-child, ul:last-child { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/web/source/css/components/account-card.css b/web/source/css/components/account-card.css new file mode 100644 index 000000000..a059922c1 --- /dev/null +++ b/web/source/css/components/account-card.css @@ -0,0 +1,33 @@ +/* Displays account with displayname, username and avatar */ +.account-card { + display: inline-grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + text-decoration: none; + gap: 0.5rem 1rem; + border-radius: $br; + padding: 0.5rem; + min-width: 40%; + margin-bottom: 0.3rem; + + background: $list-entry-bg; + + &:hover { + background: $list-entry-alternate-bg; + } + + b { + font-size: 1.25rem; + align-self: end; + margin: 0; + color: $fg; + } + + img.avatar { + border-radius: 0.5rem; + width: 5rem; + height: 5rem; + object-fit: cover; + grid-row: 1 / span 2; + } +} \ No newline at end of file diff --git a/web/source/css/components/column-header.css b/web/source/css/components/column-header.css new file mode 100644 index 000000000..17b2f57b4 --- /dev/null +++ b/web/source/css/components/column-header.css @@ -0,0 +1,44 @@ +/* + Column header that appears at the top + of threads, at the top of sections of + profiles (About, Pinned Posts, etc). +*/ +.col-header { + display: grid; + grid-template-columns: auto 1fr; + gap: 1rem; + + justify-content: start; + align-items: center; + + margin: 0; + background: $profile-bg; + border-top-left-radius: $br; + border-top-right-radius: $br; + padding: 0.75rem; + + a { + justify-self: end; + } + + h1, h2, h3, h4 { + font-size: 1.2rem; + line-height: 1.3rem; + margin: 0; + } + + &.wrap { /* for headers that can have a lot more text, like thread summary/reply info */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + column-gap: 1rem; + row-gap: 0.5rem; + + box-shadow: $boxshadow; + border: $boxshadow-border; + + h2 { + margin-right: auto; + } + } +} diff --git a/web/source/css/components/emoji.css b/web/source/css/components/emoji.css new file mode 100644 index 000000000..b2d7f38a7 --- /dev/null +++ b/web/source/css/components/emoji.css @@ -0,0 +1,23 @@ +/* Style emoji to fit in-line with text */ +.emoji { + width: 1.45em; + height: 1.45em; + margin: -0.2em 0.02em 0; + object-fit: contain; + vertical-align: middle; + + @media (prefers-reduced-motion: no-preference) { + /* + Enlarge emojis on hover to give + viewer a good look at them. + */ + transition: 0.1s; + &:hover, &:active { + transform: scale(2); + background-color: $bg; + box-shadow: $boxshadow; + border: $boxshadow-border; + border-radius: $br-inner; + } + } +} diff --git a/web/source/css/components/forms.css b/web/source/css/components/forms.css new file mode 100644 index 000000000..6c8cd35d1 --- /dev/null +++ b/web/source/css/components/forms.css @@ -0,0 +1,68 @@ +input, select, textarea, .input { + box-sizing: border-box; + border: 0.15rem solid $input-border; + border-radius: 0.1rem; + color: $fg; + background: $input-bg; + width: 100%; + font-family: 'Noto Sans', sans-serif; + font-size: 1rem; + padding: 0.3rem; + + &:focus, &:active { + border-color: $input-focus-border; + } + + &:invalid, .invalid & { + border-color: $input-error-border; + } + + &:disabled { + background: transparent; + } + + &::placeholder { + opacity: 1; + color: $fg-reduced + } +} + +.button, button { + border-radius: $br-inner; + color: $button-fg; + background: $button-bg; + box-shadow: $boxshadow; + border: $button-border; + text-decoration: none; + font-size: 1.2rem; + font-weight: bold; + padding: 0.5rem; + border: none; + cursor: pointer; + text-align: center; + font-family: 'Noto Sans', sans-serif; + + &.danger { + color: $button-danger-fg; + background: $button-danger-bg; + + &:hover { + background: $button-danger-hover-bg; + } + } + + &:disabled, + &.disabled { + color: $white2; + background: $gray2; + cursor: not-allowed; + + &:hover { + background: $gray3; + } + } + + &:hover { + background: $button-hover-bg; + } +} \ No newline at end of file diff --git a/web/source/css/components/html-elements.css b/web/source/css/components/html-elements.css new file mode 100644 index 000000000..d6f0933a9 --- /dev/null +++ b/web/source/css/components/html-elements.css @@ -0,0 +1,71 @@ +/* + Outdent block quotes a bit; use + orange strip for left border. +*/ +blockquote { + padding: 0.5rem; + border-left: 0.2rem solid $border-accent; + margin: 0; + font-style: normal; + + /* + Same background color we + use for code blocks + */ + background-color: $gray2; + border-radius: 0; +} + +/* + Nice dashed orange line + for horizontal rules. +*/ +hr { + border: 0; + border-top: 1px dashed $border-accent; +} + +/* + Don't indent definition + lists and definitions. +*/ +dl { + margin: 0; + + dd { + margin-left: 0; + } +} + +label { + cursor: pointer; +} + +/* + Set our own nice background for + monospace code and pre blocks. +*/ +pre, pre[class*="language-"], +code, code[class*="language-"] { + background-color: $gray2; +} + +/* + Just code on its own inside status + content, ie, `here is some code`. +*/ +code { + padding: 0.25rem; + border-radius: $br-inner; + white-space: pre-wrap; +} + +select { + /* + By default this looks awful on Gnome + Web so restyle a bit to try to make + it consistent with firefox + chrome. + */ + appearance: none; + line-height: 1.5rem; +} \ No newline at end of file diff --git a/web/source/css/components/lists.css b/web/source/css/components/lists.css new file mode 100644 index 000000000..073c64b43 --- /dev/null +++ b/web/source/css/components/lists.css @@ -0,0 +1,128 @@ +/* + Restyle unordered lists; outdent + and replace dot with orange dot (unless .nodot class applied). +*/ + +ul { + padding-left: 2.5rem; + list-style: none; + + li::before { + content: "\2022"; + color: $border-accent; + font-weight: bold; + display: inline-block; + width: 1.5rem; + margin-left: -1.5rem; + } + + &.nodot { + li::before { + content: initial; + } + } +} + +/* + Mirror the same styling a little bit + for ordered lists by making marker bold. +*/ + +ol { + padding-left: 2.5rem; + + li::marker { + font-weight: bold; + } +} + +/* Tabulated list */ +.list { + display: flex; + flex-direction: column; + + .header, .entry { + padding: 0.5rem; + } + + .header { + border: 0.1rem solid transparent !important; /* for alignment with .entry border padding */ + background: $gray1 !important; + display: flex; + font-weight: bold; + } + + .entries { + display: flex; + flex-direction: column; + + &.scrolling { + height: 20rem; + max-height: 20rem; + overflow: auto; + } + } + + input[type=checkbox] { + margin-left: 0.5rem; + } + + .entry { + display: flex; + flex-wrap: wrap; + background: $list-entry-bg; + border: 0.1rem solid transparent; + + &:nth-child(even) { + background: $list-entry-alternate-bg; + } + + &:hover { + background: $list-entry-hover-bg; + } + + &:active, &:focus, &:hover, &:target { + border-color: $fg-accent; + } + } +} + +/* Extends .list styling for domain-blocklist.tmpl */ +.domain-blocklist { + box-shadow: $boxshadow; + + .entry { + display: grid; + grid-template-columns: max(30%, 10rem) 1fr; + gap: 0.5rem; + align-items: start; + border: $boxshadow-border; + border-top-color: transparent; + + & > div { + display: flex; + align-items: center + } + + .domain a { + font-weight: bold; + text-decoration: none; + display: inline-block; /* so it wraps properly */ + } + + .public_comment p { + margin: 0; + } + } + + .header .domain { + color: $fg; + } +} + +@media screen and (max-width: 30rem) { + .domain-blocklist .entry { + grid-template-columns: 1fr; + gap: 0; + } +} diff --git a/web/source/css/components/prism.css b/web/source/css/components/prism.css new file mode 100644 index 000000000..64bd6164c --- /dev/null +++ b/web/source/css/components/prism.css @@ -0,0 +1,51 @@ +/* + Restyle Prism code highlighting toolbar + plugin buttons to our own button style. + + We have to use really specific selectors + because of how specific prism.css is. +*/ +div.code-toolbar > div.toolbar { + margin-right: 0.5rem; + display: flex; + gap: 0.25rem; + + > div.toolbar-item { + > span, > button { + color: $button-fg; + background: $button-bg; + font-weight: bold; + box-shadow: $boxshadow; + + &:hover, &:focus { + color: $button-fg; + } + } + + .copy-to-clipboard-button:hover { + background: $button-hover-bg; + } + } +} + +pre, pre[class*="language-"] { + border-radius: $br; + padding: 0.5rem; + white-space: pre; + overflow-x: auto; + + /* + Code inside a pre block, ie., + + ``` + here is some code + ``` + */ + code { + width: 100%; + padding: 0; + white-space: pre; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} diff --git a/web/source/css/components/status/header.css b/web/source/css/components/status/header.css new file mode 100644 index 000000000..1aeb38740 --- /dev/null +++ b/web/source/css/components/status/header.css @@ -0,0 +1,67 @@ +.status .status-header > address { + /* + Avoid stretching so wide that user + can't click on open thread link that's + behind the status header link. + */ + width: fit-content; + + > a { + padding: 0 0.75rem; + display: grid; + grid-template-columns: 3.5rem 1fr auto; + grid-template-rows: auto auto; + grid-template-areas: + "avatar author-strapline author-strapline" + "avatar author-strapline author-strapline"; + gap: 0 0.5rem; + font-style: normal; + + .avatar { + grid-area: avatar; + height: 3.5rem; + width: 3.5rem; + object-fit: cover; + + border: 0.15rem solid $avatar-border; + border-radius: $br; + overflow: hidden; /* hides corners from img overflowing */ + + img { + height: 100%; + width: 100%; + object-fit: cover; + background: $bg; + } + } + + .author-strapline { + grid-area: author-strapline; + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: auto; + grid-template-areas: + "display display" + "user user"; + gap: 0 0.5rem; + + .displayname, .username { + justify-self: start; + align-self: start; + max-width: 100%; + font-size: 1rem; + line-height: 1.3rem; + } + + .displayname { + grid-area: display; + font-weight: bold; + } + + .username { + grid-area: user; + color: $link-fg; + } + } + } +} \ No newline at end of file diff --git a/web/source/css/components/status/indent.css b/web/source/css/components/status/indent.css new file mode 100644 index 000000000..28ee6edf0 --- /dev/null +++ b/web/source/css/components/status/indent.css @@ -0,0 +1,43 @@ +.status { + &.indent-1 { + margin-left: 0.5rem; + } + + &.indent-2 { + margin-left: 1rem; + } + + &.indent-3 { + margin-left: 1.5rem; + } + + &.indent-4 { + margin-left: 2rem; + } + + &.indent-5 { + margin-left: 2.5rem; + } + + &.indent-1, + &.indent-2, + &.indent-3, + &.indent-4, + &.indent-5 { + .status-link { + margin-left: -0.5rem; + border-left: 0.15rem dashed $border-accent; + } + } + + border-radius: 0; + &:last-child { + border-bottom-left-radius: $br; + border-bottom-right-radius: $br; + + .status-info { + border-bottom-left-radius: $br; + border-bottom-right-radius: $br; + } + } +} \ No newline at end of file diff --git a/web/source/css/status.css b/web/source/css/components/status/status.css similarity index 76% rename from web/source/css/status.css rename to web/source/css/components/status/status.css index 97713dae2..51d8f0519 100644 --- a/web/source/css/status.css +++ b/web/source/css/components/status/status.css @@ -1,31 +1,7 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - @import "photoswipe/dist/photoswipe.css"; @import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css"; @import "plyr/dist/plyr.css"; -main { - background: transparent; - grid-auto-rows: auto; -} - .status { background: $status-bg; box-shadow: $boxshadow; @@ -41,74 +17,6 @@ main { text-decoration: none; } - .status-header > address { - /* - Avoid stretching so wide that user - can't click on open thread link that's - behind the status header link. - */ - width: fit-content; - - > a { - padding: 0 0.75rem; - display: grid; - grid-template-columns: 3.5rem 1fr auto; - grid-template-rows: auto auto; - grid-template-areas: - "avatar author-strap author-strap" - "avatar author-strap author-strap"; - gap: 0 0.5rem; - font-style: normal; - - .avatar { - grid-area: avatar; - height: 3.5rem; - width: 3.5rem; - object-fit: cover; - - border: 0.15rem solid $avatar-border; - border-radius: $br; - overflow: hidden; /* hides corners from img overflowing */ - - img { - height: 100%; - width: 100%; - object-fit: cover; - background: $bg; - } - } - - .author-strap { - grid-area: author-strap; - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: auto; - grid-template-areas: - "display display" - "user user"; - gap: 0 0.5rem; - - .displayname, .username { - justify-self: start; - align-self: start; - max-width: 100%; - font-size: 1rem; - line-height: 1.3rem; - } - - .displayname { - grid-area: display; - font-weight: bold; - } - - .username { - grid-area: user; - color: $link-fg; - } - } - } - } - .status-body { padding: 0.5rem 0.75rem; display: flex; diff --git a/web/source/css/components/utility.css b/web/source/css/components/utility.css new file mode 100644 index 000000000..d2d53e1ed --- /dev/null +++ b/web/source/css/components/utility.css @@ -0,0 +1,21 @@ +.hidden { + display: none; +} + +.nounderline { + text-decoration: none; +} + +.accent { + color: $acc1; +} + +.text-cutoff { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.wrap-text { + word-wrap: anywhere; +} \ No newline at end of file diff --git a/web/source/css/index.css b/web/source/css/index.css deleted file mode 100644 index 382cd68c6..000000000 --- a/web/source/css/index.css +++ /dev/null @@ -1,127 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -/* - Render instance title + image - a bit bigger on index page. - - Overrides the css from page.css. -*/ -.page-header { - & > a { - & > h1 { - font-size: 2rem; - line-height: 2rem; - } - - img, - picture { - align-self: center; - max-height: 6rem; - } - } -} - -/* - Reuse about styling, but rework it - to separate sections a bit more. -*/ -.about { - display: flex; - flex-direction: column; - gap: 2rem; - padding: 0; - - background: initial; - box-shadow: initial; - border: initial; - border-radius: initial; - - .about-section { - padding: 2rem; - background: $bg-accent; - box-shadow: $boxshadow; - border: $boxshadow-border; - border-radius: $br; - } -} - -.what-is-this .about-section-contents .activitypub-logo-wrapper { - display: flex; - flex-direction: column; - max-width: fit-content; - gap: 0.5rem; - - .activitypub-logo { - background: $fg; - box-shadow: $boxshadow; - border-radius: $br; - max-width: 100%; - } -} - -.apps { - align-self: start; - - .applist { - margin: 0; - padding: 0; - - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 0.5rem; - align-content: start; - - .applist-entry { - display: grid; - grid-template-columns: 25% 1fr; - grid-template-areas: "logo text"; - gap: 1.5rem; - padding: 0.5rem; - - .applist-logo { - grid-area: logo; - align-self: center; - justify-self: center; - width: 100%; - object-fit: contain; - flex: 1 1 auto; - } - - .applist-logo.redraw { - fill: $fg; - stroke: $fg; - } - - .applist-text { - grid-area: text; - - a { - font-weight: bold; - } - } - } - } -} - -@media screen and (max-width: 600px) { - .apps .applist { - grid-template-columns: 1fr; - } -} diff --git a/web/source/css/page.css b/web/source/css/layout/page.css similarity index 56% rename from web/source/css/page.css rename to web/source/css/layout/page.css index 642586048..b7b4567fa 100644 --- a/web/source/css/page.css +++ b/web/source/css/layout/page.css @@ -1,22 +1,3 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - .page { display: grid; min-height: 100vh; @@ -24,23 +5,24 @@ grid-template-columns: 1fr minmax(auto, 50rem) 1fr; grid-template-columns: 1fr min(92%, 50rem) 1fr; grid-template-rows: auto 1fr auto; + + &.wider { /* used on profile.tmpl, giving more space for it's own 2 column layout */ + grid-template-columns: 1fr minmax(auto, 60rem) 1fr; + grid-template-columns: 1fr min(92%, 65rem) 1fr; + } } .page-header, .page-footer { grid-column: 1 / span 3; } -.page-content { - grid-column: 2; - align-self: start; -} - .page-header { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; gap: 1rem; + margin: 0.5rem 0; a { display: flex; @@ -87,8 +69,75 @@ } } +.page-header.large { + margin: 2rem 0; + a { + img, picture { + max-height: 6rem; + } + + h1 { + font-size: 2rem; + line-height: 2rem; + } + } +} + +.page-content { + grid-column: 2; + align-self: start; +} + +.page.with-sidebar .page-content { + grid-column: 1 / span 2; + display: grid; + grid-template-columns: 1fr minmax(auto, 50rem); + grid-template-columns: 1fr min(92%, 50rem); + + .sidebar { + display: inline-block; + align-self: start; + justify-self: end; + position: sticky; + top: 0; + padding: 0 1.5rem; + + ol { + margin-top: 0; + } + + h2 { + margin-top: 1.5rem; + } + } +} + +@media screen and (max-width: 80rem) { + .page.with-sidebar .page-content { + grid-column: 2; + display: flex; + flex-direction: column; + background: $bg-accent; + box-shadow: $boxshadow; + border: $boxshadow-border; + border-radius: $br; + + .sidebar { + position: static; + } + + main.single-page { + background: initial; + box-shadow: initial; + border: initial; + border-radius: initial; + } + } +} + .page-footer { align-self: end; + margin-top: 3rem; nav ul { display: flex; @@ -115,4 +164,4 @@ .page-header { text-align: center; } -} +} \ No newline at end of file diff --git a/web/source/css/layout/sectioned.css b/web/source/css/layout/sectioned.css new file mode 100644 index 000000000..d80c73bd5 --- /dev/null +++ b/web/source/css/layout/sectioned.css @@ -0,0 +1,16 @@ +main.sectioned { + gap: 2rem; + + section { + padding: 1.5rem; + background: $bg-accent; + box-shadow: $boxshadow; + border: $boxshadow-border; + border-radius: $br; + } + + h1, h2, h3, h4, h5 { + margin-top: 0; + margin-bottom: 0.75rem; + } +} \ No newline at end of file diff --git a/web/source/css/layout/single-page.css b/web/source/css/layout/single-page.css new file mode 100644 index 000000000..db4b7a1f1 --- /dev/null +++ b/web/source/css/layout/single-page.css @@ -0,0 +1,14 @@ +main.single-page { + gap: 2rem; + + padding: 1.5rem; + + background: $bg-accent; + box-shadow: $boxshadow; + border: $boxshadow-border; + border-radius: $br; + + h2:first-child { + margin-top: 0; + } +} \ No newline at end of file diff --git a/web/source/css/layout/thread.css b/web/source/css/layout/thread.css new file mode 100644 index 000000000..f6e1bfae7 --- /dev/null +++ b/web/source/css/layout/thread.css @@ -0,0 +1,15 @@ +.thread, +.thread-wrapper { + display: flex; + flex-direction: column; + gap: 0.4rem; + + .col-header.replies.hidden-only { + /* + No visible replies below this column + header, so round off the bottom. + */ + border-bottom-left-radius: $br; + border-bottom-right-radius: $br; + } +} \ No newline at end of file diff --git a/web/source/css/pages/error.css b/web/source/css/pages/error.css new file mode 100644 index 000000000..c4a9c4a30 --- /dev/null +++ b/web/source/css/pages/error.css @@ -0,0 +1,17 @@ +/* + Error-only page, used by error.tmpl + TODO: unify colors with theming +*/ +section.error { + word-break: break-word; + margin-bottom: 0.5rem; + + pre { + border: 1px solid #ff000080; + padding: 0.5rem; + border-radius: 0.5em; + background-color: #ff000010; + font-size: 1.3em; + white-space: pre-wrap; + } +} diff --git a/web/source/css/pages/form.css b/web/source/css/pages/form.css new file mode 100644 index 000000000..392b97fc5 --- /dev/null +++ b/web/source/css/pages/form.css @@ -0,0 +1,50 @@ +/* + Page with form, used for sign-in/sign-up/authorization flows +*/ +section.with-form { + form { + display: flex; + flex-direction: column; + gap: 1rem; + + padding-bottom: 1rem; + padding-top: 1rem; + + p { + /* + We use gap so we don't + need top + bottom margins. + */ + margin-top: 0; + margin-bottom: 0; + } + + label, input { + padding-left: 0.2rem; + } + + .labelinput { + display: flex; + flex-direction: column; + gap: 0.4rem; + } + + .checkbox { + display: flex; + flex-direction: row-reverse; + gap: 0.4rem; + + & > input { + height: 100%; + width: 5%; + min-width: 1.2rem; + align-self: center; + } + } + + .btn { + /* Visually separate buttons a bit */ + margin-top: 1rem; + } + } +} diff --git a/web/source/css/pages/index.css b/web/source/css/pages/index.css new file mode 100644 index 000000000..ed02df014 --- /dev/null +++ b/web/source/css/pages/index.css @@ -0,0 +1,65 @@ +.index-page { + .activitypub-logo-wrapper { + display: flex; + flex-direction: column; + max-width: fit-content; + gap: 0.5rem; + + .activitypub-logo { + background: $fg; + box-shadow: $boxshadow; + border-radius: $br; + max-width: 100%; + } + } + + .apps { + align-self: start; + + .applist { + margin: 0; + padding: 0; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 0.5rem; + align-content: start; + + .applist-entry { + display: grid; + grid-template-columns: 25% 1fr; + grid-template-areas: "logo text"; + gap: 1.5rem; + padding: 0.5rem; + + .applist-logo { + grid-area: logo; + align-self: center; + justify-self: center; + width: 100%; + object-fit: contain; + flex: 1 1 auto; + } + + .applist-logo.redraw { + fill: $fg; + stroke: $fg; + } + + .applist-text { + grid-area: text; + + a { + font-weight: bold; + } + } + } + } + } + + @media screen and (max-width: 600px) { + .apps .applist { + grid-template-columns: 1fr; + } + } +} \ No newline at end of file diff --git a/web/source/css/pages/oob-token.css b/web/source/css/pages/oob-token.css new file mode 100644 index 000000000..00d88292b --- /dev/null +++ b/web/source/css/pages/oob-token.css @@ -0,0 +1,8 @@ +section.oob-token { + code { + background: $gray1; + padding: 0.5rem; + margin: 0; + border-radius: 0.3rem; + } +} \ No newline at end of file diff --git a/web/source/css/profile.css b/web/source/css/pages/profile.css similarity index 78% rename from web/source/css/profile.css rename to web/source/css/pages/profile.css index d9e9bc093..e9181eee3 100644 --- a/web/source/css/profile.css +++ b/web/source/css/pages/profile.css @@ -1,35 +1,102 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later +.profile { + .column-split { + display: flex; + flex-wrap: wrap; + gap: 1rem; + } - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. + .statuses-wrapper { + flex: 65 25rem; + display: flex; + flex-direction: column; + gap: 0.4rem; + min-width: 0%; + } - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. + .statuses { + display: flex; + flex-direction: column; + gap: 0.4rem; - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ + .rss-icon { + display: block; + margin: -0.25rem 0; + + .fa { + font-size: 2rem; + object-fit: contain; + vertical-align: middle; + color: $orange2; + /* + Can't size a single-color background, so we use + a linear-gradient that's effectively white. + */ + background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center; + background-size: 1.2rem 1.4rem; + } + } -.page { - /* - Profile page can be a little wider than default - page, since we're using a side-by-side column view. - */ - grid-template-columns: 1fr minmax(auto, 60rem) 1fr; - grid-template-columns: 1fr min(92%, 65rem) 1fr; -} + .backnextlinks { + display: flex; + justify-content: space-between; -.profile .column-split { - display: flex; - flex-wrap: wrap; - gap: 1rem; + .next { + margin-left: auto; + } + } + } + + .about-user { + flex: 35 14rem; + border-radius: $br; + overflow: hidden; + + .col-header { + margin-bottom: -0.25rem; + } + + dt { + font-weight: bold; + } + + .fields { + background: $profile-bg; + display: flex; + flex-direction: column; + padding: 0 0.5rem; + padding-top: 0.25rem; + + .field { + padding: 0.25rem; + display: flex; + flex-direction: column; + border-bottom: 0.1rem solid $gray2; + + > dt, > dd { + word-break: break-word; + } + + &:first-child { + border-top: 0.1rem solid $gray2; + } + } + } + + .bio { + background: $profile-bg; + padding: 1rem 0.75rem; + padding-bottom: 1.25rem; + } + + .accountstats { + background: $bg-accent; + padding: 0.75rem; + + display: grid; + grid-template-columns: auto 1fr; + gap: 0.25rem 1rem; + } + } } .profile .profile-header { @@ -361,4 +428,4 @@ grid-template-columns: auto 1fr; gap: 0.25rem 1rem; } -} \ No newline at end of file +} diff --git a/web/source/css/_colors.css b/web/source/css/themes/default.css similarity index 84% rename from web/source/css/_colors.css rename to web/source/css/themes/default.css index c050dfe40..014842767 100644 --- a/web/source/css/_colors.css +++ b/web/source/css/themes/default.css @@ -41,48 +41,42 @@ $gray8: #696a75; $orange1: #fd6a00; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/ $orange2: #ff853e; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */ +$blue0: #00336B; /* darkest blue, can be used for links in error alerts, on $error2 (6.00) */ $blue1: #3a9fde; /* darker blue for smaller elements (borders), can only be used with $gray1 (4.7) */ $blue2: #66befe; /* all-round accent color, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */ $blue3: #89caff; /* hover/selected accent to $blue2, can be used with $gray1 (7.9), $gray2 (6.3), $gray3 (5.6), $gray4 (5.2), $gray5 (4.7) */ +$blue4: #b3ddff; /* used as background for info alerts */ -$error1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */ -$error2: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */ -$error3: #dd2c2c; /* Error button background text, can be used with $white1 (4.51) */ -$error-link: #01318C; /* Error link text, can be used with $error2 (5.56) */ +$red1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */ +$red2: #dd2c2c; /* Error button background text, can be used with $white1 (4.51) */ +$red3: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */ $green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */ -$info-fg: $gray1; -$info-bg: #b3ddff; -$info-link: $error-link; +$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); +$boxshadow-border: 0.08rem solid $gray1; +/* Color variables as used in a specific location */ + +/* Base */ $fg: $white1; $bg: $gray1; -$bg-trans: rgba(77, 78, 86, 0.62); - $bg-accent: $gray5; $fg-accent: $blue3; $fg-reduced: $white2; $border-accent: $orange2; -/* Color variables as used in a specific location */ - $link-fg: $fg-accent; +/* Profile */ +$profile-bg: $gray4; +$avatar-border: $orange2; + $role-admin: $orange2; $role-mod: $blue2; -$profile-bg: $gray4; - -$button-bg: $blue2; -$button-fg: $gray1; -$button-hover-bg: $blue3; - -$button-danger-bg: $error3; -$button-danger-fg: $white1; -$button-danger-hover-bg: $error2; - +/* Status */ $status-bg: $gray3; $status-info-bg: $gray2; @@ -94,11 +88,7 @@ $no-img-desc-fg: $gray1; $bg-sensitive: $gray1; -$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); -$boxshadow-border: 0.08rem solid $gray1; - -$avatar-border: $orange2; - +/* Form inputs */ $input-bg: $gray4; $input-disabled-bg: $gray2; $input-border: $blue1; @@ -115,8 +105,23 @@ $settings-nav-bg-active: $blue3; $settings-nav-border-active: $info-bg; $settings-nav-fg-active: $gray2; -$error-fg: $error1; -$error-bg: $error2; +/* Buttons */ +$button-bg: $blue2; +$button-fg: $gray1; +$button-hover-bg: $blue3; + +$button-danger-bg: $error3; +$button-danger-fg: $white1; +$button-danger-hover-bg: $error2; + +/* Alerts */ +$info-fg: $gray1; +$info-bg: $blue4; +$info-link: $blue0; + +$error-fg: $red1; +$error-bg: $red3; +$error-link: $blue0; $list-entry-bg: $gray2; $list-entry-alternate-bg: $gray3; diff --git a/web/source/css/thread.css b/web/source/css/thread.css deleted file mode 100644 index c67c95d4e..000000000 --- a/web/source/css/thread.css +++ /dev/null @@ -1,99 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -.thread, -.thread-wrapper { - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -.thread { - /* - This column header might contain - quite some info, so let it wrap. - */ - .col-header { - display: flex; - flex-direction: row; - flex-wrap: wrap; - column-gap: 1rem; - row-gap: 0.5rem; - - box-shadow: $boxshadow; - border: $boxshadow-border; - - h2 { - margin-right: auto; - } - - &.replies.hidden-only { - /* - No visible replies below this column - header, so round off the bottom. - */ - border-bottom-left-radius: $br; - border-bottom-right-radius: $br; - } - } - - .status { - &.indent-1 { - margin-left: 0.5rem; - } - - &.indent-2 { - margin-left: 1rem; - } - - &.indent-3 { - margin-left: 1.5rem; - } - - &.indent-4 { - margin-left: 2rem; - } - - &.indent-5 { - margin-left: 2.5rem; - } - - &.indent-1, - &.indent-2, - &.indent-3, - &.indent-4, - &.indent-5 { - .status-link { - margin-left: -0.5rem; - border-left: 0.15rem dashed $border-accent; - } - } - - border-radius: 0; - &:last-child { - border-bottom-left-radius: $br; - border-bottom-right-radius: $br; - - .status-info { - border-bottom-left-radius: $br; - border-bottom-right-radius: $br; - } - } - } -} \ No newline at end of file diff --git a/web/source/css/prism.css b/web/source/css/vendor/prism.css similarity index 100% rename from web/source/css/prism.css rename to web/source/css/vendor/prism.css diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx index d2116e60d..4f6781d77 100644 --- a/web/source/settings/components/status.tsx +++ b/web/source/settings/components/status.tsx @@ -33,9 +33,9 @@ export function FakeStatus({ children }) {
- + -
+
Display name
{account.display_name.trim().length > 0 ? account.display_name : account.username} @@ -82,7 +82,7 @@ export function Status({ status }: { status: StatusType }) { function StatusHeader({ status }: { status: StatusType }) { const author = status.account; - + return (
@@ -99,7 +99,7 @@ function StatusHeader({ status }: { status: StatusType }) { alt={`Avatar for ${author.username}`} title={`Avatar for ${author.username}`} /> -
+
{author.display_name} , @{author.acct} @@ -130,7 +130,7 @@ function StatusBody({ status }: { status: StatusType }) { className="spoiler-text" lang={status.language} > - { status.spoiler_text + {status.spoiler_text ? status.spoiler_text + " " : "[no content warning set] " } @@ -146,7 +146,7 @@ function StatusBody({ status }: { status: StatusType }) {
@@ -170,7 +170,7 @@ function StatusMedia({ status }: { status: StatusType }) { role="group" aria-label={aria_label} > - { status.media_attachments.map((media) => { + {status.media_attachments.map((media) => { return ( Published
diff --git a/web/source/settings/style.css b/web/source/settings/style.css index ecfe5910a..78e57c0c7 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -916,7 +916,7 @@ button.tab-button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; - background: $blue1; + background: $blue2; &:hover { background: $button-hover-bg; diff --git a/web/template/about.tmpl b/web/template/about.tmpl index 37d115256..0d45d561d 100644 --- a/web/template/about.tmpl +++ b/web/template/about.tmpl @@ -42,7 +42,7 @@ {{- end }} {{- else }} -

No preferred languages have yet been set for this instance.

+

No preferred languages have yet been set for this instance.

{{- end }} {{- end -}} @@ -60,7 +60,8 @@ {{- end -}} {{- define "customCSSLimits" -}} -Custom CSS is  +Custom CSS is  {{- if .instance.Configuration.Accounts.AllowCustomCSS -}} enabled {{- else -}} @@ -82,43 +83,43 @@ Polls can have up to {{- end -}} {{- with . }} -
- -
-

About {{ .instance.Title -}}

-
+ +
+
+

About {{ .instance.Title -}}

+
{{- with . }} {{- include "description" . | indent 3 }} {{- end }}
-
-

Admin Contact

-
+
+

Admin Contact

+
-
-

Instance Features

-
+
+

Instance Features

+
  • {{- template "statusLimits" . -}}
  • {{- template "pollLimits" . -}}
    • @@ -141,34 +142,34 @@ Polls can have up to
-
-

Languages

-
+
+

Languages

+
{{- with . }} {{- include "languages" . | indent 3 }} {{- end }}
{{- include "index_register.tmpl" . | indent 1 }} -
-

Instance Rules

-
+
+

Instance Rules

+
{{- with . }} {{- include "rules" . | indent 3 }} {{- end }}
-
-

Terms and Conditions

-
+
+

Terms and Conditions

+
{{- with . }} {{- include "termsAndConditions" . | indent 3 }} {{- end }}
-
-

Moderated servers

-
+
+

Moderated servers

+

ActivityPub instances federate with other instances by exchanging data with them over the network. Exchanged data includes things like accounts, statuses, likes, boosts, and media attachments. @@ -176,8 +177,10 @@ Polls can have up to by an instance admin. When an instance is domain blocked by another instance:

    -
  • Any existing data from the blocked instance is deleted from the storage of the instance doing the blocking.
    • -
  • Interaction between the two instances is cut off in both directions; neither instance can interact with the other.
    • +
  • Any existing data from the blocked instance is deleted from the storage of the instance doing the + blocking.
    • +
  • Interaction between the two instances is cut off in both directions; neither instance can interact + with the other.
  • No new data from the blocked instance will be created on the instance that blocks it.

@@ -190,4 +193,4 @@ Polls can have up to

-{{- end }} +{{- end }} \ No newline at end of file diff --git a/web/template/email_new_report.tmpl b/web/template/email_new_report.tmpl index af98579c4..538d019a6 100644 --- a/web/template/email_new_report.tmpl +++ b/web/template/email_new_report.tmpl @@ -23,4 +23,4 @@ Hello moderator of {{ .InstanceName }} ({{ .InstanceURL }})! {{- else if .ReportTargetDomain }}Someone from your instance has reported a user from {{ .ReportTargetDomain }}. {{- else }}Someone from your instance has reported another user from your instance.{{ end }} -To view the report, paste the following link into your browser: {{ .ReportURL }} +To view the report, paste the following link into your browser: {{ .ReportURL }} \ No newline at end of file diff --git a/web/template/finalize.tmpl b/web/template/finalize.tmpl index 861dc635f..383eb72d4 100644 --- a/web/template/finalize.tmpl +++ b/web/template/finalize.tmpl @@ -31,19 +31,14 @@

- + value="{{- .preferredUsername -}}">
diff --git a/web/template/index.tmpl b/web/template/index.tmpl index 358bc081e..420ad4a8e 100644 --- a/web/template/index.tmpl +++ b/web/template/index.tmpl @@ -26,10 +26,10 @@ {{- end -}} {{- with . }} -
-
-

About this instance

-
+
+
+

About this instance

+
{{- include "shortDescription" . | indent 3 }} See more details
diff --git a/web/template/index_apps.tmpl b/web/template/index_apps.tmpl index 19a474692..8580b3983 100644 --- a/web/template/index_apps.tmpl +++ b/web/template/index_apps.tmpl @@ -18,11 +18,11 @@ */ -}} {{- with . }} -
-

Client applications

-
+
+

Client applications

+

- Have an account on this instance and want to log in? + Have an account on this instance and want to log in? GoToSocial does not provide its own webclient, but implements the Mastodon client API. You can use a variety of clients to log in to your account here:

@@ -30,87 +30,51 @@

  • Semaphore is a web client designed for speed and simplicity.

    - + Use Semaphore
    -

  • Tusky is a lightweight mobile client for Android.

    - + Get Tusky
    - + title="The Tusky mascot, a cartoon elephant tooting happily" width="100" height="100" />

  • Feditext (beta) is a beautiful client for iOS, iPadOS and macOS.

    - + Get Feditext
    - + title="The Feditext logo, the characters 'ft' at a slight angle" width="100" height="100" />

  • Or try one of the Mastodon clients listed on the official Mastodon page.

    - + Get Mastodon apps
    - + title="The Mastodon logo, the character 'M' in a speech bubble" width="100" height="100" />
    • diff --git a/web/template/index_register.tmpl b/web/template/index_register.tmpl index 38a00f47b..e51da948d 100644 --- a/web/template/index_register.tmpl +++ b/web/template/index_register.tmpl @@ -20,19 +20,20 @@ {{- define "registrationLimits" -}} New account registration is currently  {{- if .instance.Registrations -}} - open. +open. {{- else -}} - closed. +closed. {{- end -}} {{- end -}} {{- with . }} -
    -

    Register an Account on {{ .instance.Title -}}

    -
    +
    +

    Register an Account on {{ .instance.Title -}}

    +

    {{- template "registrationLimits" . -}}

    {{- if .instance.Registrations }} -

    To register a new account, please first read the rules and terms.

    +

    To register a new account, please first read the rules and terms.

    Then, use the sign-up page to register an account.

    Manual admin approval is required for new accounts.

    {{- end }} diff --git a/web/template/index_what_is_this.tmpl b/web/template/index_what_is_this.tmpl index 32ca6ed2f..15a17aab2 100644 --- a/web/template/index_what_is_this.tmpl +++ b/web/template/index_what_is_this.tmpl @@ -18,34 +18,24 @@ */ -}} {{- with . }} -
    -

    What is this?

    -
    +
    +

    What is this?

    +

    The web page you're reading right now is served by an instance of GoToSocial, a federated, distributed, open-source microblogging software which connects to other instances across a network known as the "fediverse".

    -

    What is an "instance"?

    +

    What is an "instance"?

    "Instance" is a term commonly used for one node in the fediverse. Each instance has its own web address, user(s), culture, rules, and settings. Instances exchange data by "talking" to each other over the internet using a protocol called ActivityPub.

    - - + + Learn more about ActivityPub (opens in a new tab).

    @@ -55,7 +45,7 @@

    There are thousands of fediverse instances, connecting millions of people together.

    -

    How do I join the fediverse?

    +

    How do I join the fediverse?

    You can join the fediverse by running your own instance of an ActivityPub software, or by finding an existing instance that aligns with your values and expectations, @@ -65,8 +55,10 @@ To help you find an instance that suits you, you can try one of the following tools:

    {{- if .instance.Registrations }}

    Or, just register for an account on this instance!

    diff --git a/web/template/page.tmpl b/web/template/page.tmpl index d2edc5277..0bf33addd 100644 --- a/web/template/page.tmpl +++ b/web/template/page.tmpl @@ -22,7 +22,7 @@ If some if/else macro is used multiple times, declare it once here instead. When invoking these nested templates, remember to pass in the values passed to the executing template, ie., use '{{ template "example" . }}' not - '{{ template "example" }}', otherwise you'll end up with empty variables. +'{{ template "example" }}', otherwise you'll end up with empty variables. */ -}} {{- define "thumbnailType" -}} @@ -43,43 +43,47 @@ image/webp - - - - - - {{- if .ogMeta }} - {{- include "page_ogmeta.tmpl" . | indent 2 }} - {{- else }} - {{- end }} - {{- if .rssFeed }} - - {{- else }} - {{- end }} - {{- if .account }} - - {{- else if .status }} - - {{- else }} - {{- end }} - - - - {{- include "page_stylesheets.tmpl" . | indent 2 }} - {{- range .javascript }} - - {{- end }} - {{- template "instanceTitle" . -}} - - -
    - {{- include "page_header.tmpl" . | indent 3 }} -
    -
    - {{- include .pageContent . | indent 3 | outdentPre }} -
    -
    - {{- include "page_footer.tmpl" . | indent 3 }} -
    - + + + + + + + {{- if .ogMeta }} + {{- include "page_ogmeta.tmpl" . | indent 2 }} + {{- else }} + {{- end }} + {{- if .rssFeed }} + + {{- else }} + {{- end }} + {{- if .account }} + + {{- else if .status }} + + {{- else }} + {{- end }} + + + + {{- include "page_stylesheets.tmpl" . | indent 2 }} + {{- range .javascript }} + + {{- end }} + {{- template "instanceTitle" . -}} + + + +
    + {{- include "page_header.tmpl" . | indent 3 }} +
    +
    + {{- include .pageContent . | indent 3 | outdentPre }} +
    +
    + {{- include "page_footer.tmpl" . | indent 3 }} +
    + + \ No newline at end of file diff --git a/web/template/page_footer.tmpl b/web/template/page_footer.tmpl index a00f4dfde..c4ef8a99d 100644 --- a/web/template/page_footer.tmpl +++ b/web/template/page_footer.tmpl @@ -21,43 +21,29 @@
    -
    +

    {{- template "repliesSummary" . -}}

    back to top
    -{{- end }} -{{- end -}} - -{{- with . }} -
    -
    -
    -

    {{- template "threadSummary" . -}}

    - {{- if .context.ThreadRepliesShown }} - jump to replies - {{- end }} -
    - - {{- range $status := .context.Statuses }} -
    - {{- include "status.tmpl" $status | indent 3 }} -
    - {{- if and $status.ThreadLastMain $.context.ThreadReplies }} - {{- include "repliesStart" $ | indent 1 }} - {{- end }} - {{- end }} - - {{- if .context.ThreadReplies }} -
    {{- end }} -
    -{{- end }} \ No newline at end of file + {{- end -}} + + {{- with . }} +
    +
    +
    +

    {{- template "threadSummary" . -}}

    + {{- if .context.ThreadRepliesShown }} + jump to replies + {{- end }} +
    + + {{- range $status := .context.Statuses }} +
    + {{- include "status.tmpl" $status | indent 3 }} +
    + {{- if and $status.ThreadLastMain $.context.ThreadReplies }} + {{- include "repliesStart" $ | indent 1 }} + {{- end }} + {{- end }} + + {{- if .context.ThreadReplies }} +
    + {{- end }} +
    + {{- end }} \ No newline at end of file