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