refactor(ui): improve UI/UX design and spacing
- Increase card padding and gaps for better visual hierarchy - Add hover lift effect to cards with smooth transitions - Improve typography with larger headings and better line-height - Darken meta text colors for better readability - Add checkbox styling with accent color - Make tags interactive with hover effects - Add mobile responsive styles for forms and footer - Replace Unicode arrows with SVG icons - Improve focus styles for accessibility - Increase badge padding and font-weight - Add subtle shadow to cards by default
This commit is contained in:
@@ -50,7 +50,12 @@
|
||||
<span class="tag" data-testid="post-tag-{{ post.id }}-{{ loop.index }}">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="/posts/{{ post.id }}" class="btn btn-sm" data-testid="btn-read-more-{{ post.id }}">Read more</a>
|
||||
<a href="/posts/{{ post.id }}" class="btn btn-sm" data-testid="btn-read-more-{{ post.id }}">
|
||||
Read more
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.25rem;">
|
||||
<path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user