From ac7e545ff95f33c906481da27b460d86e841280a Mon Sep 17 00:00:00 2001
From: eltrac <hi@eltr.ac>
Date: Tue, 17 Feb 2026 19:21:17 +0800
Subject: feat: better webmention likes style

---
 layouts/_partials/posts/webmention-likes.html | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/layouts/_partials/posts/webmention-likes.html b/layouts/_partials/posts/webmention-likes.html
index 2c23c67f..54fcef4a 100644
--- a/layouts/_partials/posts/webmention-likes.html
+++ b/layouts/_partials/posts/webmention-likes.html
@@ -2,9 +2,9 @@
 {{ $page := .page }}
 {{ $othercount := .othercount }}
 
-<section class="mb-6 flex gap-2 items-center">
-  <div class="flex gap-1 group relative items-center">
-      <button data-tooltip id="action-area-btn" title="{{ T "actionMenu.interact" }}" class="m-0 p-0 bg-transparent hover:no-underline cursor-pointer">
+<section class="group relative mb-6 vertical-middle">
+      <!-- Action Area Toggle -->
+      <button data-tooltip id="action-area-btn" title="{{ T "actionMenu.interact" }}" class="m-0 p-0 bg-transparent hover:no-underline cursor-pointer float-left mr-2">
           <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
       </button>
 
@@ -21,8 +21,10 @@
               {{ end }}
           </div>
       </div>
+
+      <!-- Likes -->
       {{ range $likes }}
-      <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}" class="inline-flex items-center">
+      <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}" class="box-border hover:no-underline inline-block h-5 w-5 float-left -ml-1">
           {{ $value := math.Floor (mul math.Rand 80) }}
           {{ $rotate := cond (lt $value 40) (sub 10 $value) (sub $value 30) }}
           <img src="{{ .author.photo }}" alt="Profile Picture"
@@ -30,12 +32,12 @@
               class="h-5 w-5 rd-full transition-transform {{ if lt $rotate 0 }}group-hover:-rotate-{{ mul -1 $rotate }}{{ else }}group-hover:rotate-{{ $rotate }}{{ end }} hover:scale-150" />
         </a>
     {{ end }}
- </div>
- <p class="text-secondary m-0 text-sm">
+ <div class="text-secondary m-0 text-sm inline ml-2">
     {{ printf (T "webmention.likedBy") (len $likes ) }}
     {{ if gt $othercount 0 }}
         <a id="toggle-webmentions" class="cursor-pointer" onclick="document.getElementById('webmention-collapse').classList.toggle('hidden')">{{ printf (T "webmention.repliedAndMentionedBy") $othercount }}</a>
     {{ end }}
- </p>
+ </div>
+ <div class="clear-left"></div>
 </section>
 
-- 
cgit v1.2.3