From 9832c671c6681f59c3cb7f1816c9df8732389ce4 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 7 Mar 2026 15:59:29 +0100
Subject: [PATCH] fix(radius): correct border-radius to match system

- rounded -> rounded-full for badges/pills
- rounded-xl -> rounded-lg for standard cards (xl reserved for hero/featured)

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
---
 _includes/components/h-card.njk |  4 ++--
 podroll.njk                     | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/_includes/components/h-card.njk b/_includes/components/h-card.njk
index 2d39416..75e1535 100644
--- a/_includes/components/h-card.njk
+++ b/_includes/components/h-card.njk
@@ -31,7 +31,7 @@
         alt="{{ authorName }}"
         width="64"
         height="64"
-        class="w-16 h-16 rounded-full object-cover"
+        class="w-16 h-16 rounded-full object-cover shadow-lg"
         loading="lazy"
         itemprop="image"
       >
@@ -89,7 +89,7 @@
   {% if authorCategories and authorCategories.length %}
   <div class="mt-3 flex flex-wrap gap-1">
     {% for category in authorCategories %}
-    <span class="p-category text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-800 rounded">{{ category }}</span>
+    <span class="p-category text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-800 rounded-full">{{ category }}</span>
     {% endfor %}
   </div>
   {% endif %}
diff --git a/podroll.njk b/podroll.njk
index 2da6ae3..777501b 100644
--- a/podroll.njk
+++ b/podroll.njk
@@ -16,7 +16,7 @@ permalink: /podroll/
     </p>
     <p class="text-xs text-surface-500 mt-2" x-show="status?.episodes?.lastSync">
       Last synced: <span class="font-mono" x-text="formatDate(status?.episodes?.lastSync, 'full')"></span>
-      <button @click="refresh()" class="ml-2 text-orange-600 hover:text-orange-700 dark:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded" :disabled="loading">
+      <button @click="refresh()" class="ml-2 text-orange-600 hover:text-orange-700 dark:text-orange-400 transition-colors rounded" :disabled="loading">
         <svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
         </svg>
@@ -39,7 +39,7 @@ permalink: /podroll/
       {# Error State #}
       <div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
         <p class="text-red-700 dark:text-red-400" x-text="error"></p>
-        <button @click="refresh()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline focus:outline-none focus:ring-2 focus:ring-red-500 rounded">Try again</button>
+        <button @click="refresh()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
       </div>
 
       {# Filter by Podcast #}
@@ -47,7 +47,7 @@ permalink: /podroll/
         <div class="relative">
           <select
             x-model="filterPodcast"
-            class="w-full sm:w-auto appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-10 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-orange-500"
+            class="w-full sm:w-auto appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-10 text-sm text-surface-700 dark:text-surface-300"
           >
             <option value="all">All Podcasts</option>
             <template x-for="source in sortedSources" :key="source.title">
@@ -63,12 +63,12 @@ permalink: /podroll/
       {# Episodes List #}
       <div x-show="episodes.length > 0" class="space-y-4">
         <template x-for="episode in filteredEpisodes" :key="episode.id">
-          <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
+          <article class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
             {# Episode Header #}
             <div class="flex items-start gap-4 mb-4">
               <div class="flex-1 min-w-0">
                 <h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100 mb-1">
-                  <a :href="episode.url" class="hover:text-orange-600 dark:hover:text-orange-400" target="_blank" rel="noopener" x-text="episode.title"></a>
+                  <a :href="episode.url" class="hover:text-orange-600 dark:hover:text-orange-400 transition-colors" target="_blank" rel="noopener" x-text="episode.title"></a>
                 </h2>
                 <div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
                   <a
@@ -118,7 +118,7 @@ permalink: /podroll/
             <div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
               <a
                 :href="episode.url"
-                class="inline-flex items-center gap-2 text-sm text-orange-600 hover:text-orange-700 dark:text-orange-400"
+                class="inline-flex items-center gap-2 text-sm text-orange-600 hover:text-orange-700 dark:text-orange-400 transition-colors"
                 target="_blank"
                 rel="noopener"
               >
@@ -130,7 +130,7 @@ permalink: /podroll/
               <a
                 x-show="episode.podcast?.feedUrl"
                 :href="episode.podcast?.feedUrl"
-                class="inline-flex items-center gap-2 text-sm text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
+                class="inline-flex items-center gap-2 text-sm text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 transition-colors"
                 target="_blank"
                 rel="noopener"
                 title="Subscribe to feed"
@@ -172,7 +172,7 @@ permalink: /podroll/
         <button
           @click="loadMore()"
           :disabled="loadingMore"
-          class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-orange-500"
+          class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
         >
           <span x-show="!loadingMore">Load More Episodes</span>
           <span x-show="loadingMore" class="flex items-center gap-2">
@@ -229,7 +229,7 @@ permalink: /podroll/
                 </div>
                 <a
                   :href="source.xmlUrl"
-                  class="opacity-0 group-hover:opacity-100 text-surface-400 hover:text-orange-600 transition-opacity"
+                  class="opacity-0 group-hover:opacity-100 text-surface-400 hover:text-orange-600 transition-opacity transition-colors"
                   target="_blank"
                   rel="noopener"
                   title="RSS Feed"