fixed profile-banner
This commit is contained in:
parent
44581c520b
commit
1288e8485c
|
|
@ -2,7 +2,7 @@
|
||||||
:root {
|
:root {
|
||||||
--white1: #fff;
|
--white1: #fff;
|
||||||
--white2: #777;
|
--white2: #777;
|
||||||
--gray1: #111;
|
--gray1: #1c1c1c;
|
||||||
--gray2: #222;
|
--gray2: #222;
|
||||||
--gray3: #333;
|
--gray3: #333;
|
||||||
--gray4: #444;
|
--gray4: #444;
|
||||||
|
|
@ -13,16 +13,16 @@
|
||||||
--blue1: #3a9fde;
|
--blue1: #3a9fde;
|
||||||
--blue2: #66befe;
|
--blue2: #66befe;
|
||||||
--blue3: #82d8fd;
|
--blue3: #82d8fd;
|
||||||
--error1: #860000;
|
--error1: #ff5555;
|
||||||
--error2: #ff9796;
|
--error2: #fddec6;
|
||||||
--error3: #dd2c2c;
|
--error3: #dd2c2c;
|
||||||
--error-link: #01318C;
|
--error-link: #01318C;
|
||||||
--green1: #94E749;
|
--green1: #baf39e;
|
||||||
--info-fg: var(--gray1);
|
--info-fg: var(--gray1);
|
||||||
--info-bg: #b3ddff;
|
--info-bg: #b3ddff;
|
||||||
--info-link: var(--error-link);
|
--info-link: var(--error-link);
|
||||||
--fg: var(--white1);
|
--fg: var(--white1);
|
||||||
--bg: var(--gray2);
|
--bg: var(--gray1);
|
||||||
--bg-trans: rgba(77, 78, 86, 0.62);
|
--bg-trans: rgba(77, 78, 86, 0.62);
|
||||||
--bg-accent: var(--gray3);
|
--bg-accent: var(--gray3);
|
||||||
--fg-accent: var(--blue3);
|
--fg-accent: var(--blue3);
|
||||||
|
|
|
||||||
|
|
@ -30,9 +30,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
-o-tab-size: 2;
|
font-size: 20px;
|
||||||
|
line-height: 1.25;
|
||||||
tab-size: 2;
|
tab-size: 2;
|
||||||
line-height: 1.15;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -97,7 +97,7 @@ select,
|
||||||
textarea {
|
textarea {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: 1.15;
|
line-height: 1.25;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -176,35 +176,55 @@ body {
|
||||||
'Apple Color Emoji',
|
'Apple Color Emoji',
|
||||||
'Segoe UI Emoji';
|
'Segoe UI Emoji';
|
||||||
}
|
}
|
||||||
|
nav
|
||||||
|
, nav *
|
||||||
|
, footer
|
||||||
|
, footer *
|
||||||
|
{ all: unset
|
||||||
|
; margin: 0
|
||||||
|
; padding: 0
|
||||||
|
; display: flex
|
||||||
|
; flex-wrap: wrap
|
||||||
|
; box-sizing: border-box
|
||||||
|
; font-family
|
||||||
|
: 'Kadwa'
|
||||||
|
, 'DejaVu Sans'
|
||||||
|
, 'PT Sans'
|
||||||
|
, 'Helvetica'
|
||||||
|
, 'Helvetica Rounded'
|
||||||
|
, sans-serif
|
||||||
|
}
|
||||||
|
nav
|
||||||
|
{ padding : 3rem 1rem
|
||||||
|
; justify-content: center
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding: 1rem;
|
padding: 0 1rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
max-width: 60rem;
|
max-width: 60rem;
|
||||||
gap: 1rem;
|
|
||||||
|
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
justify-content: space-evenly;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 2.4rem;
|
line-height: 2.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a:any-link {
|
||||||
transition: all 0.25s ease-out;
|
cursor: pointer;
|
||||||
color: var(--link-fg);
|
transition: box-shadow 0.25s ease-out;
|
||||||
|
color: var(--link-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|
@ -449,82 +469,77 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 3rem 1rem;
|
padding: 3rem 1rem;
|
||||||
gap: 2rem;
|
align-content: flex-end;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
footer *
|
.round
|
||||||
{ display: flex }
|
|
||||||
footer .round
|
|
||||||
{ border-radius: 999px }
|
{ border-radius: 999px }
|
||||||
footer .bg-icon
|
.bg-icon
|
||||||
{ background-image : url( '/button-gradient.svg' )
|
{ background-image :
|
||||||
, url('/icon.png') !important
|
url( '/button-gradient.svg' )
|
||||||
|
, url('/icon.png')
|
||||||
|
!important
|
||||||
}
|
}
|
||||||
footer img
|
footer img
|
||||||
{ max-width : 100vw
|
{ max-width: 100vw
|
||||||
; overflow : hidden
|
; overflow: hidden
|
||||||
}
|
|
||||||
footer .buttons
|
|
||||||
{ gap : 1rem
|
|
||||||
; padding : 1rem
|
|
||||||
; background : white
|
|
||||||
; flex-wrap : nowrap
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer .buttons img
|
.red { --b: #ff5555 }
|
||||||
{ height : 2rem }
|
.yellow { --b: #f4e7a3 }
|
||||||
|
.green { --b: #baf39e }
|
||||||
|
.blue { --b: #82d8fd }
|
||||||
|
.rose { --b: #fddec6 }
|
||||||
|
.teal { --b: #85F3CF }
|
||||||
|
.orange { --b: #ffbf57 }
|
||||||
|
.pink { --b: #FFA6FF }
|
||||||
|
.gray { --b: #ccc }
|
||||||
|
|
||||||
footer .buttons > *
|
.buttons
|
||||||
{ height : 2rem
|
{ gap: 1rem
|
||||||
; min-width : 2rem
|
; padding: 1rem
|
||||||
|
; background: white
|
||||||
|
; flex-wrap: nowrap
|
||||||
}
|
}
|
||||||
|
|
||||||
footer .buttons > a:any-link
|
.buttons img
|
||||||
|
{ height: 2rem }
|
||||||
|
|
||||||
|
.buttons > *
|
||||||
|
{ height: 2rem
|
||||||
|
; min-width: 2rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons > a:any-link
|
||||||
{ background :
|
{ background :
|
||||||
var( --b, #ccc )
|
var( --b, #ccc )
|
||||||
url( '/button-gradient.svg' )
|
url( '/button-gradient.svg' )
|
||||||
50% 50% no-repeat
|
50% 50% no-repeat
|
||||||
; background-size : cover
|
; background-size: cover
|
||||||
; box-shadow
|
; box-shadow
|
||||||
: inset 0 0 0 0.125rem #fff0
|
: inset 0 0 0 0.125rem #fff0
|
||||||
, 0 0 0 0.125rem #0000
|
, 0 0 0 0.125rem #0000
|
||||||
}
|
}
|
||||||
|
|
||||||
footer .buttons > a:any-link:is( :hover, :focus, :active )
|
.buttons > a:any-link:hover
|
||||||
|
, .buttons > a:any-link:focus
|
||||||
|
, .buttons > a:any-link:active
|
||||||
{ box-shadow
|
{ box-shadow
|
||||||
: inset 0 0 0 0.125rem #fff
|
: inset 0 0 0 0.125rem #fff
|
||||||
, 0 0 0 0.125rem var( --b, #ccc )
|
, 0 0 0 0.125rem var( --b, #808080 )
|
||||||
}
|
}
|
||||||
|
|
||||||
footer .buttons .group
|
.buttons .group
|
||||||
{ padding : 0 }
|
{ padding: 0 }
|
||||||
|
|
||||||
footer .buttons.round > *
|
.buttons.round > *
|
||||||
{ border-radius : 999px }
|
{ border-radius: 999px }
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
header {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer div {
|
|
||||||
text-align: initial;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.apps .applist {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji {
|
.emoji {
|
||||||
width: 1.45em;
|
width: 1.45em;
|
||||||
height: 1.45em;
|
height: 1.45em;
|
||||||
|
|
@ -652,20 +667,90 @@ label {
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
display: flex;
|
gap: 3rem;
|
||||||
flex-direction: column;
|
display: grid;
|
||||||
gap: 1rem;
|
grid-template-columns: 10rem 1fr;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
.about a {
|
||||||
|
border-radius: 0.125rem;
|
||||||
|
}
|
||||||
|
.about a[href^='https://dym.sh/'] {
|
||||||
|
color: var(--green1);
|
||||||
|
}
|
||||||
|
.about a:active,
|
||||||
|
.about a:focus,
|
||||||
|
.about a:hover {
|
||||||
|
background: var(--bg);
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 0.125rem var(--bg)
|
||||||
|
, 0 0 0 0.25rem var(--fg)
|
||||||
|
, 0 0 0 0.5rem var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.about h2 {
|
.about h1,
|
||||||
margin: 2rem 0 0 0;
|
.about h2,
|
||||||
}
|
.about h3 {
|
||||||
|
margin: 0;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--orange2);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.about ul,
|
.about ul,
|
||||||
.about p {
|
.about p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
}
|
||||||
|
.about ul {
|
||||||
|
padding-left: 0;
|
||||||
|
list-style: none;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
.col-2 {
|
||||||
|
columns: 2;
|
||||||
|
}
|
||||||
|
.about h1 + ul,
|
||||||
|
.about h2 + ul,
|
||||||
|
.about h3 + ul {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.about ul + h1,
|
||||||
|
.about ul + h2,
|
||||||
|
.about ul + h3,
|
||||||
|
.about ul: last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
ul li {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
ul li::before {
|
||||||
|
content: "–";
|
||||||
|
margin-left: -2rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
width: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.about {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
.about h2 {
|
||||||
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
.about .col-2.tablet-col-1 {
|
||||||
|
columns: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.account-card {
|
.account-card {
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
|
|
|
||||||
|
|
@ -9,166 +9,101 @@
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful,
|
This program is distributed in the hope that it will be useful,
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
GNU Affero General Public License for more details.
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
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/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.page {
|
.profile {
|
||||||
grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */
|
display: flex;
|
||||||
grid-template-columns: 1fr min(92%, 65rem) 1fr;
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.profile .header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 20rem;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile {
|
.profile .header > * {
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: var(--br);
|
border-radius: var(--br);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .column-split {
|
.profile figure {
|
||||||
display: flex;
|
margin: 0 0 0.5rem 0;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header {
|
|
||||||
background: var(--profile-bg);
|
|
||||||
border-radius: var(--br);
|
border-radius: var(--br);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 1rem;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.profile figure img.bg {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .header .header-image {
|
.profile figure img.avatar {
|
||||||
position: relative;
|
margin: 0.5rem;
|
||||||
padding-top: 33.33%;
|
width: 5rem;
|
||||||
}
|
height: 5rem;
|
||||||
|
z-index: 2;
|
||||||
/* aspect-ratio 1/3 */
|
object-fit: fill;
|
||||||
|
border-radius: var(--br);
|
||||||
.profile .header .header-image img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
-o-object-fit: cover;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header {
|
|
||||||
--avatar-size: 8.5rem;
|
|
||||||
--name-size: 3rem;
|
|
||||||
--username-size: 2rem;
|
|
||||||
|
|
||||||
--overlap: calc(var(--avatar-size) - var(--name-size) - var(--username-size));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
.profile .header .user {
|
||||||
Basic info container has the user's avatar, display- and username, and role
|
background: var(--profile-bg);
|
||||||
It's partially overlapped over the header image, by a negative margin-top
|
display: flex;
|
||||||
*/
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
.profile .header .basic-info {
|
padding: 1rem;
|
||||||
position: relative;
|
|
||||||
display: grid;
|
|
||||||
box-sizing: border-box;
|
|
||||||
grid-template-columns: var(--avatar-size) auto 1fr;
|
|
||||||
grid-template-rows: var(--overlap) var(--name-size) auto;
|
|
||||||
grid-template-areas:
|
|
||||||
" avatar . . . "
|
|
||||||
" avatar displayname displayname stats "
|
|
||||||
" avatar username role stats ";
|
|
||||||
|
|
||||||
margin: 1rem;
|
|
||||||
margin-top: calc(-1 * var(--overlap));
|
|
||||||
gap: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header .basic-info .avatar {
|
|
||||||
grid-area: avatar;
|
|
||||||
height: var(--avatar-size);
|
|
||||||
width: var(--avatar-size);
|
|
||||||
border: 0.2rem solid var(--avatar-border);
|
|
||||||
border-radius: var(--br);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* prevents image extending beyond rounded borders */
|
|
||||||
|
|
||||||
.profile .header .basic-info .avatar img {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
-o-object-fit: cover;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header .basic-info .displayname {
|
|
||||||
grid-area: displayname;
|
|
||||||
line-height: var(--name-size);
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header .basic-info .username {
|
|
||||||
min-width: 0;
|
|
||||||
grid-area: username;
|
|
||||||
line-height: var(--username-size);
|
|
||||||
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--fg-accent);
|
|
||||||
-webkit-user-select: all;
|
|
||||||
user-select: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header .basic-info .role {
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--fg);
|
|
||||||
|
|
||||||
border: 0.1rem solid var(--bg);
|
|
||||||
grid-area: role;
|
|
||||||
align-self: center;
|
|
||||||
justify-self: start;
|
|
||||||
border-radius: var(--br);
|
|
||||||
padding: 0.25rem 0.5rem 0.35rem 0.5rem;
|
|
||||||
line-height: 0.75rem;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-variant: small-caps;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header .basic-info .role.admin {
|
|
||||||
color: var(--role-admin);
|
|
||||||
border-color: var(--role-admin);
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header .basic-info .role.moderator {
|
|
||||||
color: var(--role-mod);
|
|
||||||
border-color: var(--role-mod);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 750px) {
|
|
||||||
.profile .header .basic-info {
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
grid-template-rows: var(--avatar-size) var(--name-size) auto;
|
|
||||||
grid-template-areas:
|
|
||||||
" avatar avatar "
|
|
||||||
" displayname displayname "
|
|
||||||
" username role "
|
|
||||||
" stats stats ";
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .header .basic-info .displayname {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .col-header h1, .profile .col-header h2 {
|
.profile .header .displayname {
|
||||||
font-size: 1.2rem;
|
line-height: 1.25rem;
|
||||||
line-height: 1.3rem;
|
font-size: 1rem;
|
||||||
margin: 0;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile .header .username {
|
||||||
|
min-width: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--fg-accent);
|
||||||
|
-webkit-user-select: all;
|
||||||
|
user-select: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .header .role {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
|
||||||
|
border: 0.075rem solid var(--bg);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
z-index: 2;
|
||||||
|
line-height: 0.75em;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-variant: small-caps;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .header .role.admin {
|
||||||
|
color: var(--role-admin);
|
||||||
|
border-color: var(--role-admin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .header .role.moderator {
|
||||||
|
color: var(--role-mod);
|
||||||
|
border-color: var(--role-mod);
|
||||||
|
}
|
||||||
|
|
||||||
.profile .toots {
|
.profile .toots {
|
||||||
flex: 65 25rem;
|
flex: 65 25rem;
|
||||||
|
|
@ -178,105 +113,82 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .toots .col-header {
|
.profile .toots .col-header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .toots .col-header a {
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .rss-icon .fa {
|
|
||||||
font-size: 2rem;
|
|
||||||
-o-object-fit: contain;
|
|
||||||
object-fit: contain;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: var(--orange2);
|
|
||||||
/* can't size a single-color background, so we use a linear-gradient that's effectively white */
|
|
||||||
background: linear-gradient(to right, var(--white1) 100%, transparent 0) no-repeat center center;
|
|
||||||
background-size: 1.2rem 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .toots .toot {
|
|
||||||
border-radius: var(--br);
|
|
||||||
}
|
|
||||||
.toot .info {
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .toots .backnextlinks {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .toots .backnextlinks .next {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .about-user {
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
.profile .about-user > * {
|
|
||||||
|
.profile .toots .col-header a {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .toots .toot {
|
||||||
|
border-radius: var(--br);
|
||||||
|
}
|
||||||
|
.toot .info {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.toot .info {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .toots .backnextlinks {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .toots .backnextlinks .next {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .col-header {
|
||||||
|
margin-bottom: -0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.profile > * {
|
||||||
border-radius: var(--br);
|
border-radius: var(--br);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .about-user .col-header {
|
.profile .fields {
|
||||||
margin-bottom: -0.25rem;
|
background: var(--profile-bg);
|
||||||
}
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
.profile .about-user .fields {
|
padding: 0.5rem;
|
||||||
background: var(--profile-bg);
|
}
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto auto;
|
.profile .fields > * {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
.profile .fields > b {
|
||||||
.profile .about-user .fields > * {
|
align-self: center;
|
||||||
padding: 0.5rem;
|
justify-self: flex-end;
|
||||||
}
|
font-weight: 600;
|
||||||
.profile .about-user .fields > b {
|
}
|
||||||
align-self: center;
|
.profile .fields > span + b,
|
||||||
justify-self: flex-end;
|
.profile .fields > time + b {
|
||||||
}
|
border-top: 0.1rem solid var(--gray2);
|
||||||
.profile .about-user .fields > span {
|
align-self: flex-start;
|
||||||
}
|
text-align: right;
|
||||||
.profile .about-user .fields > span + b {
|
}
|
||||||
border-top: 0.1rem solid var(--gray2);
|
|
||||||
}
|
.profile .rss-icon,
|
||||||
|
.profile .rss-icon img {
|
||||||
.profile .about-user .bio {
|
width: 20px;
|
||||||
background: var(--profile-bg);
|
height: 20px;
|
||||||
padding: 1rem;
|
}
|
||||||
}
|
|
||||||
|
.profile .fields .flex,
|
||||||
.profile .accountstats {
|
.profile .fields .flex * {
|
||||||
grid-area: stats;
|
display: flex;
|
||||||
display: grid;
|
line-height: 1rem;
|
||||||
grid-auto-flow: column;
|
gap: 0.5rem;
|
||||||
grid-template: repeat(2, 1fr) / repeat(4, auto);
|
align-items: center;
|
||||||
gap: 0 1rem;
|
}
|
||||||
align-self: center;
|
|
||||||
}
|
.profile .bio {
|
||||||
|
background: var(--profile-bg);
|
||||||
.profile .accountstats > * {
|
padding: 1rem;
|
||||||
padding: 0.5rem;
|
|
||||||
justify-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .accountstats > *,
|
|
||||||
.profile .accountstats > * > * {
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25rem;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .accountstats > b {
|
|
||||||
border-bottom: 0.1rem solid var(--gray2);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -495,16 +495,10 @@ a.plyr__control{text-decoration:none}
|
||||||
.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
|
.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
|
||||||
.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
|
.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
|
||||||
.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}
|
.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}
|
||||||
.plyr--full-ui input[type=range]::-ms-track{color:#0000}
|
|
||||||
.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
|
|
||||||
.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
|
|
||||||
.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
|
|
||||||
.plyr--full-ui input[type=range]::-ms-tooltip{display:none}
|
|
||||||
.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}
|
.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}
|
||||||
.plyr--full-ui input[type=range]:focus{outline:0}
|
.plyr--full-ui input[type=range]:focus{outline:0}
|
||||||
.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
||||||
.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
||||||
.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
|
|
||||||
.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}
|
.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}
|
||||||
.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}
|
.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}
|
||||||
.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}
|
.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}
|
||||||
|
|
@ -528,7 +522,6 @@ a.plyr__control{text-decoration:none}
|
||||||
.plyr__progress__buffer::-webkit-progress-bar{background:#0000}
|
.plyr__progress__buffer::-webkit-progress-bar{background:#0000}
|
||||||
.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}
|
.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}
|
||||||
.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}
|
.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}
|
||||||
.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}
|
|
||||||
.plyr--loading .plyr__progress__buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}
|
.plyr--loading .plyr__progress__buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}
|
||||||
.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}
|
.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}
|
||||||
.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
|
.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
|
||||||
|
|
@ -540,10 +533,8 @@ a.plyr__control{text-decoration:none}
|
||||||
.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}
|
.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}
|
||||||
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
|
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
|
||||||
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
|
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
|
||||||
.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
|
|
||||||
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
|
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
|
||||||
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
|
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
|
||||||
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
|
|
||||||
.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
|
.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
|
||||||
.plyr--video{overflow:hidden}
|
.plyr--video{overflow:hidden}
|
||||||
.plyr--video.plyr--menu-open{overflow:visible}
|
.plyr--video.plyr--menu-open{overflow:visible}
|
||||||
|
|
@ -563,10 +554,8 @@ a.plyr__control{text-decoration:none}
|
||||||
.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}
|
.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}
|
||||||
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
|
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
|
||||||
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
|
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
|
||||||
.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
|
|
||||||
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
|
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
|
||||||
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
|
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
|
||||||
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
|
|
||||||
.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}
|
.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}
|
||||||
.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
|
.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
|
||||||
.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
|
.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
|
||||||
|
|
|
||||||
|
|
@ -10,91 +10,81 @@
|
||||||
//
|
//
|
||||||
// This program is distributed in the hope that it will be useful,
|
// This program is distributed in the hope that it will be useful,
|
||||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
// GNU Affero General Public License for more details.
|
// GNU Affero General Public License for more details.
|
||||||
//
|
//
|
||||||
// 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/>.
|
||||||
*/ -}}
|
*/ -}}
|
||||||
{{ template "header.tmpl" .}}
|
{{ template "header.tmpl" .}}
|
||||||
<main class="about">
|
<main class="about">
|
||||||
<h1>fediverse</h1>
|
<h1>/about</h1>
|
||||||
<div>
|
|
||||||
{{.instance.Description | noescape}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>social profiles</h2>
|
<p>Personal homepage of <a href="https://dym.sh/self/">Dym Sohin</a>, a professional Web/App/Ui Developer
|
||||||
<ul>
|
|
||||||
<li><a href="https://dym.sh/@dym">microblog</a></li>
|
|
||||||
<li><a href="https://lemmy.world/u/dym_sh">lemmy</a></li>
|
|
||||||
<li><a href="https://figma.com/@dym_sh">figma</a></li>
|
|
||||||
<li><a href="https://codepen.io/dym-sh">codepen</a></li>
|
|
||||||
<li><a href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
|
|
||||||
<li><a href="mailto:re@dym.sh">email</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>server software</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://gotosocial.org" target="_blank">GoToSocial</a></li>
|
|
||||||
<li>official <a href="https://github.com/superseriousbusiness/gotosocial" target="_blank">source code</a></li>
|
|
||||||
<li>my <a href="https://source.garden/styles/gts-web/" target="_blank">custom templates</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>features</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
Registration is
|
|
||||||
{{if .instance.Registrations}}
|
|
||||||
enabled{{if .instance.ApprovalRequired}}, but requires admin approval{{end}}.
|
|
||||||
{{else}}
|
|
||||||
disabled.
|
|
||||||
{{end}}
|
|
||||||
</li>
|
|
||||||
{{if .instance.Configuration.Accounts.AllowCustomCSS}}
|
|
||||||
<li>
|
|
||||||
Users are allowed to set <a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css/"
|
|
||||||
target="_blank" rel="noopener noreferrer">Custom CSS</a> for their profiles.
|
|
||||||
</li>
|
|
||||||
{{end}}
|
|
||||||
<li>
|
|
||||||
Toots can contain up to {{.instance.Configuration.Statuses.MaxCharacters}} characters and
|
|
||||||
{{.instance.Configuration.Statuses.MaxMediaAttachments}} media attachments.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Polls can have up to {{.instance.Configuration.Polls.MaxOptions}} options, with
|
|
||||||
{{.instance.Configuration.Polls.MaxCharactersPerOption}} characters each.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>moderated servers</h2>
|
|
||||||
<p>
|
|
||||||
ActivityPub instances exchange (federate) data with other servers, including accounts and toots.
|
|
||||||
This can be prevented for specific domains by suspending them. None of their content is stored,
|
|
||||||
and interaction with their users is blocked both ways.</br>
|
|
||||||
{{if .blocklistExposed}}
|
|
||||||
<a href="/about/suspended">View the list of suspended domains</a>
|
|
||||||
{{else}}
|
|
||||||
This instance does not publically share this list.
|
|
||||||
{{end}}
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>stats</h2>
|
<h2>(self-imposed)<br>terms of service</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Users: <span class="count">{{.instance.Stats.user_count}}</span></li>
|
<li>no hate</li>
|
||||||
<li>Posts: <span class="count">{{.instance.Stats.status_count}}</span></li>
|
<li>no drama</li>
|
||||||
<li>Federates with: <span class="count">{{.instance.Stats.domain_count}}</span> instances</li>
|
<li>no bullshit</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>content license</h2>
|
||||||
|
<section>
|
||||||
|
<p>Unless noted otherwise,</p>
|
||||||
|
<ul>
|
||||||
|
<li>texts, pictures, and audio/visual media are distributed under
|
||||||
|
<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>
|
||||||
|
</li>
|
||||||
|
<li>code snippets are distributed under
|
||||||
|
<a href="https://spdx.org/licenses/0BSD.html" target="_blank">0BSD</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>(regular use within fediverse and blogosphere already complies with those by default)
|
||||||
|
</p>
|
||||||
|
<p>you can <a href="https://dym.sh/contacts/">contact</a> me for other uses (i.e. commercial distribution)
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h2>fediverse</h2>
|
||||||
|
<ul class="col-2 tablet-col-1">
|
||||||
|
<li>server runs on <a href="https://gotosocial.org" target="_blank">GoToSocial</a></li>
|
||||||
|
<li>see official <a href="https://github.com/superseriousbusiness/gotosocial" target="_blank">source code</a> repo</li>
|
||||||
|
<li>also applied my <a href="https://source.garden/styles/gts-web/" target="_blank">custom templates</a></li>
|
||||||
|
<li>posts can contain up to {{.instance.Configuration.Statuses.MaxCharacters}} characters and
|
||||||
|
{{.instance.Configuration.Statuses.MaxMediaAttachments}} media attachments
|
||||||
|
</li>
|
||||||
|
<li>polls can have up to {{.instance.Configuration.Polls.MaxOptions}} options, with
|
||||||
|
{{.instance.Configuration.Polls.MaxCharactersPerOption}} characters each
|
||||||
|
</li>
|
||||||
|
<li>federating with <span class="count">{{.instance.Stats.domain_count}}</span> instances</li>
|
||||||
|
<li>list of <a href="/about/suspended" target="_blank">suspended domians</a></a>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>social profiles</h2>
|
||||||
|
<ul class="col-2">
|
||||||
|
<li><a target="_blank" href="mailto:re@dym.sh">email</a></li>
|
||||||
|
<li><a target="_blank" href="https://dym.sh/@dym">microblog</a></li>
|
||||||
|
<li><a target="_blank" href="https://lemmy.world/u/dym_sh">lemmy</a></li>
|
||||||
|
<li><a target="_blank" href="https://figma.com/@dym_s h">figma</a></li>
|
||||||
|
<li><a target="_blank" href="https://layers.to/dym_sh">layers</a></li>
|
||||||
|
<li><a target="_blank" href="https://codepen.io/dym-sh">codepen</a></li>
|
||||||
|
<li><a target="_blank" href="https://userstyles.world/user/dym-sh">userstyles</a></li>
|
||||||
|
<li><a target="_blank" href="https://github/dym-sh">github</a></li>
|
||||||
|
<li><a target="_blank" href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="buttons round">
|
<div class="buttons round">
|
||||||
<a href="/"
|
<a href="/"
|
||||||
class="bg-icon"
|
class="bg-icon"
|
||||||
title="/"
|
title="/"
|
||||||
><span class="hidden">/</span>
|
><span class="hidden">/</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -73,3 +73,18 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<nav class="c">
|
||||||
|
<div class="buttons round">
|
||||||
|
<a href="/graphics/" class="red" title="graphics"><span class="hidden">graphics</span>
|
||||||
|
</a>
|
||||||
|
<a href="/photos/" class="yellow" title="photos"><span class="hidden">photos</span>
|
||||||
|
</a>
|
||||||
|
<a href="/comics/" class="green" title="comics"><span class="hidden">comics</span>
|
||||||
|
</a>
|
||||||
|
<a href="/code/" class="blue" title="code"><span class="hidden">code</span>
|
||||||
|
</a>
|
||||||
|
<a href="/notes/" class="rose" title="notes"><span class="hidden">notes</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -20,110 +20,98 @@
|
||||||
{{ template "header.tmpl" .}}
|
{{ template "header.tmpl" .}}
|
||||||
|
|
||||||
<main class="profile">
|
<main class="profile">
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="header-image">
|
|
||||||
{{ if .account.Header }}
|
<section class="user">
|
||||||
<img src="{{.account.Header}}" alt="" />
|
<figure>
|
||||||
{{ end }}
|
<img src="{{.account.Header}}" class="bg" alt="">
|
||||||
</div>
|
<img src="{{.account.Avatar}}" class="avatar" alt="">
|
||||||
<div class="basic-info" aria-hidden="true">
|
{{ if and (.account.Role) (ne .account.Role.Name "user") }}
|
||||||
<a class="avatar" href="{{.account.Avatar}}">
|
<figcaption class="role {{ .account.Role.Name }}">
|
||||||
<img src="{{.account.Avatar}}" alt="">
|
{{ if and (.account.Role) (eq .account.Role.Name "admin") }}
|
||||||
</a>
|
webmain
|
||||||
<span class="displayname text-cutoff">
|
{{ else }}
|
||||||
|
{{ .account.Role.Name }}
|
||||||
|
{{ end }}
|
||||||
|
</figcaption>
|
||||||
|
{{ end }}
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="displayname">
|
||||||
{{if .account.DisplayName}}
|
{{if .account.DisplayName}}
|
||||||
{{emojify .account.Emojis (escape .account.DisplayName)}}
|
{{emojify .account.Emojis (escape .account.DisplayName)}}
|
||||||
{{else}}
|
{{else}}
|
||||||
{{.account.Username}}
|
{{.account.Username}}
|
||||||
{{end}}
|
{{end}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="username">@{{.account.Username}}@{{.instance.AccountDomain}}</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bio">
|
||||||
|
{{ if .account.Note }}
|
||||||
|
{{emojify .account.Emojis (noescape .account.Note)}}
|
||||||
|
{{else}}
|
||||||
|
no bio
|
||||||
|
{{end}}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="fields">
|
||||||
|
{{ range .account.Fields }}
|
||||||
|
<b>{{emojify $.account.Emojis (noescape .Name)}}</b>
|
||||||
|
<span>{{emojify $.account.Emojis (noescape .Value)}}</span>
|
||||||
|
{{ end }}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="fields">
|
||||||
|
<b>joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
|
||||||
|
<b>followers</b><span>{{.account.FollowersCount}}</span>
|
||||||
|
<b>follows</b><span>{{.account.FollowingCount}}</span>
|
||||||
|
<b>posts</b><span class="flex">
|
||||||
|
<span>{{.account.StatusesCount}}</span>
|
||||||
|
{{ if .rssFeed }}
|
||||||
|
<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed">
|
||||||
|
<img src="/rss.svg" width="20" height="20">
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
</span>
|
</span>
|
||||||
<span class="username text-cutoff">@{{.account.Username}}@{{.instance.AccountDomain}}</span>
|
</section>
|
||||||
{{- /* Only render account role if 1. it's present and 2. it's not equal to the standard 'user' role */ -}}
|
</div>
|
||||||
{{ if and (.account.Role) (ne .account.Role.Name "user") }}
|
|
||||||
<div class="role {{ .account.Role.Name }}">
|
|
||||||
{{ if and (.account.Role) (eq .account.Role.Name "admin") }}
|
|
||||||
webmain
|
|
||||||
{{ else }}
|
|
||||||
{{ .account.Role.Name }}
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<div class="accountstats">
|
<section class="toots">
|
||||||
<b>joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
|
{{ if .pinned_statuses }}
|
||||||
<b>posts</b><span>
|
<section class="thread">
|
||||||
{{ if .rssFeed }}
|
{{ range .pinned_statuses }}
|
||||||
<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed">
|
<article class="toot expanded" id="{{.ID}}">
|
||||||
<img src="/rss.svg" width="20" height="20">
|
{{ template "status_profile.tmpl" .}}
|
||||||
</a>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<span>{{.account.StatusesCount}}</span>
|
</section>
|
||||||
</span>
|
{{ end }}
|
||||||
<b>followers</b><span>{{.account.FollowersCount}}</span>
|
|
||||||
<b>follows</b><span>{{.account.FollowingCount}}</span>
|
<section class="thread">
|
||||||
</div>
|
{{ if not .statuses }}
|
||||||
|
<div data-nosnippet class="nothinghere">Nothing here!</div>
|
||||||
|
{{ else }}
|
||||||
|
{{ range .statuses }}
|
||||||
|
<article class="toot expanded" id="{{.ID}}">
|
||||||
|
{{ template "status_profile.tmpl" .}}
|
||||||
|
</article>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="backnextlinks">
|
||||||
|
{{ if .show_back_to_top }}
|
||||||
|
<a href="/@{{ .account.Username }}">Back to top</a>
|
||||||
|
{{ end }}
|
||||||
|
{{ if .statuses_next }}
|
||||||
|
<a href="{{ .statuses_next }}" class="next">Show older</a>
|
||||||
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column-split">
|
|
||||||
|
|
||||||
<section class="about-user">
|
|
||||||
|
|
||||||
<div class="bio">
|
|
||||||
{{ if .account.Note }}
|
|
||||||
{{emojify .account.Emojis (noescape .account.Note)}}
|
|
||||||
{{else}}
|
|
||||||
no bio
|
|
||||||
{{end}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fields">
|
|
||||||
{{ range .account.Fields }}
|
|
||||||
<b>{{emojify $.account.Emojis (noescape .Name)}}</b>
|
|
||||||
<span>{{emojify $.account.Emojis (noescape .Value)}}</span>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="toots">
|
|
||||||
{{ if .pinned_statuses }}
|
|
||||||
<div class="col-header">
|
|
||||||
<h2>Pinned posts</h2>
|
|
||||||
<a href="#recent">jump to recent</a>
|
|
||||||
</div>
|
|
||||||
<section class="thread">
|
|
||||||
{{ range .pinned_statuses }}
|
|
||||||
<article class="toot expanded" id="{{.ID}}">
|
|
||||||
{{ template "status_profile.tmpl" .}}
|
|
||||||
</article>
|
|
||||||
{{ end }}
|
|
||||||
</section>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<section class="thread">
|
|
||||||
{{ if not .statuses }}
|
|
||||||
<div data-nosnippet class="nothinghere">Nothing here!</div>
|
|
||||||
{{ else }}
|
|
||||||
{{ range .statuses }}
|
|
||||||
<article class="toot expanded" id="{{.ID}}">
|
|
||||||
{{ template "status_profile.tmpl" .}}
|
|
||||||
</article>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="backnextlinks">
|
|
||||||
{{ if .show_back_to_top }}
|
|
||||||
<a href="/@{{ .account.Username }}">Back to top</a>
|
|
||||||
{{ end }}
|
|
||||||
{{ if .statuses_next }}
|
|
||||||
<a href="{{ .statuses_next }}" class="next">Show older</a>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{{ template "footer.tmpl" .}}
|
{{ template "footer.tmpl" .}}
|
||||||
|
|
@ -85,6 +85,6 @@
|
||||||
{{if .Pinned}}
|
{{if .Pinned}}
|
||||||
<span>/pinned</span>
|
<span>/pinned</span>
|
||||||
{{end}}{{if .RepliesCount | eq 0 | not}}
|
{{end}}{{if .RepliesCount | eq 0 | not}}
|
||||||
<span>replies:{{.RepliesCount}}</span>
|
<span>replies: {{.RepliesCount}}</span>
|
||||||
{{end}}
|
{{end}}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
Reference in New Issue