diff options
Diffstat (limited to 'web/source/css/profile.css')
| -rw-r--r-- | web/source/css/profile.css | 220 |
1 files changed, 105 insertions, 115 deletions
diff --git a/web/source/css/profile.css b/web/source/css/profile.css index bc1a32a5d..06c93e6e0 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -17,28 +17,27 @@ */ .page { - grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */ + /* + 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; } -.profile { - padding: 0.5rem; - border-radius: $br; - - .column-split { - display: flex; - flex-wrap: wrap; - gap: 1rem; - } +.profile .column-split { + display: flex; + flex-wrap: wrap; + gap: 1rem; } -.profile .header { +.profile .profile-header { background: $profile-bg; border-radius: $br; overflow: hidden; margin-bottom: 1rem; - .header-image { + .header-image-wrapper { position: relative; padding-top: 33.33%; /* aspect-ratio 1/3 */ @@ -55,12 +54,11 @@ /* 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 + 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 { @@ -71,8 +69,8 @@ grid-template-rows: $overlap $name-size auto; grid-template-areas: "avatar . ." - "avatar displayname displayname" - "avatar username role"; + "avatar namerole namerole" + "avatar namerole namerole"; margin: 1rem; margin-top: calc(-1 * $overlap); @@ -93,131 +91,119 @@ } } - .displayname { - grid-area: displayname; - line-height: $name-size; - font-size: 1.5rem; - font-weight: bold; - } - - .username { - min-width: 0; - grid-area: username; - line-height: $username-size; + .namerole { + grid-area: namerole; - 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; + display: grid; + gap: 0 1rem; + box-sizing: border-box; + grid-template-columns: auto 1fr; + grid-template-rows: $name-size auto; + grid-template-areas: + "displayname displayname" + "username role"; - &.admin { - color: $role-admin; - border-color: $role-admin; + .displayname { + grid-area: displayname; + line-height: $name-size; + font-size: 1.5rem; + font-weight: bold; } - - &.moderator { - color: $role-mod; - border-color: $role-mod; + + .username { + min-width: 0; + grid-area: username; + 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; + } } } } } @media screen and (max-width: 750px) { - .profile .header { + .profile .profile-header { .basic-info { grid-template-columns: auto 1fr; grid-template-rows: $avatar-size $name-size auto; grid-template-areas: "avatar avatar" - "displayname displayname" - "username role"; - - .displayname { - font-size: 1.4rem; + "namerole namerole" + "namerole namerole"; + + .namerole { + grid-template-columns: 1fr; + grid-template-rows: $name-size auto; + grid-template-areas: + "displayname displayname" + "username role"; + + .displayname { + font-size: 1.4rem; + } } } } } -.profile .col-header { - display: flex; - justify-content: start; - gap: 2rem; - align-items: center; - - margin: 0; - background: $profile-bg; - border-top-left-radius: $br; - border-top-right-radius: $br; - padding: 0.75rem; - - h1, h2 { - font-size: 1.2rem; - line-height: 1.3rem; - margin: 0; - } -} - -.profile .toots { +.profile .statuses-wrapper { flex: 65 25rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0%; +} - .col-header { - display: grid; - grid-template-columns: auto 1fr; - gap: 1rem; - - a { - justify-self: end; - } - - .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; - } - } - } - - .toot { - border-radius: 0; - - .info { - padding: 0.3rem 0.75rem; - } +.profile .statuses { + display: flex; + flex-direction: column; + gap: 0.4rem; - &:last-child { - border-bottom-left-radius: $br; - border-bottom-right-radius: $br; + .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; } } @@ -240,6 +226,10 @@ margin-bottom: -0.25rem; } + dt { + font-weight: bold; + } + .fields { background: $profile-bg; display: flex; |