mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-13 04:14:41 +00:00
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:
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">
|
||||
|
||||
Reference in new issue
Block a user