Ver código fonte

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
```
George Cushen 3 anos atrás
pai
commit
690968b3aa

+ 27 - 0
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);
+}

+ 6 - 5
wowchemy/layouts/partials/widgets/about.avatar.html

@@ -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">