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

fix: improve widget card styling and fix recent-comments widget

Browse Source 
Widget cards now have white bg, border, and shadow in light mode for
clear visual separation. Each widget has bottom margin for spacing.

Recent-comments widget updated to use standard .widget/.widget-title
classes instead of custom sidebar-widget class.
This commit is contained in:
Ricardo
2026-02-21 23:49:59 +01:00
parent f3268ed3f9
commit adccb1602b
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/components/widgets/recent-comments.njk
View File

@@ -1,7 +1,7 @@
{# Recent Comments Widget — sidebar #} {# Recent Comments Widget — sidebar #}
{% if recentComments and recentComments.length %} {% if recentComments and recentComments.length %}
<div class="sidebar-widget"> <div class="widget">
<h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">Recent Comments</h3> <h3 class="widget-title">Recent Comments</h3>
<ul class="space-y-3"> <ul class="space-y-3">
{% for comment in recentComments %} {% for comment in recentComments %}
<li class="text-sm"> <li class="text-sm">
@@ -14,7 +14,7 @@
<span class="font-medium">{{ comment.author.name or "Anonymous" }}</span> <span class="font-medium">{{ comment.author.name or "Anonymous" }}</span>
<p class="text-surface-600 dark:text-surface-400 line-clamp-2">{{ comment.content.text | truncate(80) }}</p> <p class="text-surface-600 dark:text-surface-400 line-clamp-2">{{ comment.content.text | truncate(80) }}</p>
{% if comment["comment-target"] %} {% if comment["comment-target"] %}
<a href="{{ comment['comment-target'] }}" class="text-xs text-surface-500 hover:underline">View post</a> <a href="{{ comment['comment-target'] }}" class="text-xs text-primary-600 dark:text-primary-400 hover:underline">View post</a>
{% endif %} {% endif %}
</div> </div>
</div> </div>

2
css/tailwind.css
View File

@@ -280,7 +280,7 @@
/* Widget cards */ /* Widget cards */
.widget { .widget {
@apply p-4 bg-surface-100 dark:bg-surface-800 rounded-lg overflow-hidden; @apply p-4 mb-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
} }
.widget-title { .widget-title {