feat: add support for status icon in about.avatar widget

To use add the new field to an author file:
```
status:
  icon: an emoji here
```
This commit is contained in:
George Cushen committed 2021-10-17 23:09:36 +01:00
1 parent a6a82317f8
commit 690968b3aa
2 files changed
+33 -5

No files matched your search

@@ -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);
}
@@ -19,11 +19,12 @@
<div id="profile">
{{ if site.Params.avatar.gravatar }}
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=150')" alt="{{$person_page.Title}}">
{{ else if $avatar }}
{{ $avatar_image := $avatar.Fill "150x150 Center" }}
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="{{$person_page.Title}}">
{{ if $avatar }}
<div class="avatar-wrapper">
{{ $avatar_image := $avatar.Fill "150x150 Center" }}
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="{{$person_page.Title}}">
{{with $person.status.icon}}<span class="avatar-emoji">{{.|emojify}}</span>{{end}}
</div>
{{ end }}
<div class="portrait-title">