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

feat: simplify pill class usage

Browse source
This commit is contained in:
Devin Haska 2024-11-11 17:52:27 -08:00
parent 72b80f7e8f
commit c2471ea467
8 changed files with 55 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/_includes/macros/catalogue.njk
View file

@ -1,36 +1,26 @@
{% from "macros/utils.njk" import stars %}
{% macro one(post, format, showType = true) %}
<article class="[ posts-list-item column-gap-0.5 justify-between line-height-m ]">
<div class="[ cluster gap-0.5 ]"><a href="{{ post.url }}" class="[ line-height-m ]">{{ post.data.title }}</a>
{% if showType %}<p class="[ font-size-s text-fadeText ]">{{ post.data.tags[1] }}</p>{% endif %}</div>
<div class="[ cluster ]">
{% if post.data.rating %}
{{ stars(post.data.rating) }}
{% endif %}
<article class="[ posts-list-item column-gap-0.5 justify-between line-height-m ]">
<div class="[ cluster gap-0.5 ]">
<a href="{{ post.url }}" class="[ line-height-m ]">{{ post.data.title }}</a>
{% if showType %}<p class="[ font-size-s text-fadeText ]">{{ post.data.tags[1] }}</p>{% endif %}
</div>
</article>
<div class="[ cluster ]">
{% if post.data.rating %}{{ stars(post.data.rating) }}{% endif %}
</div>
</article>
{% endmacro %}
{% macro list(posts, showType = true) %}
<ol class="[ flow p-0 ]" role="list">
{% for post in posts %}
<li>
{{ one(post, format, showType) }}
</li>
{% endfor %}
</ol>
<ol class="[ flow p-0 ]" role="list">
{% for post in posts %}<li>{{ one(post, format, showType) }}</li>{% endfor %}
</ol>
{% endmacro %}
{% macro yearList(posts, year, format = "MM/DD", showType = true) %}
<section class="[ flow ]">
<section class="[ flow ]">
<header class="[ cluster gap-0.5 ]">
<h2>{{ year }}</h2>
<p class="[ pill ]" data-state="extrasmall">
{{ posts | length }}
</p>
<p class="[ pill ]">{{ posts | length }}</p>
</header>
{{ list(posts, format) }}
</section>
</section>
{% endmacro %}

26
src/_includes/macros/posts.njk
View file

@ -1,29 +1,21 @@
{% macro one(post, format = "MM/DD") %}
<article class="[ posts-list-item column-gap-0.5 justify-between line-height-l ]">
<article class="[ posts-list-item column-gap-0.5 justify-between line-height-l ]">
<a href="{{ post.url }}">{{ post.data.title }}</a>
<time datetime="{{ post.date }}" class="[ text-fadeText ]">{{ post.date | formatDate(format) }}</time>
<time datetime="{{ post.date }}" class="[ text-fadeText ]">{{ post.date | formatDate(<built-in function format>) }}</time>
<p class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</p>
</article>
</article>
{% endmacro %}
{% macro list(posts, format = "MM/DD") %}
<ol class="[ flow p-0 ]" role="list">
{% for post in posts %}
<li class="[ flow-space-0.5 ]">
{{ one(post, format) }}
</li>
{% endfor %}
</ol>
<ol class="[ flow p-0 ]" role="list">
{% for post in posts %}<li class="[ flow-space-0.5 ]">{{ one(post, format) }}</li>{% endfor %}
</ol>
{% endmacro %}
{% macro yearList(posts, year, format = "MM/DD") %}
<section class="[ flow ]">
<section class="[ flow ]">
<header class="[ cluster gap-0.5 ]">
<h2>{{ year }}</h2>
<p class="[ pill ]" data-state="extrasmall">
{{ posts | length }}
</p>
<p class="[ pill ]">{{ posts | length }}</p>
</header>
{{ list(posts, format) }}
</section>
</section>
{% endmacro %}

4
src/_includes/partials/catalogue-types.html
View file

