From 9448092e5b4cda611b1a449a1e639641743003cc Mon Sep 17 00:00:00 2001
From: Mazen Amria <t.mazenamria@gmail.com>
Date: Sun, 10 Nov 2024 14:27:02 +0100
Subject: [PATCH] avatar

---
 _includes/author-profile.html |  2 +-
 _includes/sidebar.html        |  3 ++-
 _sass/_sidebar.scss           | 24 ++++++++++++------------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/_includes/author-profile.html b/_includes/author-profile.html
index 1ab7790..e53b8dc 100644
--- a/_includes/author-profile.html
+++ b/_includes/author-profile.html
@@ -10,7 +10,7 @@
     {% if author.avatar contains "://" %}
     	<img src="{{ author.avatar }}" alt="{{ author.name }}">
     {% else %}
-    	<img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" class="author__avatar" alt="{{ author.name }}">
+    	<img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" alt="{{ author.name }}">
     {% endif %}
   </div>
 
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index b8ee39a..15df37b 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -6,13 +6,14 @@
   {% if page.sidebar %}
     {% for s in page.sidebar %}
       {% if s.image %}
+        <div>
         <img src=
         {% if s.image contains "://" %}
           "{{ s.image }}"
         {% else %}
           "{{ s.image | prepend: "/images/" | prepend: base_path }}"
         {% endif %}
-        alt="{% if s.image_alt %}{{ s.image_alt }}{% endif %}">
+        alt="{% if s.image_alt %}{{ s.image_alt }}{% endif %}"></div>
       {% endif %}
       {% if s.title %}<h3>{{ s.title }}</h3>{% endif %}
       {% if s.text %}{{ s.text | markdownify }}{% endif %}
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
index 509f560..663bb64 100644
--- a/_sass/_sidebar.scss
+++ b/_sass/_sidebar.scss
@@ -52,7 +52,11 @@
   }
 
   img {
-    width: 100%;
+    width: 900px;
+    height: 900px;
+    max-width: 900px;
+    transform: translate(-45%, -26%);
+    max-height: 900px;
   }
 }
 
@@ -82,21 +86,17 @@
   width: 36px;
   // set width only, for non-square avatars
   // height: 36px;
+  overflow: hidden;
+  border-radius: 50%;
 
   @include breakpoint($large) {
     display: block;
-    width: auto;
-    height: auto;
-  }
-
-  img {
-    max-width: 175px;
+    width: 180px;
+    height: 180px;
+    overflow: hidden;
+    padding: 5px;
     border-radius: 50%;
-
-    @include breakpoint($large) {
-      padding: 5px;
-      border: 1px solid $border-color;
-    }
+    border: 1px solid $border-color;
   }
 }