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; -} -/*