Scale down avatar size for non-parent-author posts in grouped contexts

Experimental!

src/app.css

@@ -641,6 +641,16 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   .status-reply-to:not(.visibility-direct):not(.status-card) {
   background-image: none;
 }
+.timeline:not(.flat)
+  > li.timeline-item-diff-author
+  > .status-link
+  > .status
+  > a
+  > .avatar {
+  transform: scale(0.8);
+  filter: drop-shadow(0 0 16px var(--bg-color))
+    drop-shadow(0 0 8px var(--bg-color)) drop-shadow(0 0 8px var(--bg-color));
+}
 
 .timeline .show-more {
   padding-left: calc(var(--line-end) + var(--line-margin-end)) !important;

src/components/timeline.jsx

@@ -398,7 +398,7 @@ function Timeline({
                   }
                   const manyItems = items.length > 3;
                   return items.map((item, i) => {
-                    const { id: statusID } = item;
+                    const { id: statusID, _differentAuthor } = item;
                     const url = instance
                       ? `/${instance}/s/${statusID}`
                       : `/s/${statusID}`;
@@ -416,6 +416,8 @@ function Timeline({
                             : i === items.length - 1
                             ? 'end'
                             : 'middle'
+                        } ${
+                          _differentAuthor ? 'timeline-item-diff-author' : ''
                         }`}
                       >
                         <Link class="status-link timeline-item" to={url}>

src/utils/timeline-utils.jsx

@@ -130,6 +130,16 @@ export function groupContext(items) {
     });
   });
 
+  // Tag items that has different author than first post's author
+  contexts.forEach((context) => {
+    const firstItemAccountID = context[0].account.id;
+    context.forEach((item) => {
+      if (item.account.id !== firstItemAccountID) {
+        item._differentAuthor = true;
+      }
+    });
+  });
+
   if (contexts.length) console.log('🧵 Contexts', contexts);
 
   const newItems = [];