wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: update pill style

Browse source
This commit is contained in:
Devin Haska 2024-02-09 23:40:24 -08:00
parent f576d237d7
commit da1035826f
2 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/assets/css/blocks/pill.css
View file

@ -1,11 +1,17 @@
.pill { .pill {
background-color: var(--color-bg-soft); background-color: var(--color-bg-soft);
border-radius: 0.5rem; border-radius: 1rem;
transition: transform var(--transition-duration);
} }
.pill:hover { .pill:hover {
background-color: var(--color-text); background-color: var(--color-text);
color: var(--color-bg); color: var(--color-bg);
transform: translateY(-2px);
}
.pill:active {
transform: translateY(2px);
} }
a.pill { a.pill {

2
src/content/pages/tags.html
View file

@ -12,7 +12,7 @@ title: All tags
{% set key = tag | first %} {% set key = tag | first %}
{% set count = tag | last %} {% set count = tag | last %}
<li> <li>
<a href="/tag/{{ key }}" class="[ pill ] [ px-1 py-0.5 ]">{{ key }} <span class="[ pill-count ]">{{ count }}</span></a> <a href="/tag/{{ key }}" class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]">{{ key }} <span class="[ pill-count ]">{{ count }}</span></a>
</li> </li>
{% endfor %} {% endfor %}
</ol> </ol>