diff --git a/about.png b/about.png
new file mode 100644
index 0000000..9c77904
Binary files /dev/null and b/about.png differ
diff --git a/assets/dist/base.css b/assets/dist/base.css
index 068d2b6..71c4cb8 100644
--- a/assets/dist/base.css
+++ b/assets/dist/base.css
@@ -65,10 +65,6 @@ pre {
font-size: 1em;
}
-pre {
- max-width: 35rem;
-}
-
small {
font-size: 80%;
}
@@ -184,8 +180,6 @@ nav
, nav *
, footer
, footer *
-, aside
-, aside *
{ all: unset
; margin: 0
; padding: 0
@@ -220,52 +214,7 @@ body {
display: none;
}
-aside {
- gap: 1.25rem;
- justify-content: center;
- margin-bottom: 3rem;
-}
-aside a {
- flex-basis: 7rem;
- justify-content: center;
- border-radius: 0.125rem;
- padding: 0.5rem 1rem;
- border: 0.125rem solid var(--green1);
-}
-aside a:active,
-aside a:focus,
-aside a:hover {
- background: var(--bg);
- box-shadow:
- 0 0 0 0.125rem var(--bg)
- , 0 0 0 0.25rem var(--green1)
- ;
-}
-aside a
-, aside a > span
-, aside a:any-link
-, aside a:any-link > span {
- color: var(--green1);
-}
-aside a:any-link > span {
- text-decoration: underline;
-}
-aside a.current {
- border: 0.125rem dotted var(--orange2);
-}
-aside a.current
-, aside a.current > span {
- color: var(--orange2);
- cursor: unset;
- text-decoration: unset;
-}
-aside a.current:active,
-aside a.current:focus,
-aside a.current:hover {
- background: unset;
- box-shadow: unset;
-}
h1 {
margin: 0;
@@ -719,23 +668,6 @@ label {
}
-ul {
- padding: 1rem 0;
- margin: 0;
-}
-ul li {
- list-style: none;
- margin-left: 1rem;
-}
-ul li::before {
- content: "–";
- margin-left: -2rem;
- padding-right: 0.5rem;
- width: 2rem;
- display: inline-block;
- text-align: right;
-}
-
.about {
gap: 3rem;
display: grid;
@@ -745,8 +677,7 @@ ul li::before {
.about a {
border-radius: 0.125rem;
}
-.about a[href^='https://dym.sh/']
-, .about a[href^='/'] {
+.about a[href^='https://dym.sh/'] {
color: var(--green1);
}
.about a:active,
@@ -773,6 +704,11 @@ ul li::before {
.about p {
margin: 0;
}
+.about ul {
+ padding-left: 0;
+ list-style: none;
+ padding: 1rem 0;
+}
.col-2 {
columns: 2;
}
@@ -787,6 +723,17 @@ ul li::before {
.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) {
diff --git a/assets/dist/profile.css b/assets/dist/profile.css
index f86973c..5466056 100644
--- a/assets/dist/profile.css
+++ b/assets/dist/profile.css
@@ -1,4 +1,3 @@
-
/*
GoToSocial
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
@@ -10,180 +9,101 @@
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
+ 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 .
+ along with this program. If not, see .
*/
-.page {
- grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */
- grid-template-columns: 1fr min(92%, 65rem) 1fr;
+.profile {
+ display: flex;
+ gap: 1rem;
+}
+.profile .header {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ justify-content: flex-start;
+ width: 20rem;
+ word-break: break-all;
}
-.profile {
- padding: 0.5rem;
+.profile .header > * {
border-radius: var(--br);
}
-.profile .column-split {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
- }
-
-.profile .header {
- background: var(--profile-bg);
+.profile figure {
+ margin: 0 0 0.5rem 0;
border-radius: var(--br);
overflow: hidden;
- margin-bottom: 1rem;
-}
-
-.profile .header .header-image {
- position: relative;
- padding-top: 33.33%;
- }
-
-/* aspect-ratio 1/3 */
-
-.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));
-}
-
-/*
- Basic info container has the user's avatar, display- and username, and role
- It's partially overlapped over the header image, by a negative margin-top
- */
-
-.profile .header .basic-info {
- 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"
- "avatar username role";
-
- 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.13rem solid var(--bg);
-
- grid-area: role;
- align-self: center;
- justify-self: start;
- border-radius: var(--br);
- padding: 0.3rem;
-
- line-height: 1.1rem;
- font-size: 0.9rem;
- font-variant: small-caps;
- font-weight: bold;
- }
-
-.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";
- }
-
- .profile .header .basic-info .displayname {
- font-size: 1.4rem;
- }
-}
-
-.profile .col-header {
display: flex;
- justify-content: start;
- gap: 2rem;
- align-items: center;
-
- margin: 0;
- background: var(--profile-bg);
- border-top-left-radius: var(--br);
- border-top-right-radius: var(--br);
- padding: 0.75rem;
+ justify-content: space-between;
+ position: relative;
+}
+.profile figure img.bg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ object-fit: cover;
}
-.profile .col-header h1, .profile .col-header h2 {
- font-size: 1.2rem;
- line-height: 1.3rem;
- margin: 0;
- }
+.profile figure img.avatar {
+ margin: 0.5rem;
+ width: 5rem;
+ height: 5rem;
+ z-index: 2;
+ object-fit: fill;
+ border-radius: var(--br);
+}
+
+.profile .header .user {
+ background: var(--profile-bg);
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ padding: 1rem;
+}
+
+.profile .header .displayname {
+ line-height: 1.25rem;
+ font-size: 1rem;
+ 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 {
flex: 65 25rem;
@@ -193,95 +113,82 @@
}
.profile .toots .col-header {
- display: grid;
- grid-template-columns: auto 1fr;
- gap: 1rem;
- }
-
-.profile .toots .col-header a {
- justify-self: end;
- }
-
-.profile .toots .col-header .rss-icon {
- display: block;
- margin: -0.25rem 0;
- }
-
-.profile .toots .col-header .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: 0;
- }
-
-.profile .toots .toot .info {
- padding: 0.3rem 0.75rem;
- }
-
-.profile .toots .toot:last-child {
- border-bottom-left-radius: var(--br);
- border-bottom-right-radius: var(--br);
- }
-
-.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;
+ display: grid;
+ grid-template-columns: auto 1fr;
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);
}
-.profile .about-user .col-header {
- margin-bottom: -0.25rem;
- }
-
-.profile .about-user .fields {
- background: var(--profile-bg);
- display: grid;
- grid-template: max-content 1fr;
- padding: 0 0.5rem;
- }
-
-.profile .about-user .fields .field + .field {
- border-top: 0.1rem solid var(--gray2);
- }
-
-.profile .about-user .bio {
- background: var(--profile-bg);
- padding: 1rem;
- }
-
-.profile .about-user .accountstats {
- background: var(--bg-accent);
- padding: 1rem;
-
- display: grid;
- grid-template-columns: auto auto;
- gap: 0.5rem 1rem;
- }
-.profile .about-user .accountstats > b {
- justify-self: end;
- font-weight: normal;
+.profile .fields {
+ background: var(--profile-bg);
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ padding: 0.5rem;
}
-.profile .about-user .accountstats > b + * {
- justify-self: start;
+
+.profile .fields > * {
+ padding: 0.5rem;
+}
+.profile .fields > b {
+ align-self: center;
+ justify-self: flex-end;
+ font-weight: 600;
+}
+.profile .fields > span + b,
+.profile .fields > time + b {
+ border-top: 0.1rem solid var(--gray2);
+ align-self: flex-start;
+ text-align: right;
+}
+
+.profile .rss-icon,
+.profile .rss-icon img {
+ width: 20px;
+ height: 20px;
+}
+
+.profile .fields .flex,
+.profile .fields .flex * {
+ display: flex;
+ line-height: 1rem;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.profile .bio {
+ background: var(--profile-bg);
+ padding: 1rem;
}
diff --git a/assets/dist/settings-style.css b/assets/dist/settings-style.css
index 39a0dd0..f11e308 100644
--- a/assets/dist/settings-style.css
+++ b/assets/dist/settings-style.css
@@ -221,7 +221,7 @@ nav.menu-tree li.nested a.title {
padding-left: 1rem;
font-weight: normal;
color: var(--fg);
- background: var(--gray4);
+ background: var(--gray3);
}
nav.menu-tree li.nested a.title:focus {
diff --git a/assets/dist/status.css b/assets/dist/status.css
index 0deef5b..c6310f3 100644
--- a/assets/dist/status.css
+++ b/assets/dist/status.css
@@ -1,46 +1,46 @@
-
-@charset "UTF-8";
-/*
- GoToSocial
- Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
- 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 .
-*/
-/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
+
+@charset "UTF-8";
+/*
+ GoToSocial
+ Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+ 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 .
+*/
+/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
.pswp {
- --pswp-bg: #000;
- --pswp-placeholder-bg: #222;
-
+ --pswp-bg: #000;
+ --pswp-placeholder-bg: #222;
- --pswp-root-z-index: 100000;
-
- --pswp-preloader-color: rgba(79, 79, 79, 0.4);
- --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
-
- /* defined via js:
- --pswp-transition-duration: 333ms; */
-
- --pswp-icon-color: #fff;
- --pswp-icon-color-secondary: #4f4f4f;
- --pswp-icon-stroke-color: #4f4f4f;
- --pswp-icon-stroke-width: 2px;
- --pswp-error-text-color: var(--pswp-icon-color);
-}
+ --pswp-root-z-index: 100000;
+
+ --pswp-preloader-color: rgba(79, 79, 79, 0.4);
+ --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
+
+ /* defined via js:
+ --pswp-transition-duration: 333ms; */
+
+ --pswp-icon-color: #fff;
+ --pswp-icon-color-secondary: #4f4f4f;
+ --pswp-icon-stroke-color: #4f4f4f;
+ --pswp-icon-stroke-width: 2px;
+
+ --pswp-error-text-color: var(--pswp-icon-color);
+}
/*
Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
-*/
+*/
.pswp {
position: fixed;
top: 0;
@@ -54,35 +54,35 @@
opacity: 0.003;
contain: layout style size;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
+}
/* Prevents focus outline on the root element,
- (it may be focused initially) */
+ (it may be focused initially) */
.pswp:focus {
- outline: 0;
-}
+ outline: 0;
+}
.pswp * {
- box-sizing: border-box;
-}
+ box-sizing: border-box;
+}
.pswp img {
- max-width: none;
-}
+ max-width: none;
+}
.pswp--open {
display: block;
-}
+}
.pswp,
.pswp__bg {
-webkit-transform: translateZ(0);
- transform: translateZ(0);
+ transform: translateZ(0);
will-change: opacity;
-}
+}
.pswp__bg {
- opacity: 0.005;
+ opacity: 0.005;
background: var(--pswp-bg);
-}
+}
.pswp,
.pswp__scroll-wrap {
overflow: hidden;
-}
+}
.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
@@ -95,87 +95,87 @@
left: 0;
width: 100%;
height: 100%;
-}
+}
.pswp__img,
.pswp__zoom-wrap {
width: auto;
height: auto;
-}
+}
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
cursor: zoom-in;
-}
+}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
cursor: move;
cursor: grab;
-}
+}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
- cursor: grabbing;
-}
-/* :active to override grabbing cursor */
+ cursor: grabbing;
+}
+/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
cursor: zoom-out;
-}
-/* Prevent selection and tap highlights */
+}
+/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
-webkit-user-select: none;
user-select: none;
-}
+}
.pswp__item {
/* z-index for fade transition */
z-index: 1;
overflow: hidden;
-}
+}
.pswp__hidden {
display: none !important;
-}
-/* Allow to click through pswp__content element, but not its children */
+}
+/* Allow to click through pswp__content element, but not its children */
.pswp__content {
- pointer-events: none;
-}
+ pointer-events: none;
+}
.pswp__content > * {
- pointer-events: auto;
-}
+ pointer-events: auto;
+}
/*
- PhotoSwipe UI
+ PhotoSwipe UI
-*/
+*/
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
-*/
+*/
.pswp__error-msg-container {
- display: grid;
-}
+ display: grid;
+}
.pswp__error-msg {
margin: auto;
font-size: 1em;
line-height: 1;
color: var(--pswp-error-text-color);
-}
+}
/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
- */
+ */
.pswp .pswp__hide-on-close {
opacity: 0.005;
will-change: opacity;
transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
z-index: 10; /* always overlap slide content */
pointer-events: none; /* hidden elements should not be clickable */
-}
-/* class pswp--ui-visible is added when opening or closing transition starts */
+}
+/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
opacity: 1;
pointer-events: auto;
-}
-/*