giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix(radius): correct border-radius to match system

Browse Source 
- 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
This commit is contained in:
Ricardo
2026-03-07 15:59:29 +01:00
parent 931c784dec
commit 9832c671c6
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/components/h-card.njk
View File

@@ -31,7 +31,7 @@
alt="{{ authorName }}" alt="{{ authorName }}"
width="64" width="64"
height="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" loading="lazy"
itemprop="image" itemprop="image"
> >
@@ -89,7 +89,7 @@
{% if authorCategories and authorCategories.length %} {% if authorCategories and authorCategories.length %}
<div class="mt-3 flex flex-wrap gap-1"> <div class="mt-3 flex flex-wrap gap-1">
{% for category in authorCategories %} {% 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 %} {% endfor %}
</div> </div>
{% endif %} {% endif %}

18
podroll.njk
View File

@@ -16,7 +16,7 @@ permalink: /podroll/
</p> </p>
<p class="text-xs text-surface-500 mt-2" x-show="status?.episodes?.lastSync"> <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> 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"> <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"/> <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> </svg>
@@ -39,7 +39,7 @@ permalink: /podroll/
{# Error State #} {# 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"> <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> <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> </div>
{# Filter by Podcast #} {# Filter by Podcast #}
@@ -47,7 +47,7 @@ permalink: /podroll/
<div class="relative"> <div class="relative">
<select <select
x-model="filterPodcast" 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> <option value="all">All Podcasts</option>
<template x-for="source in sortedSources" :key="source.title"> <template x-for="source in sortedSources" :key="source.title">
@@ -63,12 +63,12 @@ permalink: /podroll/
{# Episodes List #} {# Episodes List #}
<div x-show="episodes.length > 0" class="space-y-4"> <div x-show="episodes.length > 0" class="space-y-4">
<template x-for="episode in filteredEpisodes" :key="episode.id"> <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 #} {# Episode Header #}
<div class="flex items-start gap-4 mb-4"> <div class="flex items-start gap-4 mb-4">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100 mb-1"> <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> </h2>
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500"> <div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
<a <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"> <div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
<a <a
:href="episode.url" :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" target="_blank"
rel="noopener" rel="noopener"
> >
@@ -130,7 +130,7 @@ permalink: /podroll/
<a <a
x-show="episode.podcast?.feedUrl" x-show="episode.podcast?.feedUrl"
:href="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" target="_blank"
rel="noopener" rel="noopener"
title="Subscribe to feed" title="Subscribe to feed"
@@ -172,7 +172,7 @@ permalink: /podroll/
<button <button
@click="loadMore()" @click="loadMore()"
:disabled="loadingMore" :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">Load More Episodes</span>
<span x-show="loadingMore" class="flex items-center gap-2"> <span x-show="loadingMore" class="flex items-center gap-2">
@@ -229,7 +229,7 @@ permalink: /podroll/
</div> </div>
<a <a
:href="source.xmlUrl" :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" target="_blank"
rel="noopener" rel="noopener"
title="RSS Feed" title="RSS Feed"