@ -1,11 +1,11 @@
{% set catalogueTypes = collections.catalogueByType | keys %}
<ul class="[ cluster p-0 gap-0.5 ]" role="list">
<li>
<a class="[ pill ]" href="/catalogue">all<span class="[ pill-count ]">{{ collections.catalogue | length }}</span></a>
<a class="[ button ]" href="/catalogue">all<span class="[ button__count ]">{{ collections.catalogue | length }}</span></a>
</li>
{% for type in catalogueTypes %}
<li>
<a class="[ pill ]" href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
<a class="[ button ]" href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ button__count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
</li>
{% endfor %}
</ul>

12
src/css/blocks/button.css
View file

@ -88,3 +88,15 @@
}
}
}
.button__count {
color: var(--color-fadeText);
}
@media (hover: hover) {
.button:hover {
.button__count {
color: var(--color-border);
}
}
}

71
src/css/blocks/pill.css
View file

@ -1,82 +1,11 @@
.pill {
display: inline-flex;
align-items: center;
padding-inline: var(--spacing-1);
padding-block: var(--spacing-0\.5);
gap: var(--spacing-0\.5);
position: relative;
transition: transform 0.1s ease;
&::before,
&::after {
position: absolute;
inset: 0;
content: "";
z-index: -1;
border-radius: var(--spacing-1);
transition: opacity 0.3s ease;
}
&::before {
background-color: var(--color-surface);
}
&::after {
background-color: var(--color-text);
opacity: 0;
}
}
.pill[data-state="small"] {
color: var(--color-fadeText);
font-size: 0.8rem;
line-height: 0.8rem;
padding-inline: var(--spacing-0\.5);
padding-block: var(--spacing-0\.25);
border-radius: var(--spacing-0\.25);
}
.pill[data-state="extrasmall"] {
color: var(--color-fadeText);
padding-inline: var(--spacing-0\.5);
padding-block: var(--spacing-0\.25);
font-size: 0.8rem;
line-height: 0.8rem;
border-radius: var(--spacing-0\.5);
}
button.pill:hover,
a[href].pill:hover {
color: var(--color-primary);
transform: translateY(-2px);
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
button.pill:active,
a[href].pill:active {
transform: translateY(2px);
}
a.pill {
text-decoration: none;
}
.pill-count {
color: var(--color-fadeText);
}
button.pill:hover,
a[href].pill:hover {
.pill-count {
color: var(--color-border);
}
}

2
src/pages/catalogue-type.html
View file

@ -13,7 +13,7 @@ eleventyComputed:
---
{% from "macros/catalogue.njk" import yearList %}
<h1>Catalogue: {{ type | pluralize | capitalize }}</h1>
<h1>{{ type | pluralize | capitalize }}</h1>
{% include "partials/catalogue-types.html" %}
{% set itemsByYear = collections.catalogueByType[type] | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}

14
src/pages/styleguide.html
View file

@ -34,19 +34,13 @@ description: A demo of the site's theme.
<div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
</div>
<hr />
<div class="[ flex ]">
<div class="[ flex gap-1 ]">
<a href="#" class="[ button ]">A button</a>
<a href="#" class="[ button ]">A button with count <span class="[ button__count ]">4</span></a>
</div>
<div class="[ flex flex-wrap gap-1 ]">
<a href="#" class="[ pill ]">A pill</a>
<a href="#" class="[ pill ]">
A pill link with a count <span class="[ pill-count ]">3</span>
</a>
<p class="[ pill ]">
A pill with a count <span class="[ pill-count ]">3</span>
</p>
<p class="[ pill ]" data-state="small">A small pill</p>
<p class="[ pill ]" data-state="extrasmall">99+</p>
<p class="[ pill ]">A pill</p>
<p class="[ pill ]">99+</p>
</div>
<hr />
<a href="#">A link</a>

2
src/pages/tags.html
View file

@ -9,7 +9,7 @@ description: Browse posts by all tags.
<ol class="[ cluster p-0 gap-0.5 ]" role="list">
{% for tag in tags %}
<li>
<a href="/tags/{{ tag.tag | slugify }}" class="[ pill ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
<a href="/tags/{{ tag.tag | slugify }}" class="[ button ]">{{ tag.tag }} <span class="[ button__count ]">{{ tag.count }}</span></a>
</li>
{% endfor %}
</ol>