make avatar prettier

app/templates/common/macros.html

@@ -110,6 +110,12 @@
 {%- endcall -%}
 {%- endmacro %}
 
+{% macro avatar(url) -%}
+<div class="avatar-container">
+  <img src="{{url}}" class="avatar">
+</div>
+{%- endmacro %}
+
 {% macro full_post(
   post, render_sig=true, is_latest=false,
   show_toolbar=true, is_editing=false, thread=none,
@@ -124,7 +130,7 @@
 {%- set can_reply = (is_logged_in()) and (not thread.locked or is_mod()) -%}
 <div class="usercard plank even contrast-bg minimal no-shadow">
   <div class="usercard-inner">
-    <img src="{{post.avatar_path}}" class="avatar">
+    {{avatar(post.avatar_path)}}
     <div class="usercard-rest">
       <a href="{{url_for('users.user_page', username=post.username)}}">{{post.display_name if post.display_name else post.username}}</a>
       <abbr title="mention">@{{post.username}}</abbr>

app/templates/users/user_page.html

@@ -1,4 +1,4 @@
-{%- from 'common/macros.html' import subheader, timestamp, pager -%}
+{%- from 'common/macros.html' import subheader, timestamp, pager, avatar -%}
 {%- extends 'base.html' -%}
 {%- block title -%}{{ target_user.get_readable_name() }}'s profile{%- endblock -%}
 {%- set stats = target_user.get_post_stats() -%}
@@ -41,7 +41,7 @@
 <div class="userpage-usercard">
   <div class="usercard plank even contrast-bg minimal no-shadow">
     <div class="usercard-inner">
-      <img src="{{target_user.get_avatar_url()}}" class="avatar">
+      {{- avatar(target_user.get_avatar_url()) -}}
     </div>
   </div>
   <div class="plank even minimal no-shadow user-stats">

data/static/css/style.css

@@ -520,10 +520,34 @@ footer {
   gap: var(--base-padding);
 }
 
-.avatar {
-  max-width: 100%;
-  max-height: 100%;
+.usercard.plank {
+  padding: var(--base-padding);
+}
+
+.avatar-container {
+  position: relative;
+  display: flex;
+  border-radius: var(--base-padding);
+  border: var(--base-padding) outset gray;
+  box-shadow: 0px 0px 12px 2px #0006;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    box-shadow: inset 0px 0px var(--big-padding) 2px #d4ddc9;
+    top: 0;
+    right: 0;
+    border: 2px solid #545454;
+    pointer-events: none;
+  }
+
+  .avatar {
+    max-width: min(100%, 256px);
+    max-height: min(100%, 256px);
     object-fit: contain;
+
+  }
 }
 
 .post-content {