mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-12-24 11:12:11 +00:00
refactor/split css, templates
This commit is contained in:
f0x
parent
6aa580a470
commit
70342681c1
|
|
@ -59,6 +59,7 @@ func (m *Module) aboutGETHandler(c *gin.Context) {
|
|||
"showStrap": true,
|
||||
"blocklistExposed": config.GetInstanceExposeSuspendedWeb(),
|
||||
"languages": config.GetInstanceLanguages().DisplayStrs(),
|
||||
"pageType": "with-sidebar",
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/***************************************
|
||||
***** 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,11 +15,4 @@
|
|||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.thread {
|
||||
#tag-name {
|
||||
/* Ensure ridiculous length tags get wrapped */
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
*/
|
||||
1
web/source/css/base/_normalize.css
Normal file
1
web/source/css/base/_normalize.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "modern-normalize/modern-normalize.css";
|
||||
19
web/source/css/base/fonts.css
Normal file
19
web/source/css/base/fonts.css
Normal file
|
|
@ -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');
|
||||
}
|
||||
69
web/source/css/base/main.css
Normal file
69
web/source/css/base/main.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
33
web/source/css/components/account-card.css
Normal file
33
web/source/css/components/account-card.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
44
web/source/css/components/column-header.css
Normal file
44
web/source/css/components/column-header.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
web/source/css/components/emoji.css
Normal file
23
web/source/css/components/emoji.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
web/source/css/components/forms.css
Normal file
68
web/source/css/components/forms.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
71
web/source/css/components/html-elements.css
Normal file
71
web/source/css/components/html-elements.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
128
web/source/css/components/lists.css
Normal file
128
web/source/css/components/lists.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
51
web/source/css/components/prism.css
Normal file
51
web/source/css/components/prism.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
67
web/source/css/components/status/header.css
Normal file
67
web/source/css/components/status/header.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
web/source/css/components/status/indent.css
Normal file
43
web/source/css/components/status/indent.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@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;
|
||||
21
web/source/css/components/utility.css
Normal file
21
web/source/css/components/utility.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
web/source/css/layout/sectioned.css
Normal file
16
web/source/css/layout/sectioned.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
14
web/source/css/layout/single-page.css
Normal file
14
web/source/css/layout/single-page.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
15
web/source/css/layout/thread.css
Normal file
15
web/source/css/layout/thread.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
17
web/source/css/pages/error.css
Normal file
17
web/source/css/pages/error.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
50
web/source/css/pages/form.css
Normal file
50
web/source/css/pages/form.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
65
web/source/css/pages/index.css
Normal file
65
web/source/css/pages/index.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
web/source/css/pages/oob-token.css
Normal file
8
web/source/css/pages/oob-token.css
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
section.oob-token {
|
||||
code {
|
||||
background: $gray1;
|
||||
padding: 0.5rem;
|
||||
margin: 0;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,9 +33,9 @@ export function FakeStatus({ children }) {
|
|||
<article className="status expanded">
|
||||
<header className="status-header">
|
||||
<address>
|
||||
<a style={{margin: 0}}>
|
||||
<a style={{ margin: 0 }}>
|
||||
<img className="avatar" src={account.avatar} alt="" />
|
||||
<dl className="author-strap">
|
||||
<dl className="author-strapline">
|
||||
<dt className="sr-only">Display name</dt>
|
||||
<dd className="displayname text-cutoff">
|
||||
{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 (
|
||||
<header className="status-header">
|
||||
<address>
|
||||
|
|
@ -99,7 +99,7 @@ function StatusHeader({ status }: { status: StatusType }) {
|
|||
alt={`Avatar for ${author.username}`}
|
||||
title={`Avatar for ${author.username}`}
|
||||
/>
|
||||
<div className="author-strap">
|
||||
<div className="author-strapline">
|
||||
<span className="displayname text-cutoff">{author.display_name}</span>
|
||||
<span className="sr-only">,</span>
|
||||
<span className="username text-cutoff">@{author.acct}</span>
|
||||
|
|
@ -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 }) {
|
|||
</summary>
|
||||
<div
|
||||
className="text"
|
||||
dangerouslySetInnerHTML={{__html: content}}
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
</details>
|
||||
<StatusMedia status={status} />
|
||||
|
|
@ -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 (
|
||||
<StatusMediaEntry
|
||||
key={media.id}
|
||||
|
|
@ -227,7 +227,7 @@ function StatusFooter({ status }: { status: StatusType }) {
|
|||
<dt className="sr-only">Published</dt>
|
||||
<dd>
|
||||
<time dateTime={status.created_at}>
|
||||
{ new Date(status.created_at).toLocaleString() }
|
||||
{new Date(status.created_at).toLocaleString()}
|
||||
</time>
|
||||
</dd>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
{{- end }}
|
||||
</ol>
|
||||
{{- else }}
|
||||
<p>No preferred languages have yet been set for this instance.</p>
|
||||
<p>No preferred languages have yet been set for this instance.</p>
|
||||
{{- end }}
|
||||
{{- end -}}
|
||||
|
||||
|
|
@ -60,7 +60,8 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- define "customCSSLimits" -}}
|
||||
<a href="https://docs.gotosocial.org/en/latest/user_guide/settings/#custom-css" target="_blank" rel="noopener noreferrer">Custom CSS</a> is
|
||||
<a href="https://docs.gotosocial.org/en/latest/user_guide/settings/#custom-css" target="_blank"
|
||||
rel="noopener noreferrer">Custom CSS</a> is
|
||||
{{- if .instance.Configuration.Accounts.AllowCustomCSS -}}
|
||||
<b>enabled</b>
|
||||
{{- else -}}
|
||||
|
|
@ -82,43 +83,43 @@ Polls can have up to
|
|||
{{- end -}}
|
||||
|
||||
{{- with . }}
|
||||
<main class="about">
|
||||
<nav class="about-section" aria-labelledby="toc">
|
||||
<h3 id="toc">Table of Contents</h3>
|
||||
<div class="about-section-contents">
|
||||
<ol>
|
||||
<li><a href="#about">About {{ .instance.Title -}}</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#languages">Languages</a></li>
|
||||
<li><a href="#signup">Register an Account on {{ .instance.Title -}}</a></li>
|
||||
<li><a href="#rules">Rules</a></li>
|
||||
<li><a href="#terms">Terms and Conditions</a></li>
|
||||
<li><a href="#moderated-servers">Moderated Servers</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="about-section" role="region" aria-labelledby="about">
|
||||
<h3 id="about">About {{ .instance.Title -}}</h3>
|
||||
<div class="about-section-contents">
|
||||
<nav class="sidebar" aria-labelledby="toc">
|
||||
<h2 id="toc">Table of Contents</h2>
|
||||
<div>
|
||||
<ol>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#languages">Languages</a></li>
|
||||
<li><a href="#signup">Register an Account</a></li>
|
||||
<li><a href="#rules">Rules</a></li>
|
||||
<li><a href="#terms">Terms and Conditions</a></li>
|
||||
<li><a href="#moderated-servers">Moderated Servers</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="single-page">
|
||||
<section role="region" aria-labelledby="about">
|
||||
<h2 id="about">About {{ .instance.Title -}}</h2>
|
||||
<div>
|
||||
{{- with . }}
|
||||
{{- include "description" . | indent 3 }}
|
||||
{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
<section class="about-section" role="region" aria-labelledby="contact">
|
||||
<h3 id="contact">Admin Contact</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" aria-labelledby="contact">
|
||||
<h2 id="contact">Admin Contact</h2>
|
||||
<div>
|
||||
{{- if .instance.ContactAccount }}
|
||||
<a href="{{- .instance.ContactAccount.URL -}}" class="account-card">
|
||||
<img class="avatar" src="{{- .instance.ContactAccount.Avatar -}}" alt=""/>
|
||||
<h3>
|
||||
<img class="avatar" src="{{- .instance.ContactAccount.Avatar -}}" alt="" />
|
||||
<b>
|
||||
{{- if .instance.ContactAccount.DisplayName -}}
|
||||
{{- emojify .instance.ContactAccount.Emojis (escape .instance.ContactAccount.DisplayName) -}}
|
||||
{{- else -}}
|
||||
{{- .instance.ContactAccount.Username -}}
|
||||
{{- end -}}
|
||||
</h3>
|
||||
</b>
|
||||
<span>@{{- .instance.ContactAccount.Username -}}</span>
|
||||
</a>
|
||||
{{- else }}
|
||||
|
|
@ -131,9 +132,9 @@ Polls can have up to
|
|||
{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
<section class="about-section" role="region" aria-labelledby="features">
|
||||
<h3 id="features">Instance Features</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" aria-labelledby="features">
|
||||
<h2 id="features">Instance Features</h2>
|
||||
<div>
|
||||
<ul>
|
||||
<li>{{- template "statusLimits" . -}}</li>
|
||||
<li>{{- template "pollLimits" . -}}</li>
|
||||
|
|
@ -141,34 +142,34 @@ Polls can have up to
|
|||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about-section" role="region" aria-labelledby="languages">
|
||||
<h3 id="languages">Languages</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" aria-labelledby="languages">
|
||||
<h2 id="languages">Languages</h2>
|
||||
<div>
|
||||
{{- with . }}
|
||||
{{- include "languages" . | indent 3 }}
|
||||
{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
{{- include "index_register.tmpl" . | indent 1 }}
|
||||
<section class="about-section" role="region" aria-labelledby="rules">
|
||||
<h3 id="rules">Instance Rules</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" aria-labelledby="rules">
|
||||
<h2 id="rules">Instance Rules</h2>
|
||||
<div>
|
||||
{{- with . }}
|
||||
{{- include "rules" . | indent 3 }}
|
||||
{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
<section class="about-section" role="region" aria-labelledby="terms">
|
||||
<h3 id="terms">Terms and Conditions</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" aria-labelledby="terms">
|
||||
<h2 id="terms">Terms and Conditions</h2>
|
||||
<div>
|
||||
{{- with . }}
|
||||
{{- include "termsAndConditions" . | indent 3 }}
|
||||
{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
<section class="about-section" role="region" aria-labelledby="moderated-servers">
|
||||
<h3 id="moderated-servers">Moderated servers</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" aria-labelledby="moderated-servers">
|
||||
<h2 id="moderated-servers">Moderated servers</h2>
|
||||
<div>
|
||||
<p>
|
||||
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:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Any existing data from the blocked instance is deleted from the storage of the instance doing the blocking.</li>
|
||||
<li>Interaction between the two instances is cut off in both directions; neither instance can interact with the other.</li>
|
||||
<li>Any existing data from the blocked instance is deleted from the storage of the instance doing the
|
||||
blocking.</li>
|
||||
<li>Interaction between the two instances is cut off in both directions; neither instance can interact
|
||||
with the other.</li>
|
||||
<li>No new data from the blocked instance will be created on the instance that blocks it.</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
|
@ -190,4 +193,4 @@ Polls can have up to
|
|||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -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 }}
|
||||
|
|
@ -31,19 +31,14 @@
|
|||
</p>
|
||||
<div class="labelinput">
|
||||
<label for="username">
|
||||
Username (lowercase a-z, numbers, and underscores; max 64 characters).<br/>
|
||||
<small>Your username will be part of your fediverse handle, and cannot be changed later, so choose thoughtfully!</small>
|
||||
Username (lowercase a-z, numbers, and underscores; max 64 characters).<br />
|
||||
<small>Your username will be part of your fediverse handle, and cannot be changed later, so choose
|
||||
thoughtfully!</small>
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
name="username"
|
||||
required
|
||||
placeholder="Please enter your desired username"
|
||||
pattern="^[a-z0-9_]{1,64}$"
|
||||
<input id="username" type="text" name="username" required
|
||||
placeholder="Please enter your desired username" pattern="^[a-z0-9_]{1,64}$"
|
||||
title="lowercase a-z, numbers, and underscores; max 64 characters"
|
||||
value="{{- .preferredUsername -}}"
|
||||
>
|
||||
value="{{- .preferredUsername -}}">
|
||||
</div>
|
||||
<input type="hidden" name="name" value="{{- .name -}}">
|
||||
<button type="submit" class="btn btn-success">Submit</button>
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- with . }}
|
||||
<main class="about">
|
||||
<section class="about-section" role="region" aria-labelledby="about">
|
||||
<h3 id="about">About this instance</h3>
|
||||
<div class="about-section-contents">
|
||||
<main class="index-page sectioned">
|
||||
<section role="region" aria-labelledby="about">
|
||||
<h2 id="about">About this instance</h2>
|
||||
<div>
|
||||
{{- include "shortDescription" . | indent 3 }}
|
||||
<a href="/about">See more details</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
*/ -}}
|
||||
|
||||
{{- with . }}
|
||||
<section role="region" class="about-section apps" aria-labelledby="apps">
|
||||
<h3 id="apps">Client applications</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" class="apps" aria-labelledby="apps">
|
||||
<h2 id="apps">Client applications</h2>
|
||||
<div>
|
||||
<p>
|
||||
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:
|
||||
</p>
|
||||
|
|
@ -30,87 +30,51 @@
|
|||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<p><strong>Semaphore</strong> is a web client designed for speed and simplicity.</p>
|
||||
<a
|
||||
href="https://semaphore.social/"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a href="https://semaphore.social/" rel="nofollow noreferrer noopener" target="_blank">
|
||||
Use Semaphore
|
||||
</a>
|
||||
</div>
|
||||
<svg
|
||||
role="img"
|
||||
aria-labelledby="semaphore-title semaphore-desc"
|
||||
class="applist-logo redraw"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 146 120"
|
||||
width="100"
|
||||
height="100"
|
||||
>
|
||||
<svg role="img" aria-labelledby="semaphore-title semaphore-desc" class="applist-logo redraw"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146 120" width="100" height="100">
|
||||
<title id="semaphore-title">The Semaphore logo</title>
|
||||
<desc id="semaphore-desc">A waving flag</desc>
|
||||
<path d="M68.13 0C53.94 0 42.81 20 13.9 27.1l-2.23-5.29a6.5 6.5 0 0 0-5.17-10.4 6.5 6.5 0 0 0-.81 12.95L46.2 120l5.99-2.5-14.42-33.33c22.8-6.86 32.51-22.16 49.83-20.58 9.9.9 4.87 19.56 8.11 17.93 16.22-8.15 32.44-11.41 50.29-11.41-7.96-9.78-17.38-20.55-22.71-31.74L120.8 32c-2.32-7.33-2.56-14.75.87-22.22-9.74-3.26-21.1 0-32.45 4.9C82.2 9.77 79.5 0 68.13 0zM15.26 30.42c8.95 6.63 13.63 13.86 16.07 20.94l1.62 6.32c1.24 6.58 1.07 12.8 1.27 18.03z"></path>
|
||||
<path
|
||||
d="M68.13 0C53.94 0 42.81 20 13.9 27.1l-2.23-5.29a6.5 6.5 0 0 0-5.17-10.4 6.5 6.5 0 0 0-.81 12.95L46.2 120l5.99-2.5-14.42-33.33c22.8-6.86 32.51-22.16 49.83-20.58 9.9.9 4.87 19.56 8.11 17.93 16.22-8.15 32.44-11.41 50.29-11.41-7.96-9.78-17.38-20.55-22.71-31.74L120.8 32c-2.32-7.33-2.56-14.75.87-22.22-9.74-3.26-21.1 0-32.45 4.9C82.2 9.77 79.5 0 68.13 0zM15.26 30.42c8.95 6.63 13.63 13.86 16.07 20.94l1.62 6.32c1.24 6.58 1.07 12.8 1.27 18.03z">
|
||||
</path>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
|
||||
<a
|
||||
href="https://tusky.app"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a href="https://tusky.app" rel="nofollow noreferrer noopener" target="_blank">
|
||||
Get Tusky
|
||||
</a>
|
||||
</div>
|
||||
<img
|
||||
class="applist-logo"
|
||||
src="/assets/tusky.svg"
|
||||
<img class="applist-logo" src="/assets/tusky.svg"
|
||||
alt="The Tusky mascot, a cartoon elephant tooting happily"
|
||||
title="The Tusky mascot, a cartoon elephant tooting happily"
|
||||
width="100"
|
||||
height="100"
|
||||
/>
|
||||
title="The Tusky mascot, a cartoon elephant tooting happily" width="100" height="100" />
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<p><strong>Feditext</strong> (beta) is a beautiful client for iOS, iPadOS and macOS.</p>
|
||||
<a
|
||||
href="https://github.com/feditext/feditext"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a href="https://github.com/feditext/feditext" rel="nofollow noreferrer noopener" target="_blank">
|
||||
Get Feditext
|
||||
</a>
|
||||
</div>
|
||||
<img
|
||||
class="applist-logo"
|
||||
src="/assets/feditext.svg"
|
||||
<img class="applist-logo" src="/assets/feditext.svg"
|
||||
alt="The Feditext logo, the characters 'ft' at a slight angle"
|
||||
title="The Feditext logo, the characters 'ft' at a slight angle"
|
||||
width="100"
|
||||
height="100"
|
||||
/>
|
||||
title="The Feditext logo, the characters 'ft' at a slight angle" width="100" height="100" />
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<p>Or try one of the <strong>Mastodon clients</strong> listed on the official Mastodon page.</p>
|
||||
<a
|
||||
href="https://joinmastodon.org/apps"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a href="https://joinmastodon.org/apps" rel="nofollow noreferrer noopener" target="_blank">
|
||||
Get Mastodon apps
|
||||
</a>
|
||||
</div>
|
||||
<img
|
||||
class="applist-logo"
|
||||
src="/assets/mastodon.svg"
|
||||
<img class="applist-logo" src="/assets/mastodon.svg"
|
||||
alt="The Mastodon logo, the character 'M' in a speech bubble"
|
||||
title="The Mastodon logo, the character 'M' in a speech bubble"
|
||||
width="100"
|
||||
height="100"
|
||||
/>
|
||||
title="The Mastodon logo, the character 'M' in a speech bubble" width="100" height="100" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,19 +20,20 @@
|
|||
{{- define "registrationLimits" -}}
|
||||
New account registration is currently
|
||||
{{- if .instance.Registrations -}}
|
||||
<b>open</b>.
|
||||
<b>open</b>.
|
||||
{{- else -}}
|
||||
<b>closed</b>.
|
||||
<b>closed</b>.
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- with . }}
|
||||
<section class="about-section" role="region" aria-labelledby="signup">
|
||||
<h3 id="signup">Register an Account on {{ .instance.Title -}}</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" aria-labelledby="signup">
|
||||
<h2 id="signup">Register an Account on {{ .instance.Title -}}</h2>
|
||||
<div>
|
||||
<p>{{- template "registrationLimits" . -}}</p>
|
||||
{{- if .instance.Registrations }}
|
||||
<p>To register a new account, please first read the <a href="/about#rules">rules</a> and <a href="/about#terms">terms</a>.</p>
|
||||
<p>To register a new account, please first read the <a href="/about#rules">rules</a> and <a
|
||||
href="/about#terms">terms</a>.</p>
|
||||
<p>Then, use the <a href="/signup">sign-up page</a> to register an account.</p>
|
||||
<p>Manual admin approval is <b>required</b> for new accounts.</p>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -18,34 +18,24 @@
|
|||
*/ -}}
|
||||
|
||||
{{- with . }}
|
||||
<section role="region" class="about-section what-is-this" aria-labelledby="what-is-this">
|
||||
<h3 id="what-is-this">What is this?</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" class="what-is-this" aria-labelledby="what-is-this">
|
||||
<h2 id="what-is-this">What is this?</h2>
|
||||
<div>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<h4 id="what-is-an-instance">What is an "instance"?</h4>
|
||||
<h3 id="what-is-an-instance">What is an "instance"?</h3>
|
||||
<p>
|
||||
"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.
|
||||
</p>
|
||||
<a
|
||||
class="activitypub-logo-wrapper"
|
||||
href="https://activitypub.rocks/"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
class="activitypub-logo"
|
||||
src="/assets/activitypub_light.svg"
|
||||
alt="ActivityPub logo by mray, CC0 1.0"
|
||||
title="ActivityPub logo by mray, CC0 1.0"
|
||||
width="250"
|
||||
height="65"
|
||||
/>
|
||||
<a class="activitypub-logo-wrapper" href="https://activitypub.rocks/" rel="nofollow noreferrer noopener"
|
||||
target="_blank">
|
||||
<img class="activitypub-logo" src="/assets/activitypub_light.svg" alt="ActivityPub logo by mray, CC0 1.0"
|
||||
title="ActivityPub logo by mray, CC0 1.0" width="250" height="65" />
|
||||
Learn more about ActivityPub (opens in a new tab).
|
||||
</a>
|
||||
<p>
|
||||
|
|
@ -55,7 +45,7 @@
|
|||
<p>
|
||||
There are thousands of fediverse instances, connecting millions of people together.
|
||||
</p>
|
||||
<h4 id="how-do-i-join-the-fediverse">How do I join the fediverse?</h4>
|
||||
<h3 id="how-do-i-join-the-fediverse">How do I join the fediverse?</h3>
|
||||
<p>
|
||||
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:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="https://fediverse.observer" rel="nofollow noreferrer noopener" target="_blank">Fediverse Observer (opens in a new tab)</a></li>
|
||||
<li><a href="https://fedidb.org/network" rel="nofollow noreferrer noopener" target="_blank">FediDB (opens in a new tab)</a></li>
|
||||
<li><a href="https://fediverse.observer" rel="nofollow noreferrer noopener" target="_blank">Fediverse
|
||||
Observer (opens in a new tab)</a></li>
|
||||
<li><a href="https://fedidb.org/network" rel="nofollow noreferrer noopener" target="_blank">FediDB (opens in
|
||||
a new tab)</a></li>
|
||||
</ul>
|
||||
{{- if .instance.Registrations }}
|
||||
<p>Or, just <a href="signup">register for an account on this instance</a>!</p>
|
||||
|
|
|
|||
|
|
@ -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
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="{{- if .robotsMeta -}}{{- .robotsMeta -}}{{- else -}}noindex, nofollow{{- end -}}">
|
||||
{{- if .ogMeta }}
|
||||
{{- include "page_ogmeta.tmpl" . | indent 2 }}
|
||||
{{- else }}
|
||||
{{- end }}
|
||||
{{- if .rssFeed }}
|
||||
<link rel="alternate" type="application/rss+xml" href="{{- .rssFeed -}}" title="{{- template "instanceTitle" . -}}">
|
||||
{{- else }}
|
||||
{{- end }}
|
||||
{{- if .account }}
|
||||
<link rel="alternate" type="application/activity+json" href="/users/{{- .account.Username -}}">
|
||||
{{- else if .status }}
|
||||
<link rel="alternate" type="application/activity+json" href="/users/{{- .status.Account.Username -}}/statuses/{{- .status.ID -}}">
|
||||
{{- else }}
|
||||
{{- end }}
|
||||
<link rel="icon" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||
<link rel="apple-touch-icon" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||
<link rel="apple-touch-startup-image" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||
{{- include "page_stylesheets.tmpl" . | indent 2 }}
|
||||
{{- range .javascript }}
|
||||
<script type="text/javascript" src="{{- . -}}" async="" defer=""></script>
|
||||
{{- end }}
|
||||
<title>{{- template "instanceTitle" . -}}</title>
|
||||
</head>
|
||||
<body class="page">
|
||||
<header class="page-header">
|
||||
{{- include "page_header.tmpl" . | indent 3 }}
|
||||
</header>
|
||||
<div class="page-content">
|
||||
{{- include .pageContent . | indent 3 | outdentPre }}
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
{{- include "page_footer.tmpl" . | indent 3 }}
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="{{- if .robotsMeta -}}{{- .robotsMeta -}}{{- else -}}noindex, nofollow{{- end -}}">
|
||||
{{- if .ogMeta }}
|
||||
{{- include "page_ogmeta.tmpl" . | indent 2 }}
|
||||
{{- else }}
|
||||
{{- end }}
|
||||
{{- if .rssFeed }}
|
||||
<link rel="alternate" type="application/rss+xml" href="{{- .rssFeed -}}" title="{{- template "instanceTitle" . -}}">
|
||||
{{- else }}
|
||||
{{- end }}
|
||||
{{- if .account }}
|
||||
<link rel="alternate" type="application/activity+json" href="/users/{{- .account.Username -}}">
|
||||
{{- else if .status }}
|
||||
<link rel="alternate" type="application/activity+json"
|
||||
href="/users/{{- .status.Account.Username -}}/statuses/{{- .status.ID -}}">
|
||||
{{- else }}
|
||||
{{- end }}
|
||||
<link rel="icon" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||
<link rel="apple-touch-icon" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||
<link rel="apple-touch-startup-image" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||
{{- include "page_stylesheets.tmpl" . | indent 2 }}
|
||||
{{- range .javascript }}
|
||||
<script type="text/javascript" src="{{- . -}}" async="" defer=""></script>
|
||||
{{- end }}
|
||||
<title>{{- template "instanceTitle" . -}}</title>
|
||||
</head>
|
||||
|
||||
<body class="page{{if .pageType}} {{.pageType}}{{end}}">
|
||||
<header class="page-header{{if .largeHeader}} large{{end}}">
|
||||
{{- include "page_header.tmpl" . | indent 3 }}
|
||||
</header>
|
||||
<div class="page-content">
|
||||
{{- include .pageContent . | indent 3 | outdentPre }}
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
{{- include "page_footer.tmpl" . | indent 3 }}
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -21,43 +21,29 @@
|
|||
<nav>
|
||||
<ul class="nodot">
|
||||
<li id="about">
|
||||
<a
|
||||
href="/about"
|
||||
class="nounderline"
|
||||
>
|
||||
<a href="/about" class="nounderline">
|
||||
About {{ .instance.Title }}
|
||||
</a>
|
||||
</li>
|
||||
<li id="version">
|
||||
<a
|
||||
href="https://github.com/superseriousbusiness/gotosocial"
|
||||
class="nounderline"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a href="https://github.com/superseriousbusiness/gotosocial" class="nounderline"
|
||||
rel="nofollow noreferrer noopener" target="_blank">
|
||||
<span aria-hidden="true">🦥</span>
|
||||
Source - GoToSocial {{ .instance.Version }}
|
||||
<span aria-hidden="true">🦥</span>
|
||||
</a>
|
||||
</li>
|
||||
{{- if .instance.ContactAccount }}
|
||||
{{- if .instance.ContactAccount }}
|
||||
<li id="contact">
|
||||
<a
|
||||
href="/@{{- .instance.ContactAccount.Username -}}"
|
||||
class="nounderline"
|
||||
>
|
||||
<a href="/@{{- .instance.ContactAccount.Username -}}" class="nounderline">
|
||||
Contact account - {{ .instance.ContactAccount.Username }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- if .instance.Email }}
|
||||
{{- if .instance.Email }}
|
||||
<li id="email">
|
||||
<a
|
||||
href="mailto:{{- .instance.Email -}}"
|
||||
class="nounderline"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a href="mailto:{{- .instance.Email -}}" class="nounderline" rel="nofollow noreferrer noopener"
|
||||
target="_blank">
|
||||
Email - {{ .instance.Email }}
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -27,31 +27,31 @@ Instance Logo
|
|||
|
||||
{{- define "strapUsers" -}}
|
||||
{{- with deref .instance.Stats.user_count -}}
|
||||
{{- if eq . 1 -}}
|
||||
<span class="count">{{- . -}}</span> user
|
||||
{{- else -}}
|
||||
<span class="count">{{- . -}}</span> users
|
||||
{{- end -}}
|
||||
{{- if eq . 1 -}}
|
||||
<span class="count">{{- . -}}</span> user
|
||||
{{- else -}}
|
||||
<span class="count">{{- . -}}</span> users
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "strapPosts" -}}
|
||||
{{- with deref .instance.Stats.status_count -}}
|
||||
{{- if eq . 1 -}}
|
||||
<span class="count">{{- . -}}</span> post
|
||||
{{- else -}}
|
||||
<span class="count">{{- . -}}</span> posts
|
||||
{{- end -}}
|
||||
{{- if eq . 1 -}}
|
||||
<span class="count">{{- . -}}</span> post
|
||||
{{- else -}}
|
||||
<span class="count">{{- . -}}</span> posts
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "strapInstances" -}}
|
||||
{{- with deref .instance.Stats.domain_count -}}
|
||||
{{- if eq . 1 -}}
|
||||
<span class="count">{{- . -}}</span> other instance
|
||||
{{- else -}}
|
||||
<span class="count">{{- . -}}</span> other instances
|
||||
{{- end -}}
|
||||
{{- if eq . 1 -}}
|
||||
<span class="count">{{- . -}}</span> other instance
|
||||
{{- else -}}
|
||||
<span class="count">{{- . -}}</span> other instances
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
|
@ -59,21 +59,16 @@ Instance Logo
|
|||
<a aria-label="{{- .instance.Title -}}. Go to instance homepage" href="/" class="nounderline">
|
||||
<picture>
|
||||
{{- if .instance.ThumbnailStatic }}
|
||||
<source
|
||||
srcset="{{- .instance.ThumbnailStatic -}}"
|
||||
type="{{- .instance.ThumbnailStaticType -}}"
|
||||
media="(prefers-reduced-motion: reduce)"
|
||||
/>
|
||||
<source srcset="{{- .instance.ThumbnailStatic -}}" type="{{- .instance.ThumbnailStaticType -}}"
|
||||
media="(prefers-reduced-motion: reduce)" />
|
||||
{{- end }}
|
||||
<img
|
||||
src="{{- .instance.Thumbnail -}}"
|
||||
alt="{{- template "thumbnailDescription" . -}}"
|
||||
title="{{- template "thumbnailDescription" . -}}"
|
||||
/>
|
||||
<img src="{{- .instance.Thumbnail -}}" alt="{{- template "thumbnailDescription" . -}}"
|
||||
title="{{- template "thumbnailDescription" . -}}" />
|
||||
</picture>
|
||||
<h1>{{- .instance.Title -}}</h1>
|
||||
</a>
|
||||
{{- if .showStrap }}
|
||||
<aside>home to {{ template "strapUsers" . }} who wrote {{ template "strapPosts" . }}, federating with {{ template "strapInstances" . }}</aside>
|
||||
<aside>home to {{ template "strapUsers" . }} who wrote {{ template "strapPosts" . }}, federating with
|
||||
{{ template "strapInstances" . }}</aside>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -27,70 +27,40 @@
|
|||
<form action="/signup" method="POST">
|
||||
<div class="labelinput">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="Email address"
|
||||
>
|
||||
<input id="email" type="email" name="email" required placeholder="Email address">
|
||||
</div>
|
||||
<div class="labelinput">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
placeholder="Please enter your desired password"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<input id="password" type="password" name="password" required
|
||||
placeholder="Please enter your desired password" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="labelinput">
|
||||
<label for="username">
|
||||
Username (lowercase a-z, numbers, and underscores; max 64 characters).<br/>
|
||||
<small>Your username will be part of your fediverse handle, and cannot be changed later, so choose thoughtfully!</small>
|
||||
Username (lowercase a-z, numbers, and underscores; max 64 characters).<br />
|
||||
<small>Your username will be part of your fediverse handle, and cannot be changed later, so choose
|
||||
thoughtfully!</small>
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
name="username"
|
||||
required
|
||||
placeholder="Please enter your desired username"
|
||||
pattern="^[a-z0-9_]{1,64}$"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
title="lowercase a-z, numbers, and underscores; max 64 characters"
|
||||
>
|
||||
<input id="username" type="text" name="username" required
|
||||
placeholder="Please enter your desired username" pattern="^[a-z0-9_]{1,64}$" autocapitalize="off"
|
||||
spellcheck="false" title="lowercase a-z, numbers, and underscores; max 64 characters">
|
||||
</div>
|
||||
{{- if .reasonRequired }}
|
||||
<div class="labelinput">
|
||||
<label for="reason">
|
||||
Reason you want to join {{ .instance.Title }} (40-500 characters).<br/>
|
||||
Reason you want to join {{ .instance.Title }} (40-500 characters).<br />
|
||||
<small>The admin(s) will use this text to decide whether or not to approve your sign-up.</small>
|
||||
</label>
|
||||
<textarea
|
||||
id="reason"
|
||||
name="reason"
|
||||
required
|
||||
<textarea id="reason" name="reason" required
|
||||
placeholder="Enter a few sentences about why you want to join this instance. If you know someone on the instance already, you may want to mention them here. You might want to link to any other accounts you have elsewhere too."
|
||||
rows="8"
|
||||
minlength="40"
|
||||
maxlength="500"
|
||||
autocapitalize="sentences"
|
||||
title="40-500 characters"
|
||||
></textarea>
|
||||
rows="8" minlength="40" maxlength="500" autocapitalize="sentences"
|
||||
title="40-500 characters"></textarea>
|
||||
</div>
|
||||
{{- end }}
|
||||
<div class="checkbox">
|
||||
<label for="agreement">I have read and accept the <a href="/about#terms">terms and conditions</a> of {{ .instance.Title }}, and I agree to abide by the <a href="/about#rules">instance rules</a>.</label>
|
||||
<input
|
||||
id="agreement"
|
||||
type="checkbox"
|
||||
name="agreement"
|
||||
required
|
||||
value="true"
|
||||
>
|
||||
<label for="agreement">I have read and accept the <a href="/about#terms">terms and conditions</a> of
|
||||
{{ .instance.Title }}, and I agree to abide by the <a href="/about#rules">instance
|
||||
rules</a>.</label>
|
||||
<input id="agreement" type="checkbox" name="agreement" required value="true">
|
||||
</div>
|
||||
<input type="hidden" name="locale" value="en">
|
||||
<button type="submit" class="btn btn-success">Submit</button>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<section aria-labelledby="signed-up">
|
||||
<h2 id="signed-up">Thanks for signing up to {{ .instance.Title -}}!</h2>
|
||||
<p>Hi <b>{{- .username -}}</b>!</p>
|
||||
<p>Your sign-up has been registered, and a confirmation email has been sent to <b>{{- .email -}}</b>.<p>
|
||||
<p>Your sign-up has been registered, and a confirmation email has been sent to <b>{{- .email -}}</b>.</p>
|
||||
<p>Please check your email inbox and click the link to confirm your email.</p>
|
||||
<p>Once an admin has approved your sign-up, you will be able to log in and use your account.</p>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@
|
|||
{{- if .SpoilerText }}
|
||||
<details class="text-spoiler">
|
||||
<summary>
|
||||
<span class="spoiler-text" lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span>
|
||||
<span class="spoiler-text"
|
||||
lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span>
|
||||
<span class="button" role="button" tabindex="0">Toggle visibility</span>
|
||||
</summary>
|
||||
<div class="text">
|
||||
|
|
@ -64,26 +65,16 @@
|
|||
{{- include "status_attachments.tmpl" . | indent 1 }}
|
||||
{{- end }}
|
||||
</div>
|
||||
<aside class="status-info" aria-hidden="true">
|
||||
<aside class="status-info">
|
||||
{{- include "status_info.tmpl" . | indent 1 }}
|
||||
</aside>
|
||||
{{- if .Local }}
|
||||
<a
|
||||
href="{{- .URL -}}"
|
||||
class="status-link"
|
||||
data-nosnippet
|
||||
title="Open thread at this post"
|
||||
>
|
||||
<a href="{{- .URL -}}" class="status-link" data-nosnippet title="Open thread at this post">
|
||||
Open thread at this post
|
||||
</a>
|
||||
{{- else }}
|
||||
<a
|
||||
href="{{- .URL -}}"
|
||||
class="status-link"
|
||||
data-nosnippet
|
||||
rel="nofollow noreferrer noopener" target="_blank"
|
||||
title="Open remote post (opens in a new window)"
|
||||
>
|
||||
<a href="{{- .URL -}}" class="status-link" data-nosnippet rel="nofollow noreferrer noopener" target="_blank"
|
||||
title="Open remote post (opens in a new window)">
|
||||
Open remote post (opens in a new window)
|
||||
</a>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -23,54 +23,23 @@
|
|||
*/ -}}
|
||||
|
||||
{{- define "imagePreview" }}
|
||||
<img
|
||||
src="{{- .PreviewURL -}}"
|
||||
loading="lazy"
|
||||
{{- if .Description }}
|
||||
alt="{{- .Description -}}"
|
||||
title="{{- .Description -}}"
|
||||
{{- end }}
|
||||
width="{{- .Meta.Original.Width -}}"
|
||||
height="{{- .Meta.Original.Height -}}"
|
||||
/>
|
||||
<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
|
||||
title="{{- .Description -}}" {{- end }} width="{{- .Meta.Original.Width -}}"
|
||||
height="{{- .Meta.Original.Height -}}" />
|
||||
{{- end }}
|
||||
|
||||
{{- define "videoPreview" }}
|
||||
<img
|
||||
src="{{- .PreviewURL -}}"
|
||||
loading="lazy"
|
||||
{{- if .Description }}
|
||||
alt="{{- .Description -}}"
|
||||
title="{{- .Description -}}"
|
||||
{{- end }}
|
||||
width="{{- .Meta.Small.Width -}}"
|
||||
height="{{- .Meta.Small.Height -}}"
|
||||
/>
|
||||
<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
|
||||
title="{{- .Description -}}" {{- end }} width="{{- .Meta.Small.Width -}}" height="{{- .Meta.Small.Height -}}" />
|
||||
{{- end }}
|
||||
|
||||
{{- define "audioPreview" }}
|
||||
{{- if and .PreviewURL .Meta.Small.Width }}
|
||||
<img
|
||||
src="{{- .PreviewURL -}}"
|
||||
loading="lazy"
|
||||
{{- if .Description }}
|
||||
alt="{{- .Description -}}"
|
||||
title="{{- .Description -}}"
|
||||
{{- end }}
|
||||
width="{{- .Meta.Small.Width -}}"
|
||||
height="{{- .Meta.Small.Height -}}"
|
||||
/>
|
||||
<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
|
||||
title="{{- .Description -}}" {{- end }} width="{{- .Meta.Small.Width -}}" height="{{- .Meta.Small.Height -}}" />
|
||||
{{- else }}
|
||||
<img
|
||||
src="/assets/logo.webp"
|
||||
loading="lazy"
|
||||
{{- if .Description }}
|
||||
alt="{{- .Description -}}"
|
||||
title="{{- .Description -}}"
|
||||
{{- end }}
|
||||
width="518"
|
||||
height="460"
|
||||
/>
|
||||
<img src="/assets/logo.webp" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
|
||||
title="{{- .Description -}}" {{- end }} width="518" height="460" />
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
|
|
@ -85,11 +54,7 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
|
|||
{{- end -}}
|
||||
|
||||
{{- with .MediaAttachments }}
|
||||
<div
|
||||
class="{{- template "galleryClass" . -}}"
|
||||
role="group"
|
||||
aria-label="{{- template "attachmentsLength" . -}}"
|
||||
>
|
||||
<div class="{{- template "galleryClass" . -}}" role="group" aria-label="{{- template "attachmentsLength" . -}}">
|
||||
{{- range $index, $media := . }}
|
||||
<div class="media-wrapper">
|
||||
<details class="{{- $media.Type -}}-spoiler media-spoiler" {{- if not $media.Sensitive }} open{{- end -}}>
|
||||
|
|
@ -139,48 +104,25 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
|
|||
{{- if and $media.PreviewURL $media.Meta.Small.Width }}
|
||||
poster="{{- .PreviewURL -}}"
|
||||
data-pswp-width="{{- $media.Meta.Small.Width -}}px"
|
||||
data-pswp-height="{{- $media.Meta.Small.Height -}}px"
|
||||
{{- else }}
|
||||
poster="/assets/logo.webp"
|
||||
width="518px"
|
||||
height="460px"
|
||||
{{- end }}
|
||||
{{- if .Description }}
|
||||
alt="{{- $media.Description -}}"
|
||||
title="{{- $media.Description -}}"
|
||||
{{- end }}
|
||||
>
|
||||
<source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}"/>
|
||||
data-pswp-height="{{- $media.Meta.Small.Height -}}px" {{- else }} poster="/assets/logo.webp"
|
||||
width="518px" height="460px" {{- end }} {{- if .Description }} alt="{{- $media.Description -}}"
|
||||
title="{{- $media.Description -}}" {{- end }}>
|
||||
<source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}" />
|
||||
</video>
|
||||
{{- else if eq .Type "image" }}
|
||||
<a
|
||||
class="photoswipe-slide"
|
||||
href="{{- $media.URL -}}"
|
||||
target="_blank"
|
||||
<a class="photoswipe-slide" href="{{- $media.URL -}}" target="_blank"
|
||||
data-pswp-width="{{- $media.Meta.Original.Width -}}px"
|
||||
data-pswp-height="{{- $media.Meta.Original.Height -}}px"
|
||||
data-cropped="true"
|
||||
{{- if .Description }}
|
||||
alt="{{- $media.Description -}}"
|
||||
title="{{- $media.Description -}}"
|
||||
{{- end }}
|
||||
>
|
||||
data-pswp-height="{{- $media.Meta.Original.Height -}}px" data-cropped="true" {{- if .Description }}
|
||||
alt="{{- $media.Description -}}" title="{{- $media.Description -}}" {{- end }}>
|
||||
{{- with $media }}
|
||||
{{- include "imagePreview" . | indent 4 }}
|
||||
{{- end }}
|
||||
</a>
|
||||
{{- else }}
|
||||
<a
|
||||
class="unknown-attachment"
|
||||
href="{{- $media.RemoteURL -}}"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank"
|
||||
{{- if .Description }}
|
||||
title="Open external media: {{ $media.Description -}} {{- $media.RemoteURL -}}"
|
||||
{{- else }}
|
||||
title="Open external media. {{- $media.RemoteURL -}}"
|
||||
{{- end }}
|
||||
>
|
||||
<a class="unknown-attachment" href="{{- $media.RemoteURL -}}" rel="nofollow noreferrer noopener"
|
||||
target="_blank" {{- if .Description }}
|
||||
title="Open external media: {{ $media.Description -}} {{- $media.RemoteURL -}}" {{- else }}
|
||||
title="Open external media. {{- $media.RemoteURL -}}" {{- end }}>
|
||||
<div class="placeholder" aria-hidden="true">
|
||||
<i class="placeholder-external-link fa fa-external-link"></i>
|
||||
<i class="placeholder-icon fa fa-file-text"></i>
|
||||
|
|
|
|||
|
|
@ -20,31 +20,31 @@
|
|||
{{- define "ariaLabel" -}}
|
||||
@{{ .Account.Acct -}}, {{ timestamp .CreatedAt -}}
|
||||
{{- if .LanguageTag -}}
|
||||
, language {{ .LanguageTag.DisplayStr -}}
|
||||
, language {{ .LanguageTag.DisplayStr -}}
|
||||
{{- end -}}
|
||||
{{- if .MediaAttachments -}}
|
||||
, has media
|
||||
, has media
|
||||
{{- end -}}
|
||||
{{- if .RepliesCount -}}
|
||||
{{- if eq .RepliesCount 1 -}}
|
||||
, 1 reply
|
||||
{{- else -}}
|
||||
, {{ .RepliesCount }} replies
|
||||
{{- end -}}
|
||||
{{- if eq .RepliesCount 1 -}}
|
||||
, 1 reply
|
||||
{{- else -}}
|
||||
, {{ .RepliesCount }} replies
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- if .FavouritesCount -}}
|
||||
{{- if eq .FavouritesCount 1 -}}
|
||||
, 1 favourite
|
||||
{{- else -}}
|
||||
, {{ .FavouritesCount }} favourites
|
||||
{{- end -}}
|
||||
{{- if eq .FavouritesCount 1 -}}
|
||||
, 1 favourite
|
||||
{{- else -}}
|
||||
, {{ .FavouritesCount }} favourites
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- if .ReblogsCount -}}
|
||||
{{- if eq .ReblogsCount 1 -}}
|
||||
, 1 boost
|
||||
{{- else -}}
|
||||
, {{ .ReblogsCount }} boosts
|
||||
{{- end -}}
|
||||
{{- if eq .ReblogsCount 1 -}}
|
||||
, 1 boost
|
||||
{{- else -}}
|
||||
, {{ .ReblogsCount }} boosts
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,47 +20,30 @@
|
|||
{{- with .Account }}
|
||||
<address>
|
||||
{{- if $.Local }}
|
||||
<a
|
||||
href="{{- .URL -}}"
|
||||
rel="author"
|
||||
title="Open profile"
|
||||
>
|
||||
{{- else }}
|
||||
<a
|
||||
href="{{- .URL -}}"
|
||||
rel="author nofollow noreferrer noopener" target="_blank"
|
||||
title="Open remote profile (opens in a new window)"
|
||||
>
|
||||
{{- end }}
|
||||
<picture
|
||||
class="avatar"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{{- if .AvatarAttachment }}
|
||||
<source
|
||||
srcset="{{- .AvatarStatic -}}"
|
||||
type="{{- .AvatarAttachment.PreviewMIMEType -}}"
|
||||
media="(prefers-reduced-motion: reduce)"
|
||||
/>
|
||||
<a href="{{- .URL -}}" rel="author" title="Open profile">
|
||||
{{- else }}
|
||||
<a href="{{- .URL -}}" rel="author nofollow noreferrer noopener" target="_blank"
|
||||
title="Open remote profile (opens in a new window)">
|
||||
{{- end }}
|
||||
<img
|
||||
src="{{- .Avatar -}}"
|
||||
alt="Avatar for {{ .Username -}}"
|
||||
title="Avatar for {{ .Username -}}"
|
||||
>
|
||||
</picture>
|
||||
<div class="author-strap">
|
||||
<span class="displayname text-cutoff">
|
||||
{{- if .DisplayName -}}
|
||||
{{- emojify .Emojis (escape .DisplayName) -}}
|
||||
{{- else -}}
|
||||
{{- .Username -}}
|
||||
{{- end -}}
|
||||
</span>
|
||||
<span class="sr-only">,</span>
|
||||
<span class="username text-cutoff">@{{- .Acct -}}</span>
|
||||
</div>
|
||||
<span class="sr-only">(open profile)</span>
|
||||
</a>
|
||||
<picture class="avatar" aria-hidden="true">
|
||||
{{- if .AvatarAttachment }}
|
||||
<source srcset="{{- .AvatarStatic -}}" type="{{- .AvatarAttachment.PreviewMIMEType -}}"
|
||||
media="(prefers-reduced-motion: reduce)" />
|
||||
{{- end }}
|
||||
<img src="{{- .Avatar -}}" alt="Avatar for {{ .Username -}}" title="Avatar for {{ .Username -}}">
|
||||
</picture>
|
||||
<div class="author-strapline">
|
||||
<span class="displayname text-cutoff">
|
||||
{{- if .DisplayName -}}
|
||||
{{- emojify .Emojis (escape .DisplayName) -}}
|
||||
{{- else -}}
|
||||
{{- .Username -}}
|
||||
{{- end -}}
|
||||
</span>
|
||||
<span class="sr-only">,</span>
|
||||
<span class="username text-cutoff">@{{- .Acct -}}</span>
|
||||
</div>
|
||||
<span class="sr-only">(open profile)</span>
|
||||
</a>
|
||||
</address>
|
||||
{{- end }}
|
||||
|
|
@ -23,11 +23,11 @@
|
|||
*/ -}}
|
||||
|
||||
{{- define "votes" -}}
|
||||
{{- if eq . 1 -}}
|
||||
{{- . -}} vote
|
||||
{{- else -}}
|
||||
{{- . }} votes
|
||||
{{- end -}}
|
||||
{{- if eq . 1 -}}
|
||||
{{- . -}} vote
|
||||
{{- else -}}
|
||||
{{- . }} votes
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- with . }}
|
||||
|
|
@ -51,14 +51,14 @@
|
|||
<span class="total-votes">
|
||||
{{- template "votes" .Poll.VotesCount -}}
|
||||
{{- if .Poll.Expired -}}
|
||||
total
|
||||
total
|
||||
{{- else -}}
|
||||
so far
|
||||
so far
|
||||
{{- end -}}
|
||||
</span>
|
||||
</figcaption>
|
||||
<ul class="poll-options nodot">
|
||||
{{- range $index, $pollOption := .PollOptions }}
|
||||
{{- range $index, $pollOption := .PollOptions }}
|
||||
<li class="poll-option">
|
||||
<span class="sr-only">Option {{ increment $index }},</span>
|
||||
<span lang="{{- .LanguageTag.TagStr -}}">{{ emojify .Emojis (noescape $pollOption.Title) }}</span>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
{{- end }}
|
||||
</div>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</ul>
|
||||
</figure>
|
||||
{{- end }}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
{{- with . }}
|
||||
<main>
|
||||
<h2 id="tag-name" tabindex="-1">#{{- .tagName -}}</h2>
|
||||
<h2 class="wrap-text" tabindex="-1">#{{- .tagName -}}</h2>
|
||||
<p>There's nothing here!</p>
|
||||
<p>
|
||||
For privacy reasons, GoToSocial doesn't (yet) implement public web views of tag timelines.
|
||||
|
|
|
|||
|
|
@ -18,81 +18,82 @@
|
|||
*/ -}}
|
||||
|
||||
{{- define "repliesSummary" -}}
|
||||
{{- if .context.ThreadRepliesShown -}}
|
||||
{{- if .context.ThreadRepliesHidden -}}
|
||||
{{- if eq .context.ThreadRepliesShown 1 -}}
|
||||
{{- /* Some replies are hidden. */ -}}
|
||||
{{ .context.ThreadRepliesShown }} visible reply
|
||||
{{- else if gt .context.ThreadRepliesShown 1 -}}
|
||||
{{ .context.ThreadRepliesShown }} visible replies
|
||||
{{- end -}}
|
||||
; {{ .context.ThreadRepliesHidden }} more {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }} hidden or not public
|
||||
{{- else -}}
|
||||
{{- /* No hidden replies. */ -}}
|
||||
{{- if eq .context.ThreadReplies 1 -}}
|
||||
{{ .context.ThreadReplies }} reply
|
||||
{{- else if gt .context.ThreadReplies 1 -}}
|
||||
{{ .context.ThreadReplies }} replies
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
{{- .context.ThreadRepliesHidden }} {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }} hidden or not public
|
||||
{{- end -}}
|
||||
{{- if .context.ThreadRepliesShown -}}
|
||||
{{- if .context.ThreadRepliesHidden -}}
|
||||
{{- if eq .context.ThreadRepliesShown 1 -}}
|
||||
{{- /* Some replies are hidden. */ -}}
|
||||
{{ .context.ThreadRepliesShown }} visible reply
|
||||
{{- else if gt .context.ThreadRepliesShown 1 -}}
|
||||
{{ .context.ThreadRepliesShown }} visible replies
|
||||
{{- end -}}
|
||||
; {{ .context.ThreadRepliesHidden }} more {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }}
|
||||
hidden or not public
|
||||
{{- else -}}
|
||||
{{- /* No hidden replies. */ -}}
|
||||
{{- if eq .context.ThreadReplies 1 -}}
|
||||
{{ .context.ThreadReplies }} reply
|
||||
{{- else if gt .context.ThreadReplies 1 -}}
|
||||
{{ .context.ThreadReplies }} replies
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
{{- .context.ThreadRepliesHidden }} {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }} hidden or
|
||||
not public
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "threadSummary" -}}
|
||||
{{- if .context.ThreadHidden -}}
|
||||
{{- if eq .context.ThreadShown 1 -}}
|
||||
Single visible post
|
||||
{{- else if gt .context.ThreadShown 1 -}}
|
||||
Thread of {{ .context.ThreadShown }} visible posts
|
||||
{{- end -}}
|
||||
; {{ .context.ThreadHidden }} more {{ if eq .context.ThreadHidden 1 }}post{{ else }}posts{{ end }} hidden or not public
|
||||
{{- else -}}
|
||||
{{- /* No hidden posts */ -}}
|
||||
{{- if eq .context.ThreadLength 1 -}}
|
||||
Single post
|
||||
{{- else if gt .context.ThreadLength 1 -}}
|
||||
Thread of {{ .context.ThreadLength }} posts
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- if .context.ThreadHidden -}}
|
||||
{{- if eq .context.ThreadShown 1 -}}
|
||||
Single visible post
|
||||
{{- else if gt .context.ThreadShown 1 -}}
|
||||
Thread of {{ .context.ThreadShown }} visible posts
|
||||
{{- end -}}
|
||||
; {{ .context.ThreadHidden }} more {{ if eq .context.ThreadHidden 1 }}post{{ else }}posts{{ end }} hidden or not public
|
||||
{{- else -}}
|
||||
{{- /* No hidden posts */ -}}
|
||||
{{- if eq .context.ThreadLength 1 -}}
|
||||
Single post
|
||||
{{- else if gt .context.ThreadLength 1 -}}
|
||||
Thread of {{ .context.ThreadLength }} posts
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "repliesStart" -}}
|
||||
{{- with . }}
|
||||
</section>
|
||||
<section class="thread thread-replies" aria-labelledby="replies" open>
|
||||
<div class="col-header replies{{- if not .context.ThreadRepliesShown }} hidden-only{{- end -}}">
|
||||
<div class="col-header wrap replies{{- if not .context.ThreadRepliesShown }} hidden-only{{- end -}}">
|
||||
<h2 id="replies">{{- template "repliesSummary" . -}}</h2>
|
||||
<a href="#thread-summary">back to top</a>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end -}}
|
||||
|
||||
{{- with . }}
|
||||
<main class="thread-wrapper" data-nosnippet>
|
||||
<section class="thread thread-main" aria-labelledby="thread-summary">
|
||||
<div class="col-header">
|
||||
<h2 id="thread-summary">{{- template "threadSummary" . -}}</h2>
|
||||
{{- if .context.ThreadRepliesShown }}
|
||||
<a href="#replies">jump to replies</a>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
{{- range $status := .context.Statuses }}
|
||||
<article
|
||||
class="status{{- if $status.ThreadContextStatus }} expanded{{- end -}}{{- if $status.Indent }} indent-{{ $status.Indent }}{{- end -}}"
|
||||
{{- includeAttr "status_attributes.tmpl" $status | indentAttr 3 }}
|
||||
>
|
||||
{{- include "status.tmpl" $status | indent 3 }}
|
||||
</article>
|
||||
{{- if and $status.ThreadLastMain $.context.ThreadReplies }}
|
||||
{{- include "repliesStart" $ | indent 1 }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
{{- if .context.ThreadReplies }}
|
||||
</section>
|
||||
{{- end }}
|
||||
</main>
|
||||
{{- end }}
|
||||
{{- end -}}
|
||||
|
||||
{{- with . }}
|
||||
<main class="thread-wrapper" data-nosnippet>
|
||||
<section class="thread thread-main" aria-labelledby="thread-summary">
|
||||
<div class="col-header wrap">
|
||||
<h2 id="thread-summary">{{- template "threadSummary" . -}}</h2>
|
||||
{{- if .context.ThreadRepliesShown }}
|
||||
<a href="#replies">jump to replies</a>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
{{- range $status := .context.Statuses }}
|
||||
<article
|
||||
class="status{{- if $status.ThreadContextStatus }} expanded{{- end -}}{{- if $status.Indent }} indent-{{ $status.Indent }}{{- end -}}"
|
||||
{{- includeAttr "status_attributes.tmpl" $status | indentAttr 3 }}>
|
||||
{{- include "status.tmpl" $status | indent 3 }}
|
||||
</article>
|
||||
{{- if and $status.ThreadLastMain $.context.ThreadReplies }}
|
||||
{{- include "repliesStart" $ | indent 1 }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
{{- if .context.ThreadReplies }}
|
||||
</section>
|
||||
{{- end }}
|
||||
</main>
|
||||
{{- end }}
|
||||
Loading…
Reference in a new issue