diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/source/css/base.css | 6 | ||||
| -rw-r--r-- | web/source/css/profile.css | 66 | ||||
| -rw-r--r-- | web/source/css/status.css | 4 | ||||
| -rw-r--r-- | web/template/profile.tmpl | 2 |
4 files changed, 56 insertions, 22 deletions
diff --git a/web/source/css/base.css b/web/source/css/base.css index 66dd8b838..0b09a9a90 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -50,9 +50,7 @@ body { min-height: 100%; min-width: 100%; - grid-template-columns: 1fr 50% 1fr; grid-template-columns: auto min(92%, 90ch) auto; - grid-template-rows: auto 1fr auto; } @@ -269,10 +267,6 @@ footer { } @media screen and (orientation: portrait) { - .page { - grid-template-columns: 1fr 92% 1fr; - } - header { text-align: center; } diff --git a/web/source/css/profile.css b/web/source/css/profile.css index d0ab7e26d..e7a422680 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -28,22 +28,20 @@ main { } .profile { - position: relative; background: $bg_accent; display: grid; - grid-template-rows: minmax(6rem, 20%) auto auto; - grid-template-columns: 1fr; - flex-wrap: wrap; - justify-content: space-around; + grid-template-rows: auto auto auto; + grid-template-columns: auto; gap: 0.5rem; margin-bottom: 0.2rem; - border-radius: $br; + overflow-x: hidden; + border-radius: $br; box-shadow: $boxshadow; border: $boxshadow_border; .headerimage { - height: 100%; + width: 100%; aspect-ratio: 3 / 1; overflow: hidden; box-shadow: $boxshadow; @@ -62,20 +60,20 @@ main { display: grid; grid-template-columns: 1rem auto 1fr; - grid-template-rows: 1fr auto auto; + grid-template-rows: auto auto auto; grid-template-areas: - ". avatar ." + ". avatar ." "filler2 avatar displayname" - ". avatar username"; + ". avatar username"; #profile-basic-filler2 { grid-area: filler2; background: $bg_trans; - margin-top: 0.3rem; } .avatar { + align-self: end; box-sizing: border-box; height: 8.5rem; width: 8.5rem; @@ -104,10 +102,8 @@ main { .displayname { grid-area: displayname; padding-right: 1rem; - align-self: end; font-weight: bold; font-size: 2rem; - margin-top: 0.3rem; line-height: 2.2rem; background: $bg_trans; word-break: break-all; @@ -117,17 +113,53 @@ main { } .username { + display: flex; + flex-wrap: wrap; + grid-area: username; padding-top: 0; margin-top: 0.25rem; padding-bottom: 0.25rem; color: $fg_accent; font-weight: bold; + word-break: break-all; + text-overflow: ellipsis; + overflow: hidden; + } + } + + @media screen and (max-width: 600px) { + .basic { + max-height: initial; + margin-top: -7.5vh; + + display: flex; + flex-direction: column; + + #profile-basic-filler2 { + display: none; + } + + .avatar { + align-self: flex-start; + margin-left: 1rem; + height: 22vw; + width: 22vw; + } + + .displayname { + padding-left: 1rem; + font-size: 5vw; + align-self: stretch; + } + + .username { + padding-left: 1rem; + } } } .detailed { - padding: 0 1rem; display: flex; flex-direction: column; flex: 1 1 25em; @@ -137,7 +169,11 @@ main { } .bio { - margin: 0.5rem 0; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + margin-left: 1rem; + margin-right: 1rem; + word-break: break-word; a { color: $acc1; diff --git a/web/source/css/status.css b/web/source/css/status.css index b0567c7ce..4badfa33c 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -124,6 +124,10 @@ main { color: $link_fg; text-decoration: underline; } + + .content { + word-break: break-word; + } } .media { diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl index 458f68f52..22f192c06 100644 --- a/web/template/profile.tmpl +++ b/web/template/profile.tmpl @@ -13,7 +13,7 @@ <div id="profile-basic-filler2"></div> <a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}" alt="{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}'s avatar"></a> <div class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</div> - <div class="username">@{{.account.Username}}@{{.instance.AccountDomain}}</div> + <div class="username"><span>@{{.account.Username}}</span><span>@{{.instance.AccountDomain}}</span></div> </div> <div class="detailed"> <div class="bio"> |