From 84ee969e7a1f0af5ae73a547c67bbb80656501e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lera=20Elvo=C3=A9?= <yagich@poto.cafe>
Date: Thu, 21 May 2026 22:38:16 +0300
Subject: [PATCH] make avatar prettier

---
 app/templates/common/macros.html   |  8 +++++++-
 app/templates/users/user_page.html |  4 ++--
 data/static/css/style.css          | 32 ++++++++++++++++++++++++++----
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/app/templates/common/macros.html b/app/templates/common/macros.html
index ba6386b..1fb1b0e 100644
--- a/app/templates/common/macros.html
+++ b/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>
diff --git a/app/templates/users/user_page.html b/app/templates/users/user_page.html
index 5e0a113..3332486 100644
--- a/app/templates/users/user_page.html
+++ b/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">
diff --git a/data/static/css/style.css b/data/static/css/style.css
index 610306c..1bb9eb8 100644
--- a/data/static/css/style.css
+++ b/data/static/css/style.css
@@ -520,10 +520,34 @@ footer {
   gap: var(--base-padding);
 }
 
-.avatar {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
+.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 {