diff --git a/web/source/css/_profile-header.css b/web/source/css/_profile-header.css index cba67ffa1..3b14edab8 100644 --- a/web/source/css/_profile-header.css +++ b/web/source/css/_profile-header.css @@ -20,8 +20,20 @@ .profile .profile-header { background: $profile-bg; border-radius: $br; - overflow: hidden; - margin-bottom: 1rem; + + /* + Link to open media in slide + should fill entire media wrapper. + */ + a.photoswipe-slide { + display: inline-block; + height: 100%; + width: 100%; + + &:focus-visible { + outline: $button-focus-outline; + } + } .moved-to { padding: 1rem; @@ -30,8 +42,10 @@ .header-image-wrapper { position: relative; - padding-top: 33.33%; /* aspect-ratio 1/3 */ - + aspect-ratio: 3; + height: 100%; + width: 100%; + img { position: absolute; top: 0; @@ -66,6 +80,7 @@ margin: 1rem; margin-top: calc(-1 * $overlap); gap: 0 1rem; + padding-bottom: 1rem; .avatar-image-wrapper { grid-area: avatar; @@ -82,22 +97,11 @@ width: $avatar-size; /* - Link to open media in slide - should fill entire media wrapper. + Offset to avoid clashing with + thick border around avatars. */ - a.photoswipe-slide { - display: inline-block; - height: 100%; - width: 100%; - - /* - Offset to avoid clashing with - thick border around avatars. - */ - &:focus-visible { - outline: $button-focus-outline; - outline-offset: 0.25rem; - } + a.photoswipe-slide:focus-visible { + outline-offset: 0.25rem; } .avatar { diff --git a/web/template/profile_header.tmpl b/web/template/profile_header.tmpl index 4be900287..2fd8c0e42 100644 --- a/web/template/profile_header.tmpl +++ b/web/template/profile_header.tmpl @@ -91,7 +91,6 @@ data-pswp-width="{{- template "avatarWidth" . -}}px" data-pswp-height="{{- template "avatarHeight" . -}}px" data-cropped="true" - alt="{{- template "avatarAlt" . -}}" title="{{- template "avatarAlt" . -}}" > @@ -119,31 +117,65 @@ {{- end }} {{- end -}} +{{- define "header" -}} {{- with . }} -

Profile for {{ .account.Username -}}

-
- {{- if .account.Moved }} - {{- include "profileMovedTo" . | indent 2 }} - {{- end }} -
- - {{- if .account.HeaderAttachment }} +{{- if .account.HeaderAttachment }} + + +
+{{- else }} +
+ + {{- template + +
+{{- end }} +{{- end }} +{{- end -}} + +{{- with . }} +

Profile for {{ .account.Username -}}

+
+ {{- if .account.Moved }} + {{- include "profileMovedTo" . | indent 1 }} + {{- end }} + {{- with . }} + {{- include "header" . | indent 1 }} + {{- end }}
{{- with . }} - {{- include "avatar" . | indent 3 }} + {{- include "avatar" . | indent 2 }} {{- end }}
Display name
diff --git a/web/template/status_attachment.tmpl b/web/template/status_attachment.tmpl index a60ef4137..d04f11d5d 100644 --- a/web/template/status_attachment.tmpl +++ b/web/template/status_attachment.tmpl @@ -24,7 +24,6 @@ loading="lazy" {{- if .Description }} alt="{{- .Description -}}" - title="{{- .Description -}}" {{- end }} width="{{- .Meta.Small.Width -}}" height="{{- .Meta.Small.Height -}}" @@ -37,7 +36,6 @@ loading="lazy" {{- if .Description }} alt="{{- .Description -}}" - title="{{- .Description -}}" {{- end }} width="518" height="460" @@ -138,7 +136,6 @@ data-pswp-height="{{- .Item.Meta.Original.Height -}}px" data-cropped="true" {{- if .Item.Description }} - alt="{{- .Item.Description -}}" title="{{- .Item.Description -}}" {{- end }} >