diff options
Diffstat (limited to 'web/source/css/profile.css')
| -rw-r--r-- | web/source/css/profile.css | 318 |
1 files changed, 3 insertions, 315 deletions
diff --git a/web/source/css/profile.css b/web/source/css/profile.css index 1296b8927..5b9f2188e 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -17,13 +17,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ +@import "./_profile-header.css"; + .page { /* Profile page can be a little wider than default page, since we're using a side-by-side column view. */ - grid-template-columns: 1fr minmax(auto, 60rem) 1fr; - grid-template-columns: 1fr min(92%, 65rem) 1fr; + grid-template-columns: 1fr min(95%, 65rem) 1fr; } .profile .column-split { @@ -32,244 +33,6 @@ gap: 1rem; } -.profile .profile-header { - background: $profile-bg; - border-radius: $br; - overflow: hidden; - margin-bottom: 1rem; - - .moved-to { - padding: 1rem; - text-align: center; - } - - .header-image-wrapper { - position: relative; - padding-top: 33.33%; /* aspect-ratio 1/3 */ - - img { - position: absolute; - top: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - } - - /* - 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. - */ - $avatar-size: 8.5rem; - $name-size: 3rem; - $username-size: 2rem; - $overlap: calc($avatar-size - $name-size - $username-size); - - .basic-info { - position: relative; - display: grid; - box-sizing: border-box; - grid-template-columns: $avatar-size auto 1fr; - grid-template-rows: $overlap $name-size auto; - grid-template-areas: - "avatar . ." - "avatar namerole namerole" - "avatar namerole namerole"; - - margin: 1rem; - margin-top: calc(-1 * $overlap); - gap: 0 1rem; - - .avatar-image-wrapper { - grid-area: avatar; - - border: 0.2rem solid $avatar-border; - border-radius: $br; - - /* - Wrapper always same - size + proportions no - matter image inside. - */ - height: $avatar-size; - width: $avatar-size; - - .avatar { - /* - Fit 100% of the wrapper. - */ - height: 100%; - width: 100%; - - /* - Normalize non-square images. - */ - object-fit: cover; - - /* - Prevent image extending - beyond rounded borders. - */ - border-radius: $br-inner; - } - } - - .namerole { - grid-area: namerole; - - display: grid; - gap: 0 1rem; - box-sizing: border-box; - grid-template-columns: 1fr auto; - grid-template-rows: $name-size auto; - grid-template-areas: - "displayname displayname" - "username role"; - - .displayname { - grid-area: displayname; - line-height: $name-size; - font-size: 1.5rem; - font-weight: bold; - } - - .bot-username-wrapper { - display: flex; - gap: 0.5rem; - grid-area: username; - align-items: center; - - .bot-legend-wrapper { - display: flex; - gap: 0.25rem; - align-items: center; - - background: $bg; - color: $fg; - - border-radius: $br; - padding: 0.1rem 0.4rem 0.2rem 0.4rem; - - font-variant: small-caps; - font-weight: bold; - - cursor: default; - - .bot-icon { - /* - FA icon is weirdly - aligned so tweak it - */ - margin-top: 0.25rem; - } - } - - .username { - min-width: 0; - line-height: $username-size; - - font-size: 1rem; - font-weight: bold; - color: $fg-accent; - user-select: all; - } - } - - .role { - background: $bg; - color: $fg; - border: 0.13rem solid $bg; - - grid-area: role; - align-self: center; - justify-self: start; - border-radius: $br; - padding: 0.3rem; - - line-height: 1.1rem; - font-size: 0.9rem; - font-variant: small-caps; - font-weight: bold; - - &.admin { - color: $role-admin; - border-color: $role-admin; - } - - &.moderator { - color: $role-mod; - border-color: $role-mod; - } - } - } - } -} - -/* - Tablet-ish-kinda size. -*/ -@media screen and (max-width: 750px) { - .profile .profile-header { - .basic-info { - grid-template-columns: auto 1fr; - grid-template-rows: $avatar-size $name-size auto; - grid-template-areas: - "avatar avatar" - "namerole namerole" - "namerole namerole"; - - /* - Make display name a bit smaller - so there's more chance of being - able to read everything. - */ - .namerole { - .displayname { - font-size: 1.2rem; - line-height: 2rem; - margin-top: 0.5rem; - } - } - } - } -} - -/* - Phone-ish-kinda size. -*/ -@media screen and (max-width: 500px) { - .profile - .profile-header - .basic-info - .namerole { - /* - Line up in smallest possible - horizontal space to avoid overflow. - */ - display: flex; - flex-direction: column; - gap: 0.5rem; - - /* - Don't hug the right anymore - (good life advice in general). - */ - .role { - align-self: flex-start; - } - - /* - Allow this to wrap in case - of a really skinny screen. - */ - .bot-username-wrapper { - flex-wrap: wrap; - } - } -} - .profile .statuses-wrapper { flex: 65 25rem; display: flex; @@ -283,29 +46,6 @@ flex-direction: column; gap: 0.4rem; - .rss-icon { - display: block; - margin: -0.25rem 0; - - .fa { - font-size: 2rem; - object-fit: contain; - vertical-align: middle; - color: $orange2; - /* - Can't size a single-color background, so we use - a linear-gradient that's effectively white. - */ - background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center; - background-size: 1.2rem 1.4rem; - /* light mode */ - @media (prefers-color-scheme: light) { - background: linear-gradient(to right, $white 100%, transparent 0) no-repeat center center; - background-size: 1.2rem 1.4rem; - } - } - } - .backnextlinks { display: flex; justify-content: space-between; @@ -315,55 +55,3 @@ } } } - -.profile .about-user { - flex: 35 14rem; - border-radius: $br; - overflow: hidden; - - .col-header { - margin-bottom: -0.25rem; - } - - dt { - font-weight: bold; - } - - .fields { - background: $profile-bg; - display: flex; - flex-direction: column; - padding: 0 0.5rem; - padding-top: 0.25rem; - - .field { - padding: 0.25rem; - display: flex; - flex-direction: column; - border-bottom: 0.1rem solid $gray2; - - > dt, > dd { - word-break: break-word; - } - - &:first-child { - border-top: 0.1rem solid $gray2; - } - } - } - - .bio { - background: $profile-bg; - padding: 1rem 0.75rem; - padding-bottom: 1.25rem; - } - - .accountstats { - background: $bg-accent; - padding: 0.75rem; - - display: grid; - grid-template-columns: auto 1fr; - gap: 0.25rem 1rem; - } -}
\ No newline at end of file |