add tag-bar styles

This commit is contained in:
Inhji 2023-09-11 07:13:37 +02:00
parent 838be53dec
commit 7f12b81abf
2 changed files with 23 additions and 8 deletions

View file

@ -126,6 +126,24 @@
@apply before:content-['·']
}
.tag-bar {
& .letter {
@apply capitalize border rounded font-sm px-2 py-1 inline-block mb-2;
}
& li {
@apply mb-2;
}
& a {
@apply border rounded font-sm px-2 py-1 inline-block mb-2 transition;
}
& .count {
@apply text-xs font-mono rounded-full py-0.5 px-1 align-middle;
}
}
.pagination {
@apply flex justify-between mt-6;

View file

@ -1,17 +1,14 @@
<ul>
<ul class="tag-bar">
<%= for {letter, tag_group} <- group_tags(@notes) do %>
<li class="mb-2">
<span class="capitalize text-theme-primary border border-theme-background1 rounded font-sm px-2 py-1 inline-block mb-2">
<li>
<span class="letter">
<%= letter %>
</span>
<%= for tag <- tag_group do %>
<a
href={~p"/tagged-with/#{tag.slug}"}
class="border border-theme-background1 rounded font-sm px-2 py-1 inline-block mb-2 hover:bg-theme-background1 transition"
>
<a href={~p"/tagged-with/#{tag.slug}"}>
<%= tag.name %>
<span class="text-theme-base text-xs font-mono bg-theme-primary/25 rounded-full py-0.5 px-1 align-middle">
<span class="count">
<%= Enum.count(tag.notes) %>
</span>
</a>