mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-11-22 11:46:40 +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,
|
"showStrap": true,
|
||||||
"blocklistExposed": config.GetInstanceExposeSuspendedWeb(),
|
"blocklistExposed": config.GetInstanceExposeSuspendedWeb(),
|
||||||
"languages": config.GetInstanceLanguages().DisplayStrs(),
|
"languages": config.GetInstanceLanguages().DisplayStrs(),
|
||||||
|
"pageType": "with-sidebar",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@ func (m *Module) indexHandler(c *gin.Context) {
|
||||||
Instance: instance,
|
Instance: instance,
|
||||||
OGMeta: apiutil.OGBase(instance),
|
OGMeta: apiutil.OGBase(instance),
|
||||||
Stylesheets: []string{},
|
Stylesheets: []string{},
|
||||||
Extra: map[string]any{"showStrap": true},
|
Extra: map[string]any{"showStrap": true, "largeHeader": true},
|
||||||
}
|
}
|
||||||
|
|
||||||
apiutil.TemplateWebPage(c, page)
|
apiutil.TemplateWebPage(c, page)
|
||||||
|
|
|
||||||
|
|
@ -156,6 +156,7 @@ func (m *Module) profileGETHandler(c *gin.Context) {
|
||||||
Javascript: []string{jsFrontend},
|
Javascript: []string{jsFrontend},
|
||||||
Extra: map[string]any{
|
Extra: map[string]any{
|
||||||
"account": targetAccount,
|
"account": targetAccount,
|
||||||
|
"pageType": "wider",
|
||||||
"rssFeed": rssFeed,
|
"rssFeed": rssFeed,
|
||||||
"robotsMeta": robotsMeta,
|
"robotsMeta": robotsMeta,
|
||||||
"statuses": statusResp.Items,
|
"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
|
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/>.
|
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/dist/photoswipe.css";
|
||||||
@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
|
@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
|
||||||
@import "plyr/dist/plyr.css";
|
@import "plyr/dist/plyr.css";
|
||||||
|
|
||||||
main {
|
|
||||||
background: transparent;
|
|
||||||
grid-auto-rows: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
background: $status-bg;
|
background: $status-bg;
|
||||||
box-shadow: $boxshadow;
|
box-shadow: $boxshadow;
|
||||||
|
|
@ -41,74 +17,6 @@ main {
|
||||||
text-decoration: none;
|
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 {
|
.status-body {
|
||||||
padding: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
display: flex;
|
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 {
|
.page {
|
||||||
display: grid;
|
display: grid;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
@ -24,23 +5,24 @@
|
||||||
grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
|
grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
|
||||||
grid-template-columns: 1fr min(92%, 50rem) 1fr;
|
grid-template-columns: 1fr min(92%, 50rem) 1fr;
|
||||||
grid-template-rows: auto 1fr auto;
|
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 {
|
.page-header, .page-footer {
|
||||||
grid-column: 1 / span 3;
|
grid-column: 1 / span 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-content {
|
|
||||||
grid-column: 2;
|
|
||||||
align-self: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: flex;
|
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 {
|
.page-footer {
|
||||||
align-self: end;
|
align-self: end;
|
||||||
|
margin-top: 3rem;
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -115,4 +164,4 @@
|
||||||
.page-header {
|
.page-header {
|
||||||
text-align: center;
|
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 @@
|
||||||
/*
|
.profile {
|
||||||
GoToSocial
|
.column-split {
|
||||||
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
display: flex;
|
||||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
This program is free software: you can redistribute it and/or modify
|
.statuses-wrapper {
|
||||||
it under the terms of the GNU Affero General Public License as published by
|
flex: 65 25rem;
|
||||||
the Free Software Foundation, either version 3 of the License, or
|
display: flex;
|
||||||
(at your option) any later version.
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
min-width: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful,
|
.statuses {
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
display: flex;
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
flex-direction: column;
|
||||||
GNU Affero General Public License for more details.
|
gap: 0.4rem;
|
||||||
|
|
||||||
You should have received a copy of the GNU Affero General Public License
|
.rss-icon {
|
||||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
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 {
|
.backnextlinks {
|
||||||
/*
|
display: flex;
|
||||||
Profile page can be a little wider than default
|
justify-content: space-between;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .column-split {
|
.next {
|
||||||
display: flex;
|
margin-left: auto;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
gap: 1rem;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
.profile .profile-header {
|
||||||
|
|
@ -361,4 +428,4 @@
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
gap: 0.25rem 1rem;
|
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)*/
|
$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) */
|
$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) */
|
$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) */
|
$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) */
|
$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) */
|
$red1: #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) */
|
$red2: #dd2c2c; /* Error button background text, can be used with $white1 (4.51) */
|
||||||
$error3: #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) */
|
||||||
$error-link: #01318C; /* Error link text, can be used with $error2 (5.56) */
|
|
||||||
|
|
||||||
$green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */
|
$green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */
|
||||||
|
|
||||||
$info-fg: $gray1;
|
$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
|
||||||
$info-bg: #b3ddff;
|
$boxshadow-border: 0.08rem solid $gray1;
|
||||||
$info-link: $error-link;
|
|
||||||
|
|
||||||
|
/* Color variables as used in a specific location */
|
||||||
|
|
||||||
|
/* Base */
|
||||||
$fg: $white1;
|
$fg: $white1;
|
||||||
$bg: $gray1;
|
$bg: $gray1;
|
||||||
|
|
||||||
$bg-trans: rgba(77, 78, 86, 0.62);
|
|
||||||
|
|
||||||
$bg-accent: $gray5;
|
$bg-accent: $gray5;
|
||||||
$fg-accent: $blue3;
|
$fg-accent: $blue3;
|
||||||
$fg-reduced: $white2;
|
$fg-reduced: $white2;
|
||||||
$border-accent: $orange2;
|
$border-accent: $orange2;
|
||||||
|
|
||||||
/* Color variables as used in a specific location */
|
|
||||||
|
|
||||||
$link-fg: $fg-accent;
|
$link-fg: $fg-accent;
|
||||||
|
|
||||||
|
/* Profile */
|
||||||
|
$profile-bg: $gray4;
|
||||||
|
$avatar-border: $orange2;
|
||||||
|
|
||||||
$role-admin: $orange2;
|
$role-admin: $orange2;
|
||||||
$role-mod: $blue2;
|
$role-mod: $blue2;
|
||||||
|
|
||||||
$profile-bg: $gray4;
|
/* Status */
|
||||||
|
|
||||||
$button-bg: $blue2;
|
|
||||||
$button-fg: $gray1;
|
|
||||||
$button-hover-bg: $blue3;
|
|
||||||
|
|
||||||
$button-danger-bg: $error3;
|
|
||||||
$button-danger-fg: $white1;
|
|
||||||
$button-danger-hover-bg: $error2;
|
|
||||||
|
|
||||||
$status-bg: $gray3;
|
$status-bg: $gray3;
|
||||||
$status-info-bg: $gray2;
|
$status-info-bg: $gray2;
|
||||||
|
|
||||||
|
|
@ -94,11 +88,7 @@ $no-img-desc-fg: $gray1;
|
||||||
|
|
||||||
$bg-sensitive: $gray1;
|
$bg-sensitive: $gray1;
|
||||||
|
|
||||||
$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
|
/* Form inputs */
|
||||||
$boxshadow-border: 0.08rem solid $gray1;
|
|
||||||
|
|
||||||
$avatar-border: $orange2;
|
|
||||||
|
|
||||||
$input-bg: $gray4;
|
$input-bg: $gray4;
|
||||||
$input-disabled-bg: $gray2;
|
$input-disabled-bg: $gray2;
|
||||||
$input-border: $blue1;
|
$input-border: $blue1;
|
||||||
|
|
@ -115,8 +105,23 @@ $settings-nav-bg-active: $blue3;
|
||||||
$settings-nav-border-active: $info-bg;
|
$settings-nav-border-active: $info-bg;
|
||||||
$settings-nav-fg-active: $gray2;
|
$settings-nav-fg-active: $gray2;
|
||||||
|
|
||||||
$error-fg: $error1;
|
/* Buttons */
|
||||||
$error-bg: $error2;
|
$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-bg: $gray2;
|
||||||
$list-entry-alternate-bg: $gray3;
|
$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">
|
<article className="status expanded">
|
||||||
<header className="status-header">
|
<header className="status-header">
|
||||||
<address>
|
<address>
|
||||||
<a style={{margin: 0}}>
|
<a style={{ margin: 0 }}>
|
||||||
<img className="avatar" src={account.avatar} alt="" />
|
<img className="avatar" src={account.avatar} alt="" />
|
||||||
<dl className="author-strap">
|
<dl className="author-strapline">
|
||||||
<dt className="sr-only">Display name</dt>
|
<dt className="sr-only">Display name</dt>
|
||||||
<dd className="displayname text-cutoff">
|
<dd className="displayname text-cutoff">
|
||||||
{account.display_name.trim().length > 0 ? account.display_name : account.username}
|
{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 }) {
|
function StatusHeader({ status }: { status: StatusType }) {
|
||||||
const author = status.account;
|
const author = status.account;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="status-header">
|
<header className="status-header">
|
||||||
<address>
|
<address>
|
||||||
|
|
@ -99,7 +99,7 @@ function StatusHeader({ status }: { status: StatusType }) {
|
||||||
alt={`Avatar for ${author.username}`}
|
alt={`Avatar for ${author.username}`}
|
||||||
title={`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="displayname text-cutoff">{author.display_name}</span>
|
||||||
<span className="sr-only">,</span>
|
<span className="sr-only">,</span>
|
||||||
<span className="username text-cutoff">@{author.acct}</span>
|
<span className="username text-cutoff">@{author.acct}</span>
|
||||||
|
|
@ -130,7 +130,7 @@ function StatusBody({ status }: { status: StatusType }) {
|
||||||
className="spoiler-text"
|
className="spoiler-text"
|
||||||
lang={status.language}
|
lang={status.language}
|
||||||
>
|
>
|
||||||
{ status.spoiler_text
|
{status.spoiler_text
|
||||||
? status.spoiler_text + " "
|
? status.spoiler_text + " "
|
||||||
: "[no content warning set] "
|
: "[no content warning set] "
|
||||||
}
|
}
|
||||||
|
|
@ -146,7 +146,7 @@ function StatusBody({ status }: { status: StatusType }) {
|
||||||
</summary>
|
</summary>
|
||||||
<div
|
<div
|
||||||
className="text"
|
className="text"
|
||||||
dangerouslySetInnerHTML={{__html: content}}
|
dangerouslySetInnerHTML={{ __html: content }}
|
||||||
/>
|
/>
|
||||||
</details>
|
</details>
|
||||||
<StatusMedia status={status} />
|
<StatusMedia status={status} />
|
||||||
|
|
@ -170,7 +170,7 @@ function StatusMedia({ status }: { status: StatusType }) {
|
||||||
role="group"
|
role="group"
|
||||||
aria-label={aria_label}
|
aria-label={aria_label}
|
||||||
>
|
>
|
||||||
{ status.media_attachments.map((media) => {
|
{status.media_attachments.map((media) => {
|
||||||
return (
|
return (
|
||||||
<StatusMediaEntry
|
<StatusMediaEntry
|
||||||
key={media.id}
|
key={media.id}
|
||||||
|
|
@ -227,7 +227,7 @@ function StatusFooter({ status }: { status: StatusType }) {
|
||||||
<dt className="sr-only">Published</dt>
|
<dt className="sr-only">Published</dt>
|
||||||
<dd>
|
<dd>
|
||||||
<time dateTime={status.created_at}>
|
<time dateTime={status.created_at}>
|
||||||
{ new Date(status.created_at).toLocaleString() }
|
{new Date(status.created_at).toLocaleString()}
|
||||||
</time>
|
</time>
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -916,7 +916,7 @@ button.tab-button {
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: $blue1;
|
background: $blue2;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $button-hover-bg;
|
background: $button-hover-bg;
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</ol>
|
</ol>
|
||||||
{{- else }}
|
{{- 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 }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
|
|
@ -60,7 +60,8 @@
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "customCSSLimits" -}}
|
{{- 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 -}}
|
{{- if .instance.Configuration.Accounts.AllowCustomCSS -}}
|
||||||
<b>enabled</b>
|
<b>enabled</b>
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
|
|
@ -82,43 +83,43 @@ Polls can have up to
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
<main class="about">
|
<nav class="sidebar" aria-labelledby="toc">
|
||||||
<nav class="about-section" aria-labelledby="toc">
|
<h2 id="toc">Table of Contents</h2>
|
||||||
<h3 id="toc">Table of Contents</h3>
|
<div>
|
||||||
<div class="about-section-contents">
|
<ol>
|
||||||
<ol>
|
<li><a href="#about">About</a></li>
|
||||||
<li><a href="#about">About {{ .instance.Title -}}</a></li>
|
<li><a href="#contact">Contact</a></li>
|
||||||
<li><a href="#contact">Contact</a></li>
|
<li><a href="#features">Features</a></li>
|
||||||
<li><a href="#features">Features</a></li>
|
<li><a href="#languages">Languages</a></li>
|
||||||
<li><a href="#languages">Languages</a></li>
|
<li><a href="#signup">Register an Account</a></li>
|
||||||
<li><a href="#signup">Register an Account on {{ .instance.Title -}}</a></li>
|
<li><a href="#rules">Rules</a></li>
|
||||||
<li><a href="#rules">Rules</a></li>
|
<li><a href="#terms">Terms and Conditions</a></li>
|
||||||
<li><a href="#terms">Terms and Conditions</a></li>
|
<li><a href="#moderated-servers">Moderated Servers</a></li>
|
||||||
<li><a href="#moderated-servers">Moderated Servers</a></li>
|
</ol>
|
||||||
</ol>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
<main class="single-page">
|
||||||
<section class="about-section" role="region" aria-labelledby="about">
|
<section role="region" aria-labelledby="about">
|
||||||
<h3 id="about">About {{ .instance.Title -}}</h3>
|
<h2 id="about">About {{ .instance.Title -}}</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
{{- include "description" . | indent 3 }}
|
{{- include "description" . | indent 3 }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="about-section" role="region" aria-labelledby="contact">
|
<section role="region" aria-labelledby="contact">
|
||||||
<h3 id="contact">Admin Contact</h3>
|
<h2 id="contact">Admin Contact</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
{{- if .instance.ContactAccount }}
|
{{- if .instance.ContactAccount }}
|
||||||
<a href="{{- .instance.ContactAccount.URL -}}" class="account-card">
|
<a href="{{- .instance.ContactAccount.URL -}}" class="account-card">
|
||||||
<img class="avatar" src="{{- .instance.ContactAccount.Avatar -}}" alt=""/>
|
<img class="avatar" src="{{- .instance.ContactAccount.Avatar -}}" alt="" />
|
||||||
<h3>
|
<b>
|
||||||
{{- if .instance.ContactAccount.DisplayName -}}
|
{{- if .instance.ContactAccount.DisplayName -}}
|
||||||
{{- emojify .instance.ContactAccount.Emojis (escape .instance.ContactAccount.DisplayName) -}}
|
{{- emojify .instance.ContactAccount.Emojis (escape .instance.ContactAccount.DisplayName) -}}
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
{{- .instance.ContactAccount.Username -}}
|
{{- .instance.ContactAccount.Username -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</h3>
|
</b>
|
||||||
<span>@{{- .instance.ContactAccount.Username -}}</span>
|
<span>@{{- .instance.ContactAccount.Username -}}</span>
|
||||||
</a>
|
</a>
|
||||||
{{- else }}
|
{{- else }}
|
||||||
|
|
@ -131,9 +132,9 @@ Polls can have up to
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="about-section" role="region" aria-labelledby="features">
|
<section role="region" aria-labelledby="features">
|
||||||
<h3 id="features">Instance Features</h3>
|
<h2 id="features">Instance Features</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<ul>
|
<ul>
|
||||||
<li>{{- template "statusLimits" . -}}</li>
|
<li>{{- template "statusLimits" . -}}</li>
|
||||||
<li>{{- template "pollLimits" . -}}</li>
|
<li>{{- template "pollLimits" . -}}</li>
|
||||||
|
|
@ -141,34 +142,34 @@ Polls can have up to
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="about-section" role="region" aria-labelledby="languages">
|
<section role="region" aria-labelledby="languages">
|
||||||
<h3 id="languages">Languages</h3>
|
<h2 id="languages">Languages</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
{{- include "languages" . | indent 3 }}
|
{{- include "languages" . | indent 3 }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{{- include "index_register.tmpl" . | indent 1 }}
|
{{- include "index_register.tmpl" . | indent 1 }}
|
||||||
<section class="about-section" role="region" aria-labelledby="rules">
|
<section role="region" aria-labelledby="rules">
|
||||||
<h3 id="rules">Instance Rules</h3>
|
<h2 id="rules">Instance Rules</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
{{- include "rules" . | indent 3 }}
|
{{- include "rules" . | indent 3 }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="about-section" role="region" aria-labelledby="terms">
|
<section role="region" aria-labelledby="terms">
|
||||||
<h3 id="terms">Terms and Conditions</h3>
|
<h2 id="terms">Terms and Conditions</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
{{- include "termsAndConditions" . | indent 3 }}
|
{{- include "termsAndConditions" . | indent 3 }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="about-section" role="region" aria-labelledby="moderated-servers">
|
<section role="region" aria-labelledby="moderated-servers">
|
||||||
<h3 id="moderated-servers">Moderated servers</h3>
|
<h2 id="moderated-servers">Moderated servers</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<p>
|
<p>
|
||||||
ActivityPub instances federate with other instances by exchanging data with them over the network.
|
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.
|
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:
|
by an instance admin. When an instance is domain blocked by another instance:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Any existing data from the blocked instance is deleted from the storage of the instance doing the blocking.</li>
|
<li>Any existing data from the blocked instance is deleted from the storage of the instance doing the
|
||||||
<li>Interaction between the two instances is cut off in both directions; neither instance can interact with the other.</li>
|
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>
|
<li>No new data from the blocked instance will be created on the instance that blocks it.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -190,4 +193,4 @@ Polls can have up to
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</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 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 }}
|
{{- 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>
|
</p>
|
||||||
<div class="labelinput">
|
<div class="labelinput">
|
||||||
<label for="username">
|
<label for="username">
|
||||||
Username (lowercase a-z, numbers, and underscores; max 64 characters).<br/>
|
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>
|
<small>Your username will be part of your fediverse handle, and cannot be changed later, so choose
|
||||||
|
thoughtfully!</small>
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input id="username" type="text" name="username" required
|
||||||
id="username"
|
placeholder="Please enter your desired username" pattern="^[a-z0-9_]{1,64}$"
|
||||||
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"
|
title="lowercase a-z, numbers, and underscores; max 64 characters"
|
||||||
value="{{- .preferredUsername -}}"
|
value="{{- .preferredUsername -}}">
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<input type="hidden" name="name" value="{{- .name -}}">
|
<input type="hidden" name="name" value="{{- .name -}}">
|
||||||
<button type="submit" class="btn btn-success">Submit</button>
|
<button type="submit" class="btn btn-success">Submit</button>
|
||||||
|
|
|
||||||
|
|
@ -26,10 +26,10 @@
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
<main class="about">
|
<main class="index-page sectioned">
|
||||||
<section class="about-section" role="region" aria-labelledby="about">
|
<section role="region" aria-labelledby="about">
|
||||||
<h3 id="about">About this instance</h3>
|
<h2 id="about">About this instance</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
{{- include "shortDescription" . | indent 3 }}
|
{{- include "shortDescription" . | indent 3 }}
|
||||||
<a href="/about">See more details</a>
|
<a href="/about">See more details</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -18,11 +18,11 @@
|
||||||
*/ -}}
|
*/ -}}
|
||||||
|
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
<section role="region" class="about-section apps" aria-labelledby="apps">
|
<section role="region" class="apps" aria-labelledby="apps">
|
||||||
<h3 id="apps">Client applications</h3>
|
<h2 id="apps">Client applications</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<p>
|
<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.
|
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:
|
You can use a variety of clients to log in to your account here:
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -30,87 +30,51 @@
|
||||||
<li class="applist-entry">
|
<li class="applist-entry">
|
||||||
<div class="applist-text">
|
<div class="applist-text">
|
||||||
<p><strong>Semaphore</strong> is a web client designed for speed and simplicity.</p>
|
<p><strong>Semaphore</strong> is a web client designed for speed and simplicity.</p>
|
||||||
<a
|
<a href="https://semaphore.social/" rel="nofollow noreferrer noopener" target="_blank">
|
||||||
href="https://semaphore.social/"
|
|
||||||
rel="nofollow noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Use Semaphore
|
Use Semaphore
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<svg
|
<svg role="img" aria-labelledby="semaphore-title semaphore-desc" class="applist-logo redraw"
|
||||||
role="img"
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146 120" width="100" height="100">
|
||||||
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>
|
<title id="semaphore-title">The Semaphore logo</title>
|
||||||
<desc id="semaphore-desc">A waving flag</desc>
|
<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>
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="applist-entry">
|
<li class="applist-entry">
|
||||||
<div class="applist-text">
|
<div class="applist-text">
|
||||||
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
|
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
|
||||||
<a
|
<a href="https://tusky.app" rel="nofollow noreferrer noopener" target="_blank">
|
||||||
href="https://tusky.app"
|
|
||||||
rel="nofollow noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Get Tusky
|
Get Tusky
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img class="applist-logo" src="/assets/tusky.svg"
|
||||||
class="applist-logo"
|
|
||||||
src="/assets/tusky.svg"
|
|
||||||
alt="The Tusky mascot, a cartoon elephant tooting happily"
|
alt="The Tusky mascot, a cartoon elephant tooting happily"
|
||||||
title="The Tusky mascot, a cartoon elephant tooting happily"
|
title="The Tusky mascot, a cartoon elephant tooting happily" width="100" height="100" />
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
/>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="applist-entry">
|
<li class="applist-entry">
|
||||||
<div class="applist-text">
|
<div class="applist-text">
|
||||||
<p><strong>Feditext</strong> (beta) is a beautiful client for iOS, iPadOS and macOS.</p>
|
<p><strong>Feditext</strong> (beta) is a beautiful client for iOS, iPadOS and macOS.</p>
|
||||||
<a
|
<a href="https://github.com/feditext/feditext" rel="nofollow noreferrer noopener" target="_blank">
|
||||||
href="https://github.com/feditext/feditext"
|
|
||||||
rel="nofollow noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Get Feditext
|
Get Feditext
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img class="applist-logo" src="/assets/feditext.svg"
|
||||||
class="applist-logo"
|
|
||||||
src="/assets/feditext.svg"
|
|
||||||
alt="The Feditext logo, the characters 'ft' at a slight angle"
|
alt="The Feditext logo, the characters 'ft' at a slight angle"
|
||||||
title="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" />
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
/>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="applist-entry">
|
<li class="applist-entry">
|
||||||
<div class="applist-text">
|
<div class="applist-text">
|
||||||
<p>Or try one of the <strong>Mastodon clients</strong> listed on the official Mastodon page.</p>
|
<p>Or try one of the <strong>Mastodon clients</strong> listed on the official Mastodon page.</p>
|
||||||
<a
|
<a href="https://joinmastodon.org/apps" rel="nofollow noreferrer noopener" target="_blank">
|
||||||
href="https://joinmastodon.org/apps"
|
|
||||||
rel="nofollow noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Get Mastodon apps
|
Get Mastodon apps
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img class="applist-logo" src="/assets/mastodon.svg"
|
||||||
class="applist-logo"
|
|
||||||
src="/assets/mastodon.svg"
|
|
||||||
alt="The Mastodon logo, the character 'M' in a speech bubble"
|
alt="The Mastodon logo, the character 'M' in a speech bubble"
|
||||||
title="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" />
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
/>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -20,19 +20,20 @@
|
||||||
{{- define "registrationLimits" -}}
|
{{- define "registrationLimits" -}}
|
||||||
New account registration is currently
|
New account registration is currently
|
||||||
{{- if .instance.Registrations -}}
|
{{- if .instance.Registrations -}}
|
||||||
<b>open</b>.
|
<b>open</b>.
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
<b>closed</b>.
|
<b>closed</b>.
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
<section class="about-section" role="region" aria-labelledby="signup">
|
<section role="region" aria-labelledby="signup">
|
||||||
<h3 id="signup">Register an Account on {{ .instance.Title -}}</h3>
|
<h2 id="signup">Register an Account on {{ .instance.Title -}}</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<p>{{- template "registrationLimits" . -}}</p>
|
<p>{{- template "registrationLimits" . -}}</p>
|
||||||
{{- if .instance.Registrations }}
|
{{- 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>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>
|
<p>Manual admin approval is <b>required</b> for new accounts.</p>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
|
||||||
|
|
@ -18,34 +18,24 @@
|
||||||
*/ -}}
|
*/ -}}
|
||||||
|
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
<section role="region" class="about-section what-is-this" aria-labelledby="what-is-this">
|
<section role="region" class="what-is-this" aria-labelledby="what-is-this">
|
||||||
<h3 id="what-is-this">What is this?</h3>
|
<h2 id="what-is-this">What is this?</h2>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<p>
|
<p>
|
||||||
The web page you're reading right now is served by an instance of GoToSocial,
|
The web page you're reading right now is served by an instance of GoToSocial,
|
||||||
a federated, distributed, open-source microblogging software which connects
|
a federated, distributed, open-source microblogging software which connects
|
||||||
to other instances across a network known as the "fediverse".
|
to other instances across a network known as the "fediverse".
|
||||||
</p>
|
</p>
|
||||||
<h4 id="what-is-an-instance">What is an "instance"?</h4>
|
<h3 id="what-is-an-instance">What is an "instance"?</h3>
|
||||||
<p>
|
<p>
|
||||||
"Instance" is a term commonly used for one node in the fediverse. Each instance
|
"Instance" is a term commonly used for one node in the fediverse. Each instance
|
||||||
has its own web address, user(s), culture, rules, and settings. Instances exchange
|
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.
|
data by "talking" to each other over the internet using a protocol called ActivityPub.
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a class="activitypub-logo-wrapper" href="https://activitypub.rocks/" rel="nofollow noreferrer noopener"
|
||||||
class="activitypub-logo-wrapper"
|
target="_blank">
|
||||||
href="https://activitypub.rocks/"
|
<img class="activitypub-logo" src="/assets/activitypub_light.svg" alt="ActivityPub logo by mray, CC0 1.0"
|
||||||
rel="nofollow noreferrer noopener"
|
title="ActivityPub logo by mray, CC0 1.0" width="250" height="65" />
|
||||||
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).
|
Learn more about ActivityPub (opens in a new tab).
|
||||||
</a>
|
</a>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -55,7 +45,7 @@
|
||||||
<p>
|
<p>
|
||||||
There are thousands of fediverse instances, connecting millions of people together.
|
There are thousands of fediverse instances, connecting millions of people together.
|
||||||
</p>
|
</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>
|
<p>
|
||||||
You can join the fediverse by running your own instance of an ActivityPub software,
|
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,
|
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:
|
To help you find an instance that suits you, you can try one of the following tools:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<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://fediverse.observer" rel="nofollow noreferrer noopener" target="_blank">Fediverse
|
||||||
<li><a href="https://fedidb.org/network" rel="nofollow noreferrer noopener" target="_blank">FediDB (opens in a new tab)</a></li>
|
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>
|
</ul>
|
||||||
{{- if .instance.Registrations }}
|
{{- if .instance.Registrations }}
|
||||||
<p>Or, just <a href="signup">register for an account on this instance</a>!</p>
|
<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.
|
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
|
When invoking these nested templates, remember to pass in the values passed
|
||||||
to the executing template, ie., use '{{ template "example" . }}' not
|
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" -}}
|
{{- define "thumbnailType" -}}
|
||||||
|
|
@ -43,43 +43,47 @@ image/webp
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="robots" content="{{- if .robotsMeta -}}{{- .robotsMeta -}}{{- else -}}noindex, nofollow{{- end -}}">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
{{- if .ogMeta }}
|
<meta name="robots" content="{{- if .robotsMeta -}}{{- .robotsMeta -}}{{- else -}}noindex, nofollow{{- end -}}">
|
||||||
{{- include "page_ogmeta.tmpl" . | indent 2 }}
|
{{- if .ogMeta }}
|
||||||
{{- else }}
|
{{- include "page_ogmeta.tmpl" . | indent 2 }}
|
||||||
{{- end }}
|
{{- else }}
|
||||||
{{- if .rssFeed }}
|
{{- end }}
|
||||||
<link rel="alternate" type="application/rss+xml" href="{{- .rssFeed -}}" title="{{- template "instanceTitle" . -}}">
|
{{- if .rssFeed }}
|
||||||
{{- else }}
|
<link rel="alternate" type="application/rss+xml" href="{{- .rssFeed -}}" title="{{- template "instanceTitle" . -}}">
|
||||||
{{- end }}
|
{{- else }}
|
||||||
{{- if .account }}
|
{{- end }}
|
||||||
<link rel="alternate" type="application/activity+json" href="/users/{{- .account.Username -}}">
|
{{- if .account }}
|
||||||
{{- else if .status }}
|
<link rel="alternate" type="application/activity+json" href="/users/{{- .account.Username -}}">
|
||||||
<link rel="alternate" type="application/activity+json" href="/users/{{- .status.Account.Username -}}/statuses/{{- .status.ID -}}">
|
{{- else if .status }}
|
||||||
{{- else }}
|
<link rel="alternate" type="application/activity+json"
|
||||||
{{- end }}
|
href="/users/{{- .status.Account.Username -}}/statuses/{{- .status.ID -}}">
|
||||||
<link rel="icon" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
{{- else }}
|
||||||
<link rel="apple-touch-icon" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
{{- end }}
|
||||||
<link rel="apple-touch-startup-image" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
<link rel="icon" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||||
{{- include "page_stylesheets.tmpl" . | indent 2 }}
|
<link rel="apple-touch-icon" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||||
{{- range .javascript }}
|
<link rel="apple-touch-startup-image" href="{{- .instance.Thumbnail -}}" type="{{- template "thumbnailType" . -}}">
|
||||||
<script type="text/javascript" src="{{- . -}}" async="" defer=""></script>
|
{{- include "page_stylesheets.tmpl" . | indent 2 }}
|
||||||
{{- end }}
|
{{- range .javascript }}
|
||||||
<title>{{- template "instanceTitle" . -}}</title>
|
<script type="text/javascript" src="{{- . -}}" async="" defer=""></script>
|
||||||
</head>
|
{{- end }}
|
||||||
<body class="page">
|
<title>{{- template "instanceTitle" . -}}</title>
|
||||||
<header class="page-header">
|
</head>
|
||||||
{{- include "page_header.tmpl" . | indent 3 }}
|
|
||||||
</header>
|
<body class="page{{if .pageType}} {{.pageType}}{{end}}">
|
||||||
<div class="page-content">
|
<header class="page-header{{if .largeHeader}} large{{end}}">
|
||||||
{{- include .pageContent . | indent 3 | outdentPre }}
|
{{- include "page_header.tmpl" . | indent 3 }}
|
||||||
</div>
|
</header>
|
||||||
<footer class="page-footer">
|
<div class="page-content">
|
||||||
{{- include "page_footer.tmpl" . | indent 3 }}
|
{{- include .pageContent . | indent 3 | outdentPre }}
|
||||||
</footer>
|
</div>
|
||||||
</body>
|
<footer class="page-footer">
|
||||||
|
{{- include "page_footer.tmpl" . | indent 3 }}
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -21,43 +21,29 @@
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="nodot">
|
<ul class="nodot">
|
||||||
<li id="about">
|
<li id="about">
|
||||||
<a
|
<a href="/about" class="nounderline">
|
||||||
href="/about"
|
|
||||||
class="nounderline"
|
|
||||||
>
|
|
||||||
About {{ .instance.Title }}
|
About {{ .instance.Title }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li id="version">
|
<li id="version">
|
||||||
<a
|
<a href="https://github.com/superseriousbusiness/gotosocial" class="nounderline"
|
||||||
href="https://github.com/superseriousbusiness/gotosocial"
|
rel="nofollow noreferrer noopener" target="_blank">
|
||||||
class="nounderline"
|
|
||||||
rel="nofollow noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">🦥</span>
|
<span aria-hidden="true">🦥</span>
|
||||||
Source - GoToSocial {{ .instance.Version }}
|
Source - GoToSocial {{ .instance.Version }}
|
||||||
<span aria-hidden="true">🦥</span>
|
<span aria-hidden="true">🦥</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{{- if .instance.ContactAccount }}
|
{{- if .instance.ContactAccount }}
|
||||||
<li id="contact">
|
<li id="contact">
|
||||||
<a
|
<a href="/@{{- .instance.ContactAccount.Username -}}" class="nounderline">
|
||||||
href="/@{{- .instance.ContactAccount.Username -}}"
|
|
||||||
class="nounderline"
|
|
||||||
>
|
|
||||||
Contact account - {{ .instance.ContactAccount.Username }}
|
Contact account - {{ .instance.ContactAccount.Username }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- if .instance.Email }}
|
{{- if .instance.Email }}
|
||||||
<li id="email">
|
<li id="email">
|
||||||
<a
|
<a href="mailto:{{- .instance.Email -}}" class="nounderline" rel="nofollow noreferrer noopener"
|
||||||
href="mailto:{{- .instance.Email -}}"
|
target="_blank">
|
||||||
class="nounderline"
|
|
||||||
rel="nofollow noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Email - {{ .instance.Email }}
|
Email - {{ .instance.Email }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -27,31 +27,31 @@ Instance Logo
|
||||||
|
|
||||||
{{- define "strapUsers" -}}
|
{{- define "strapUsers" -}}
|
||||||
{{- with deref .instance.Stats.user_count -}}
|
{{- with deref .instance.Stats.user_count -}}
|
||||||
{{- if eq . 1 -}}
|
{{- if eq . 1 -}}
|
||||||
<span class="count">{{- . -}}</span> user
|
<span class="count">{{- . -}}</span> user
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
<span class="count">{{- . -}}</span> users
|
<span class="count">{{- . -}}</span> users
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "strapPosts" -}}
|
{{- define "strapPosts" -}}
|
||||||
{{- with deref .instance.Stats.status_count -}}
|
{{- with deref .instance.Stats.status_count -}}
|
||||||
{{- if eq . 1 -}}
|
{{- if eq . 1 -}}
|
||||||
<span class="count">{{- . -}}</span> post
|
<span class="count">{{- . -}}</span> post
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
<span class="count">{{- . -}}</span> posts
|
<span class="count">{{- . -}}</span> posts
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "strapInstances" -}}
|
{{- define "strapInstances" -}}
|
||||||
{{- with deref .instance.Stats.domain_count -}}
|
{{- with deref .instance.Stats.domain_count -}}
|
||||||
{{- if eq . 1 -}}
|
{{- if eq . 1 -}}
|
||||||
<span class="count">{{- . -}}</span> other instance
|
<span class="count">{{- . -}}</span> other instance
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
<span class="count">{{- . -}}</span> other instances
|
<span class="count">{{- . -}}</span> other instances
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
|
|
@ -59,21 +59,16 @@ Instance Logo
|
||||||
<a aria-label="{{- .instance.Title -}}. Go to instance homepage" href="/" class="nounderline">
|
<a aria-label="{{- .instance.Title -}}. Go to instance homepage" href="/" class="nounderline">
|
||||||
<picture>
|
<picture>
|
||||||
{{- if .instance.ThumbnailStatic }}
|
{{- if .instance.ThumbnailStatic }}
|
||||||
<source
|
<source srcset="{{- .instance.ThumbnailStatic -}}" type="{{- .instance.ThumbnailStaticType -}}"
|
||||||
srcset="{{- .instance.ThumbnailStatic -}}"
|
media="(prefers-reduced-motion: reduce)" />
|
||||||
type="{{- .instance.ThumbnailStaticType -}}"
|
|
||||||
media="(prefers-reduced-motion: reduce)"
|
|
||||||
/>
|
|
||||||
{{- end }}
|
{{- end }}
|
||||||
<img
|
<img src="{{- .instance.Thumbnail -}}" alt="{{- template "thumbnailDescription" . -}}"
|
||||||
src="{{- .instance.Thumbnail -}}"
|
title="{{- template "thumbnailDescription" . -}}" />
|
||||||
alt="{{- template "thumbnailDescription" . -}}"
|
|
||||||
title="{{- template "thumbnailDescription" . -}}"
|
|
||||||
/>
|
|
||||||
</picture>
|
</picture>
|
||||||
<h1>{{- .instance.Title -}}</h1>
|
<h1>{{- .instance.Title -}}</h1>
|
||||||
</a>
|
</a>
|
||||||
{{- if .showStrap }}
|
{{- 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 }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
@ -27,70 +27,40 @@
|
||||||
<form action="/signup" method="POST">
|
<form action="/signup" method="POST">
|
||||||
<div class="labelinput">
|
<div class="labelinput">
|
||||||
<label for="email">Email</label>
|
<label for="email">Email</label>
|
||||||
<input
|
<input id="email" type="email" name="email" required placeholder="Email address">
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
name="email"
|
|
||||||
required
|
|
||||||
placeholder="Email address"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="labelinput">
|
<div class="labelinput">
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<input
|
<input id="password" type="password" name="password" required
|
||||||
id="password"
|
placeholder="Please enter your desired password" autocomplete="new-password">
|
||||||
type="password"
|
|
||||||
name="password"
|
|
||||||
required
|
|
||||||
placeholder="Please enter your desired password"
|
|
||||||
autocomplete="new-password"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="labelinput">
|
<div class="labelinput">
|
||||||
<label for="username">
|
<label for="username">
|
||||||
Username (lowercase a-z, numbers, and underscores; max 64 characters).<br/>
|
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>
|
<small>Your username will be part of your fediverse handle, and cannot be changed later, so choose
|
||||||
|
thoughtfully!</small>
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input id="username" type="text" name="username" required
|
||||||
id="username"
|
placeholder="Please enter your desired username" pattern="^[a-z0-9_]{1,64}$" autocapitalize="off"
|
||||||
type="text"
|
spellcheck="false" title="lowercase a-z, numbers, and underscores; max 64 characters">
|
||||||
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>
|
</div>
|
||||||
{{- if .reasonRequired }}
|
{{- if .reasonRequired }}
|
||||||
<div class="labelinput">
|
<div class="labelinput">
|
||||||
<label for="reason">
|
<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>
|
<small>The admin(s) will use this text to decide whether or not to approve your sign-up.</small>
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea id="reason" name="reason" required
|
||||||
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."
|
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"
|
rows="8" minlength="40" maxlength="500" autocapitalize="sentences"
|
||||||
minlength="40"
|
title="40-500 characters"></textarea>
|
||||||
maxlength="500"
|
|
||||||
autocapitalize="sentences"
|
|
||||||
title="40-500 characters"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
<div class="checkbox">
|
<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>
|
<label for="agreement">I have read and accept the <a href="/about#terms">terms and conditions</a> of
|
||||||
<input
|
{{ .instance.Title }}, and I agree to abide by the <a href="/about#rules">instance
|
||||||
id="agreement"
|
rules</a>.</label>
|
||||||
type="checkbox"
|
<input id="agreement" type="checkbox" name="agreement" required value="true">
|
||||||
name="agreement"
|
|
||||||
required
|
|
||||||
value="true"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<input type="hidden" name="locale" value="en">
|
<input type="hidden" name="locale" value="en">
|
||||||
<button type="submit" class="btn btn-success">Submit</button>
|
<button type="submit" class="btn btn-success">Submit</button>
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<section aria-labelledby="signed-up">
|
<section aria-labelledby="signed-up">
|
||||||
<h2 id="signed-up">Thanks for signing up to {{ .instance.Title -}}!</h2>
|
<h2 id="signed-up">Thanks for signing up to {{ .instance.Title -}}!</h2>
|
||||||
<p>Hi <b>{{- .username -}}</b>!</p>
|
<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>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>
|
<p>Once an admin has approved your sign-up, you will be able to log in and use your account.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,8 @@
|
||||||
{{- if .SpoilerText }}
|
{{- if .SpoilerText }}
|
||||||
<details class="text-spoiler">
|
<details class="text-spoiler">
|
||||||
<summary>
|
<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>
|
<span class="button" role="button" tabindex="0">Toggle visibility</span>
|
||||||
</summary>
|
</summary>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
|
|
@ -64,26 +65,16 @@
|
||||||
{{- include "status_attachments.tmpl" . | indent 1 }}
|
{{- include "status_attachments.tmpl" . | indent 1 }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
<aside class="status-info" aria-hidden="true">
|
<aside class="status-info">
|
||||||
{{- include "status_info.tmpl" . | indent 1 }}
|
{{- include "status_info.tmpl" . | indent 1 }}
|
||||||
</aside>
|
</aside>
|
||||||
{{- if .Local }}
|
{{- if .Local }}
|
||||||
<a
|
<a href="{{- .URL -}}" class="status-link" data-nosnippet title="Open thread at this post">
|
||||||
href="{{- .URL -}}"
|
|
||||||
class="status-link"
|
|
||||||
data-nosnippet
|
|
||||||
title="Open thread at this post"
|
|
||||||
>
|
|
||||||
Open thread at this post
|
Open thread at this post
|
||||||
</a>
|
</a>
|
||||||
{{- else }}
|
{{- else }}
|
||||||
<a
|
<a href="{{- .URL -}}" class="status-link" data-nosnippet rel="nofollow noreferrer noopener" target="_blank"
|
||||||
href="{{- .URL -}}"
|
title="Open remote post (opens in a new window)">
|
||||||
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)
|
Open remote post (opens in a new window)
|
||||||
</a>
|
</a>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
|
||||||
|
|
@ -23,54 +23,23 @@
|
||||||
*/ -}}
|
*/ -}}
|
||||||
|
|
||||||
{{- define "imagePreview" }}
|
{{- define "imagePreview" }}
|
||||||
<img
|
<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
|
||||||
src="{{- .PreviewURL -}}"
|
title="{{- .Description -}}" {{- end }} width="{{- .Meta.Original.Width -}}"
|
||||||
loading="lazy"
|
height="{{- .Meta.Original.Height -}}" />
|
||||||
{{- if .Description }}
|
|
||||||
alt="{{- .Description -}}"
|
|
||||||
title="{{- .Description -}}"
|
|
||||||
{{- end }}
|
|
||||||
width="{{- .Meta.Original.Width -}}"
|
|
||||||
height="{{- .Meta.Original.Height -}}"
|
|
||||||
/>
|
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
||||||
{{- define "videoPreview" }}
|
{{- define "videoPreview" }}
|
||||||
<img
|
<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
|
||||||
src="{{- .PreviewURL -}}"
|
title="{{- .Description -}}" {{- end }} width="{{- .Meta.Small.Width -}}" height="{{- .Meta.Small.Height -}}" />
|
||||||
loading="lazy"
|
|
||||||
{{- if .Description }}
|
|
||||||
alt="{{- .Description -}}"
|
|
||||||
title="{{- .Description -}}"
|
|
||||||
{{- end }}
|
|
||||||
width="{{- .Meta.Small.Width -}}"
|
|
||||||
height="{{- .Meta.Small.Height -}}"
|
|
||||||
/>
|
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
||||||
{{- define "audioPreview" }}
|
{{- define "audioPreview" }}
|
||||||
{{- if and .PreviewURL .Meta.Small.Width }}
|
{{- if and .PreviewURL .Meta.Small.Width }}
|
||||||
<img
|
<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
|
||||||
src="{{- .PreviewURL -}}"
|
title="{{- .Description -}}" {{- end }} width="{{- .Meta.Small.Width -}}" height="{{- .Meta.Small.Height -}}" />
|
||||||
loading="lazy"
|
|
||||||
{{- if .Description }}
|
|
||||||
alt="{{- .Description -}}"
|
|
||||||
title="{{- .Description -}}"
|
|
||||||
{{- end }}
|
|
||||||
width="{{- .Meta.Small.Width -}}"
|
|
||||||
height="{{- .Meta.Small.Height -}}"
|
|
||||||
/>
|
|
||||||
{{- else }}
|
{{- else }}
|
||||||
<img
|
<img src="/assets/logo.webp" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
|
||||||
src="/assets/logo.webp"
|
title="{{- .Description -}}" {{- end }} width="518" height="460" />
|
||||||
loading="lazy"
|
|
||||||
{{- if .Description }}
|
|
||||||
alt="{{- .Description -}}"
|
|
||||||
title="{{- .Description -}}"
|
|
||||||
{{- end }}
|
|
||||||
width="518"
|
|
||||||
height="460"
|
|
||||||
/>
|
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
||||||
|
|
@ -85,11 +54,7 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- with .MediaAttachments }}
|
{{- with .MediaAttachments }}
|
||||||
<div
|
<div class="{{- template "galleryClass" . -}}" role="group" aria-label="{{- template "attachmentsLength" . -}}">
|
||||||
class="{{- template "galleryClass" . -}}"
|
|
||||||
role="group"
|
|
||||||
aria-label="{{- template "attachmentsLength" . -}}"
|
|
||||||
>
|
|
||||||
{{- range $index, $media := . }}
|
{{- range $index, $media := . }}
|
||||||
<div class="media-wrapper">
|
<div class="media-wrapper">
|
||||||
<details class="{{- $media.Type -}}-spoiler media-spoiler" {{- if not $media.Sensitive }} open{{- end -}}>
|
<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 }}
|
{{- if and $media.PreviewURL $media.Meta.Small.Width }}
|
||||||
poster="{{- .PreviewURL -}}"
|
poster="{{- .PreviewURL -}}"
|
||||||
data-pswp-width="{{- $media.Meta.Small.Width -}}px"
|
data-pswp-width="{{- $media.Meta.Small.Width -}}px"
|
||||||
data-pswp-height="{{- $media.Meta.Small.Height -}}px"
|
data-pswp-height="{{- $media.Meta.Small.Height -}}px" {{- else }} poster="/assets/logo.webp"
|
||||||
{{- else }}
|
width="518px" height="460px" {{- end }} {{- if .Description }} alt="{{- $media.Description -}}"
|
||||||
poster="/assets/logo.webp"
|
title="{{- $media.Description -}}" {{- end }}>
|
||||||
width="518px"
|
<source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}" />
|
||||||
height="460px"
|
|
||||||
{{- end }}
|
|
||||||
{{- if .Description }}
|
|
||||||
alt="{{- $media.Description -}}"
|
|
||||||
title="{{- $media.Description -}}"
|
|
||||||
{{- end }}
|
|
||||||
>
|
|
||||||
<source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}"/>
|
|
||||||
</video>
|
</video>
|
||||||
{{- else if eq .Type "image" }}
|
{{- else if eq .Type "image" }}
|
||||||
<a
|
<a class="photoswipe-slide" href="{{- $media.URL -}}" target="_blank"
|
||||||
class="photoswipe-slide"
|
|
||||||
href="{{- $media.URL -}}"
|
|
||||||
target="_blank"
|
|
||||||
data-pswp-width="{{- $media.Meta.Original.Width -}}px"
|
data-pswp-width="{{- $media.Meta.Original.Width -}}px"
|
||||||
data-pswp-height="{{- $media.Meta.Original.Height -}}px"
|
data-pswp-height="{{- $media.Meta.Original.Height -}}px" data-cropped="true" {{- if .Description }}
|
||||||
data-cropped="true"
|
alt="{{- $media.Description -}}" title="{{- $media.Description -}}" {{- end }}>
|
||||||
{{- if .Description }}
|
|
||||||
alt="{{- $media.Description -}}"
|
|
||||||
title="{{- $media.Description -}}"
|
|
||||||
{{- end }}
|
|
||||||
>
|
|
||||||
{{- with $media }}
|
{{- with $media }}
|
||||||
{{- include "imagePreview" . | indent 4 }}
|
{{- include "imagePreview" . | indent 4 }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</a>
|
</a>
|
||||||
{{- else }}
|
{{- else }}
|
||||||
<a
|
<a class="unknown-attachment" href="{{- $media.RemoteURL -}}" rel="nofollow noreferrer noopener"
|
||||||
class="unknown-attachment"
|
target="_blank" {{- if .Description }}
|
||||||
href="{{- $media.RemoteURL -}}"
|
title="Open external media: {{ $media.Description -}} {{- $media.RemoteURL -}}" {{- else }}
|
||||||
rel="nofollow noreferrer noopener"
|
title="Open external media. {{- $media.RemoteURL -}}" {{- end }}>
|
||||||
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">
|
<div class="placeholder" aria-hidden="true">
|
||||||
<i class="placeholder-external-link fa fa-external-link"></i>
|
<i class="placeholder-external-link fa fa-external-link"></i>
|
||||||
<i class="placeholder-icon fa fa-file-text"></i>
|
<i class="placeholder-icon fa fa-file-text"></i>
|
||||||
|
|
|
||||||
|
|
@ -20,31 +20,31 @@
|
||||||
{{- define "ariaLabel" -}}
|
{{- define "ariaLabel" -}}
|
||||||
@{{ .Account.Acct -}}, {{ timestamp .CreatedAt -}}
|
@{{ .Account.Acct -}}, {{ timestamp .CreatedAt -}}
|
||||||
{{- if .LanguageTag -}}
|
{{- if .LanguageTag -}}
|
||||||
, language {{ .LanguageTag.DisplayStr -}}
|
, language {{ .LanguageTag.DisplayStr -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- if .MediaAttachments -}}
|
{{- if .MediaAttachments -}}
|
||||||
, has media
|
, has media
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- if .RepliesCount -}}
|
{{- if .RepliesCount -}}
|
||||||
{{- if eq .RepliesCount 1 -}}
|
{{- if eq .RepliesCount 1 -}}
|
||||||
, 1 reply
|
, 1 reply
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
, {{ .RepliesCount }} replies
|
, {{ .RepliesCount }} replies
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- if .FavouritesCount -}}
|
{{- if .FavouritesCount -}}
|
||||||
{{- if eq .FavouritesCount 1 -}}
|
{{- if eq .FavouritesCount 1 -}}
|
||||||
, 1 favourite
|
, 1 favourite
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
, {{ .FavouritesCount }} favourites
|
, {{ .FavouritesCount }} favourites
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- if .ReblogsCount -}}
|
{{- if .ReblogsCount -}}
|
||||||
{{- if eq .ReblogsCount 1 -}}
|
{{- if eq .ReblogsCount 1 -}}
|
||||||
, 1 boost
|
, 1 boost
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
, {{ .ReblogsCount }} boosts
|
, {{ .ReblogsCount }} boosts
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,47 +20,30 @@
|
||||||
{{- with .Account }}
|
{{- with .Account }}
|
||||||
<address>
|
<address>
|
||||||
{{- if $.Local }}
|
{{- if $.Local }}
|
||||||
<a
|
<a href="{{- .URL -}}" rel="author" title="Open profile">
|
||||||
href="{{- .URL -}}"
|
{{- else }}
|
||||||
rel="author"
|
<a href="{{- .URL -}}" rel="author nofollow noreferrer noopener" target="_blank"
|
||||||
title="Open profile"
|
title="Open remote profile (opens in a new window)">
|
||||||
>
|
|
||||||
{{- 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)"
|
|
||||||
/>
|
|
||||||
{{- end }}
|
{{- end }}
|
||||||
<img
|
<picture class="avatar" aria-hidden="true">
|
||||||
src="{{- .Avatar -}}"
|
{{- if .AvatarAttachment }}
|
||||||
alt="Avatar for {{ .Username -}}"
|
<source srcset="{{- .AvatarStatic -}}" type="{{- .AvatarAttachment.PreviewMIMEType -}}"
|
||||||
title="Avatar for {{ .Username -}}"
|
media="(prefers-reduced-motion: reduce)" />
|
||||||
>
|
{{- end }}
|
||||||
</picture>
|
<img src="{{- .Avatar -}}" alt="Avatar for {{ .Username -}}" title="Avatar for {{ .Username -}}">
|
||||||
<div class="author-strap">
|
</picture>
|
||||||
<span class="displayname text-cutoff">
|
<div class="author-strapline">
|
||||||
{{- if .DisplayName -}}
|
<span class="displayname text-cutoff">
|
||||||
{{- emojify .Emojis (escape .DisplayName) -}}
|
{{- if .DisplayName -}}
|
||||||
{{- else -}}
|
{{- emojify .Emojis (escape .DisplayName) -}}
|
||||||
{{- .Username -}}
|
{{- else -}}
|
||||||
{{- end -}}
|
{{- .Username -}}
|
||||||
</span>
|
{{- end -}}
|
||||||
<span class="sr-only">,</span>
|
</span>
|
||||||
<span class="username text-cutoff">@{{- .Acct -}}</span>
|
<span class="sr-only">,</span>
|
||||||
</div>
|
<span class="username text-cutoff">@{{- .Acct -}}</span>
|
||||||
<span class="sr-only">(open profile)</span>
|
</div>
|
||||||
</a>
|
<span class="sr-only">(open profile)</span>
|
||||||
|
</a>
|
||||||
</address>
|
</address>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
@ -23,11 +23,11 @@
|
||||||
*/ -}}
|
*/ -}}
|
||||||
|
|
||||||
{{- define "votes" -}}
|
{{- define "votes" -}}
|
||||||
{{- if eq . 1 -}}
|
{{- if eq . 1 -}}
|
||||||
{{- . -}} vote
|
{{- . -}} vote
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
{{- . }} votes
|
{{- . }} votes
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
|
|
@ -51,14 +51,14 @@
|
||||||
<span class="total-votes">
|
<span class="total-votes">
|
||||||
{{- template "votes" .Poll.VotesCount -}}
|
{{- template "votes" .Poll.VotesCount -}}
|
||||||
{{- if .Poll.Expired -}}
|
{{- if .Poll.Expired -}}
|
||||||
total
|
total
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
so far
|
so far
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</span>
|
</span>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
<ul class="poll-options nodot">
|
<ul class="poll-options nodot">
|
||||||
{{- range $index, $pollOption := .PollOptions }}
|
{{- range $index, $pollOption := .PollOptions }}
|
||||||
<li class="poll-option">
|
<li class="poll-option">
|
||||||
<span class="sr-only">Option {{ increment $index }},</span>
|
<span class="sr-only">Option {{ increment $index }},</span>
|
||||||
<span lang="{{- .LanguageTag.TagStr -}}">{{ emojify .Emojis (noescape $pollOption.Title) }}</span>
|
<span lang="{{- .LanguageTag.TagStr -}}">{{ emojify .Emojis (noescape $pollOption.Title) }}</span>
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</ul>
|
</ul>
|
||||||
</figure>
|
</figure>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
|
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
<main>
|
<main>
|
||||||
<h2 id="tag-name" tabindex="-1">#{{- .tagName -}}</h2>
|
<h2 class="wrap-text" tabindex="-1">#{{- .tagName -}}</h2>
|
||||||
<p>There's nothing here!</p>
|
<p>There's nothing here!</p>
|
||||||
<p>
|
<p>
|
||||||
For privacy reasons, GoToSocial doesn't (yet) implement public web views of tag timelines.
|
For privacy reasons, GoToSocial doesn't (yet) implement public web views of tag timelines.
|
||||||
|
|
|
||||||
|
|
@ -18,81 +18,82 @@
|
||||||
*/ -}}
|
*/ -}}
|
||||||
|
|
||||||
{{- define "repliesSummary" -}}
|
{{- define "repliesSummary" -}}
|
||||||
{{- if .context.ThreadRepliesShown -}}
|
{{- if .context.ThreadRepliesShown -}}
|
||||||
{{- if .context.ThreadRepliesHidden -}}
|
{{- if .context.ThreadRepliesHidden -}}
|
||||||
{{- if eq .context.ThreadRepliesShown 1 -}}
|
{{- if eq .context.ThreadRepliesShown 1 -}}
|
||||||
{{- /* Some replies are hidden. */ -}}
|
{{- /* Some replies are hidden. */ -}}
|
||||||
{{ .context.ThreadRepliesShown }} visible reply
|
{{ .context.ThreadRepliesShown }} visible reply
|
||||||
{{- else if gt .context.ThreadRepliesShown 1 -}}
|
{{- else if gt .context.ThreadRepliesShown 1 -}}
|
||||||
{{ .context.ThreadRepliesShown }} visible replies
|
{{ .context.ThreadRepliesShown }} visible replies
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
; {{ .context.ThreadRepliesHidden }} more {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }} hidden or not public
|
; {{ .context.ThreadRepliesHidden }} more {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }}
|
||||||
{{- else -}}
|
hidden or not public
|
||||||
{{- /* No hidden replies. */ -}}
|
{{- else -}}
|
||||||
{{- if eq .context.ThreadReplies 1 -}}
|
{{- /* No hidden replies. */ -}}
|
||||||
{{ .context.ThreadReplies }} reply
|
{{- if eq .context.ThreadReplies 1 -}}
|
||||||
{{- else if gt .context.ThreadReplies 1 -}}
|
{{ .context.ThreadReplies }} reply
|
||||||
{{ .context.ThreadReplies }} replies
|
{{- else if gt .context.ThreadReplies 1 -}}
|
||||||
{{- end -}}
|
{{ .context.ThreadReplies }} replies
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- else -}}
|
{{- end -}}
|
||||||
{{- .context.ThreadRepliesHidden }} {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }} hidden or not public
|
{{- else -}}
|
||||||
{{- end -}}
|
{{- .context.ThreadRepliesHidden }} {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }} hidden or
|
||||||
|
not public
|
||||||
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "threadSummary" -}}
|
{{- define "threadSummary" -}}
|
||||||
{{- if .context.ThreadHidden -}}
|
{{- if .context.ThreadHidden -}}
|
||||||
{{- if eq .context.ThreadShown 1 -}}
|
{{- if eq .context.ThreadShown 1 -}}
|
||||||
Single visible post
|
Single visible post
|
||||||
{{- else if gt .context.ThreadShown 1 -}}
|
{{- else if gt .context.ThreadShown 1 -}}
|
||||||
Thread of {{ .context.ThreadShown }} visible posts
|
Thread of {{ .context.ThreadShown }} visible posts
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
; {{ .context.ThreadHidden }} more {{ if eq .context.ThreadHidden 1 }}post{{ else }}posts{{ end }} hidden or not public
|
; {{ .context.ThreadHidden }} more {{ if eq .context.ThreadHidden 1 }}post{{ else }}posts{{ end }} hidden or not public
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
{{- /* No hidden posts */ -}}
|
{{- /* No hidden posts */ -}}
|
||||||
{{- if eq .context.ThreadLength 1 -}}
|
{{- if eq .context.ThreadLength 1 -}}
|
||||||
Single post
|
Single post
|
||||||
{{- else if gt .context.ThreadLength 1 -}}
|
{{- else if gt .context.ThreadLength 1 -}}
|
||||||
Thread of {{ .context.ThreadLength }} posts
|
Thread of {{ .context.ThreadLength }} posts
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "repliesStart" -}}
|
{{- define "repliesStart" -}}
|
||||||
{{- with . }}
|
{{- with . }}
|
||||||
</section>
|
</section>
|
||||||
<section class="thread thread-replies" aria-labelledby="replies" open>
|
<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>
|
<h2 id="replies">{{- template "repliesSummary" . -}}</h2>
|
||||||
<a href="#thread-summary">back to top</a>
|
<a href="#thread-summary">back to top</a>
|
||||||
</div>
|
</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 }}
|
{{- 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