diff --git a/assets/dist/base.css b/assets/dist/base.css
index 71c4cb8..068d2b6 100644
--- a/assets/dist/base.css
+++ b/assets/dist/base.css
@@ -65,6 +65,10 @@ pre {
font-size: 1em;
}
+pre {
+ max-width: 35rem;
+}
+
small {
font-size: 80%;
}
@@ -180,6 +184,8 @@ nav
, nav *
, footer
, footer *
+, aside
+, aside *
{ all: unset
; margin: 0
; padding: 0
@@ -214,7 +220,52 @@ 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;
@@ -668,6 +719,23 @@ 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;
@@ -677,7 +745,8 @@ label {
.about a {
border-radius: 0.125rem;
}
-.about a[href^='https://dym.sh/'] {
+.about a[href^='https://dym.sh/']
+, .about a[href^='/'] {
color: var(--green1);
}
.about a:active,
@@ -704,11 +773,6 @@ label {
.about p {
margin: 0;
}
-.about ul {
- padding-left: 0;
- list-style: none;
- padding: 1rem 0;
-}
.col-2 {
columns: 2;
}
@@ -723,17 +787,6 @@ label {
.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 5466056..f86973c 100644
--- a/assets/dist/profile.css
+++ b/assets/dist/profile.css
@@ -1,3 +1,4 @@
+
/*
GoToSocial
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
@@ -9,101 +10,180 @@
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 .
*/
-.profile {
- display: flex;
- gap: 1rem;
-}
-.profile .header {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- justify-content: flex-start;
- width: 20rem;
- word-break: break-all;
+.page {
+ grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */
+ grid-template-columns: 1fr min(92%, 65rem) 1fr;
}
-.profile .header > * {
+.profile {
+ padding: 0.5rem;
border-radius: var(--br);
}
-.profile figure {
- margin: 0 0 0.5rem 0;
+.profile .column-split {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+.profile .header {
+ background: var(--profile-bg);
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: space-between;
- position: relative;
-}
-.profile figure img.bg {
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 1;
- object-fit: cover;
-}
+ justify-content: start;
+ gap: 2rem;
+ align-items: center;
-.profile figure img.avatar {
- margin: 0.5rem;
- width: 5rem;
- height: 5rem;
- z-index: 2;
- object-fit: fill;
- border-radius: var(--br);
-}
-
-.profile .header .user {
+ margin: 0;
background: var(--profile-bg);
- display: flex;
- flex-direction: column;
- gap: 0.25rem;
- padding: 1rem;
+ border-top-left-radius: var(--br);
+ border-top-right-radius: var(--br);
+ padding: 0.75rem;
}
-.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 .col-header h1, .profile .col-header h2 {
+ font-size: 1.2rem;
+ line-height: 1.3rem;
+ margin: 0;
+ }
.profile .toots {
flex: 65 25rem;
@@ -113,82 +193,95 @@
}
.profile .toots .col-header {
- display: grid;
- grid-template-columns: auto 1fr;
- gap: 1rem;
-}
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 1rem;
+ }
.profile .toots .col-header a {
- justify-self: end;
-}
+ 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: var(--br);
-}
-.toot .info {
- flex-direction: row;
- gap: 1rem;
-}
-.toot .info {
- flex-direction: row;
- gap: 1rem;
-}
+ 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;
-}
+ display: flex;
+ justify-content: space-between;
+ }
.profile .toots .backnextlinks .next {
- margin-left: auto;
+ margin-left: auto;
+ }
+
+.profile .about-user {
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
}
-
-.profile .col-header {
- margin-bottom: -0.25rem;
-}
-
-
-.profile > * {
+.profile .about-user > * {
border-radius: var(--br);
}
-.profile .fields {
- background: var(--profile-bg);
- display: grid;
- grid-template-columns: 1fr 2fr;
- padding: 0.5rem;
-}
+.profile .about-user .col-header {
+ margin-bottom: -0.25rem;
+ }
-.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 .about-user .fields {
+ background: var(--profile-bg);
+ display: grid;
+ grid-template: max-content 1fr;
+ padding: 0 0.5rem;
+ }
-.profile .rss-icon,
-.profile .rss-icon img {
- width: 20px;
- height: 20px;
-}
+.profile .about-user .fields .field + .field {
+ border-top: 0.1rem solid var(--gray2);
+ }
-.profile .fields .flex,
-.profile .fields .flex * {
- display: flex;
- line-height: 1rem;
- gap: 0.5rem;
- align-items: center;
-}
+.profile .about-user .bio {
+ background: var(--profile-bg);
+ padding: 1rem;
+ }
-.profile .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 .about-user .accountstats > b + * {
+ justify-self: start;
}
diff --git a/assets/dist/settings-style.css b/assets/dist/settings-style.css
index f11e308..39a0dd0 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(--gray3);
+ background: var(--gray4);
}
nav.menu-tree li.nested a.title:focus {
diff --git a/assets/dist/status.css b/assets/dist/status.css
index c6310f3..0deef5b 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-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-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;
-}
-/*