diff options
| -rw-r--r-- | web/assets/profile.css | 30 | ||||
| -rw-r--r-- | web/gotosocial-styling/templates/profile.css | 31 | ||||
| -rw-r--r-- | web/template/profile.tmpl | 6 |
3 files changed, 54 insertions, 13 deletions
diff --git a/web/assets/profile.css b/web/assets/profile.css index 7631b08ab..978468f72 100644 --- a/web/assets/profile.css +++ b/web/assets/profile.css @@ -34,13 +34,33 @@ main { text-decoration: none; } -.profile .basic .avatar img { - height: 25em; - width: 25em; - object-fit: cover; - border-radius: 10px; +.profile .basic .avatar-container { + position: relative; + width: 100%; + max-width: 25em; + } + +.profile .basic .avatar-container .avatar { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; } +.profile .basic .avatar-container .avatar img { + object-fit: cover; + border-radius: 10px; + width: 100%; + height: 100%; + } + +.profile .basic .avatar-container:before { + content: ""; + float: left; + padding-top: 100%; + } + .profile .basic .displayname { font-weight: bold; font-size: 1.6rem; diff --git a/web/gotosocial-styling/templates/profile.css b/web/gotosocial-styling/templates/profile.css index 167ed7b9e..472c6b730 100644 --- a/web/gotosocial-styling/templates/profile.css +++ b/web/gotosocial-styling/templates/profile.css @@ -34,15 +34,34 @@ main { text-decoration: none; } - .avatar { - img { - height: 25em; - width: 25em; - object-fit: cover; - border-radius: 10px; + .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; diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl index cfabeee6f..71914b7e7 100644 --- a/web/template/profile.tmpl +++ b/web/template/profile.tmpl @@ -5,7 +5,9 @@ <div class="basic"> <a href="{{.account.URL}}" class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</a> <a href="{{.account.URL}}" class="username">@{{.account.Username}}</a> - <a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}"></a> + <div class="avatar-container"> + <a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}"></a> + </div> </div> <div class="detailed"> <h2>About @{{.account.Username}}</h2> @@ -44,4 +46,4 @@ label.addEventListener("click", () => {setTimeout(update, 1)}); }); </script> -{{ template "footer.tmpl" .}}
\ No newline at end of file +{{ template "footer.tmpl" .}} |