diff --git a/wowchemy/assets/scss/wowchemy/widgets/_about.scss b/wowchemy/assets/scss/wowchemy/widgets/_about.scss index 30511c32..a567f66f 100644 --- a/wowchemy/assets/scss/wowchemy/widgets/_about.scss +++ b/wowchemy/assets/scss/wowchemy/widgets/_about.scss @@ -100,3 +100,30 @@ ul.ul-edu li .description p.institution { font-size: 0.75rem; color: rgba(0, 0, 0, 0.6); } + +// For about.avatar widget +.avatar-wrapper { + position: relative; + width: 150px; // Match image size in about.avatar widget + height: 150px; + margin-left: auto; + margin-right: auto; + + .avatar-emoji { + position: absolute; + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 100%; + bottom: 0; + right: 0; + text-align: center; + font-size: 20px; + background-color: #fff; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04); + } +} +.dark .avatar-emoji { + background-color: #000; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 1px rgba(255, 255, 255, 0.96); +} diff --git a/wowchemy/layouts/partials/widgets/about.avatar.html b/wowchemy/layouts/partials/widgets/about.avatar.html index 82b563d3..8f944d38 100644 --- a/wowchemy/layouts/partials/widgets/about.avatar.html +++ b/wowchemy/layouts/partials/widgets/about.avatar.html @@ -19,11 +19,12 @@
- {{ if site.Params.avatar.gravatar }} - {{$person_page.Title}} - {{ else if $avatar }} - {{ $avatar_image := $avatar.Fill "150x150 Center" }} - {{$person_page.Title}} + {{ if $avatar }} +
+ {{ $avatar_image := $avatar.Fill "150x150 Center" }} + {{$person_page.Title}} + {{with $person.status.icon}}{{.|emojify}}{{end}} +
{{ end }}