diff options
Diffstat (limited to 'web/source/css/profile.css')
| -rw-r--r-- | web/source/css/profile.css | 242 |
1 files changed, 127 insertions, 115 deletions
diff --git a/web/source/css/profile.css b/web/source/css/profile.css index 10b4db12a..954519a97 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -1,131 +1,143 @@ /* - GoToSocial - Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org + GoToSocial + Copyright (C) 2021-2022 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 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. + 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 <http://www.gnu.org/licenses/>. + 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/>. */ main { - background: transparent; -} - -.headerimage { - img { - width: 100%; - height: 15em; - object-fit: cover; - border-radius: 10px; - } + background: transparent; + padding-top: 0; } .profile { - position: relative; - background: $bg_darker3; - padding: 2rem; - display: flex; - flex-wrap: wrap; - justify-content: space-around; - gap: 0.5rem; - margin-bottom: 0.2rem; - - .basic { - display: flex; - flex-direction: column; - flex: 1 1 25em; - gap: 0.5rem; - - a { - position: relative; - z-index: 1; - color: inherit; - text-decoration: none; - } - - .avatar-container { - position: relative; - width: 100%; - max-width: 25em; - - .avatar { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - - img { - object-fit: cover; - border-radius: 10px; - width: 100%; - height: 100%; - } - } - } - - .avatar-container:before { - content: ""; - float: left; - padding-top: 100%; - } - - - .displayname { - font-weight: bold; - font-size: 1.6rem; - align-self: start; - } - } - - .detailed { - display: flex; - flex-direction: column; - flex: 1 1 25em; - - h2 { - margin-top: 0; - } - - .bio { - margin: 0; - - a { - color: $acc1; - text-decoration: underline; - } - } - } + position: relative; + background: $bg_darker3; + display: grid; + grid-template-rows: minmax(6rem, 20%) auto auto; + grid-template-columns: 1fr; + flex-wrap: wrap; + justify-content: space-around; + gap: 0.5rem; + margin-bottom: 0.2rem; + border-radius: $br; + + box-shadow: $boxshadow; + + .headerimage { + height: 100%; + aspect-ratio: 3 / 1; + overflow: hidden; + box-shadow: $boxshadow; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: $br $br 0 0; + } + } + + .basic { + margin-top: -7rem; + padding: 0 1rem; + + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: 6.5rem auto; + + .avatar { + box-sizing: border-box; + height: 8.5rem; + width: 8.5rem; + grid-row: 1 / span 2; + background: $bg; + border: 0.2rem solid $acc2; + padding: 0; + border-radius: $br; + position: relative; + + box-shadow: $boxshadow; + img { + object-fit: cover; + border-radius: $br; + width: 100%; + height: 100%; + } + } + + a { + position: relative; + z-index: 1; + color: inherit; + text-decoration: none; + padding: 0.5rem; + } + + .displayname { + align-self: end; + font-weight: bold; + font-size: 2rem; + line-height: 2.2rem; + } + + .username { + padding-top: 0.25rem; + color: $acc1; + font-weight: bold; + } + } + + .detailed { + padding: 0 1rem; + display: flex; + flex-direction: column; + flex: 1 1 25em; + + h2 { + margin-top: 0; + } + + .bio { + margin: 0; + + a { + color: $acc1; + text-decoration: underline; + } + } + } } .accountstats { - position: relative; - background: $bg_darker3; - padding: 0.5rem; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - gap: 0.5rem; - margin-bottom: 0.2rem; - - .entry { - background: $bg_lighter3; - padding: 0.5rem; - flex-grow: 1; - text-align: center; - } + background: $bg_lighter3; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 0 1.2rem; + border-radius: 0 0 $br $br; + + .entry { + padding: 1rem 0; + text-align: center; + } } -footer + div { - /* something weird from the devstack.. */ - display: none; +.toot, .toot:last-child { + box-shadow: $boxshadow; } + +#recent { + margin-left: 1rem; +}
\ No newline at end of file |