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

feat: various markup improvements

Browse source
This commit is contained in:
Devin Haska 2024-02-28 10:32:37 -08:00
parent f286523455
commit 850173ec90
12 changed files with 58 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/_includes/layouts/catalogue-item.html
View file

@ -6,16 +6,14 @@ imageCaption: ""
{% set filteredTags = tags | filterCatalogueTags %}
<article class="[ catalogue ] [ flow ]">
<div style="--flow-space: 2em">
{% block image %}
{% if image %}
{% image image, imageAlt, imageCaption %}
{% endif %}
{% endblock %}
</div>
{% block image %}
{% if image %}
{% image image, imageAlt, imageCaption %}
{% endif %}
{% endblock %}
<section class="[ catalogue-meta ] [ flow ]">
{% block title %}<h1>{{ title }}</h1>{% endblock %}
{% if subtitle %}<h2 class="[ text-fadeText ]" style="--flow-space: 0.25em">{{ subtitle }}</h2>{% endif %}
{% if subtitle %}<h2 class="[ text-fadeText flow-space-0.25 ]">{{ subtitle }}</h2>{% endif %}
{{ tertiary | safe }}
{% if rating %}
<div class="[ flex justify-center ]">
@ -24,7 +22,7 @@ imageCaption: ""
</div>
{% endif %}
{% if filteredTags | length > 0 %}
<ul class="[ categories list-none p-0 mb-0 ] [ cluster justify-center ]">
<ul class="[ categories ] [ cluster justify-center p-0 ]" role="list">
{% for tag in filteredTags %}<li class="[ flex gap-0.25 ]">{{ tag }}</li>{% endfor %}
</ul>
{% endif %}

2
src/_includes/layouts/post.html
View file

@ -3,7 +3,7 @@ layout: "layouts/base"
---
<article class="[ flow ]">
<header class="[ flow ]" style="--flow-space: 1rem">
<header class="[ flow flow-space-1 mb-2 ]">
{% from "macros/date.njk" import format %}
{{ format(page.date) }}
<h1>{{ title }}</h1>

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

@ -3,9 +3,9 @@
{% macro one(post, format) %}
<article class="[ posts-list-item column-gap-0.5 justify-between line-height-m ]">
<a href="{{ post.url }}">{{ post.data.title }}</a>
<p class="[ text-fadeText ]">{{ post.date | formatDate("MM/DD") }}</p>
<time datetime="{{ post.date }}" class="[ text-fadeText ]">{{ post.date | formatDate("MM/DD") }}</time>
<div class="[ cluster mt-0.5 ]">
<div class="[ font-size-s ]"><p class="[ bg-surface text-fadeText p-0.5 radius-0.25 line-height-s ]">{{ post.data.tags[1] }}</p></div>
<div class="[ font-size-s ]"><p class="[ pill ]" data-state="small">{{ post.data.tags[1] }}</p></div>
{% if post.data.rating %}
{{ stars(post.data.rating) }}
{% endif %}
@ -14,7 +14,7 @@
{% endmacro %}
{% macro list(posts) %}
<ol class="[ posts-list ] [ flow list-none p-0 ]">
<ol class="[ flow p-0 ]" role="list">
{% for post in posts %}
<li>
{{ one(post, format) }}
@ -27,7 +27,7 @@
<section class="[ flow ]">
<header class="[ cluster gap-0.5 ]">
<h2>{{ year }}</h2>
<p class="[ bg-surface text-fadeText px-0.5 py-0.25 font-size-s line-height-s radius-0.5 ]">
<p class="[ pill ]" data-state="extrasmall">
{{ posts | length }}
</p>
</header>

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

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

7
src/_includes/macros/tags.njk
View file

@ -1,7 +0,0 @@
{% macro pills(tags) %}
{% if tags | length > 0 %}
<ul class="[ cluster list-none p-0 mb-0 ]" style="--gap: 0.5rem">
{% for tag in tags %}<li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>{% endfor %}
</ul>
{% endif %}
{% endmacro %}

8
src/_includes/partials/catalogue-types.html Normal file
View file

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

9
src/_includes/partials/footer.html
View file

@ -3,7 +3,7 @@
<div class="[ repel ]">
<p>&copy; {{ meta.author }} 2018-2024.</p>
<nav>
<ul class="[ list-none cluster p-0 m-0 ]">
<ul class="[ cluster p-0 m-0 ]" role="list">
{% for link in navigation.bottom %}
<li>
<a href="{{ link.url }}">{{ link.text }}</a>
@ -12,9 +12,8 @@
</ul>
</nav>
</div>
<nav style="--flow-space: var(--spacing-0\.5)">
<ul class="[ list-none cluster p-0 m-0 ]"
style="--gap: var(--spacing-0\.5)">
<nav class="[ flow-space-0.5 ]">
<ul class="[ cluster p-0 m-0 gap-0.5 ]" role="list">
<li>
<span class="[ visually-hidden ]">RSS</span>
<a href="/rss.xml" target="_blank" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
@ -25,7 +24,7 @@
<span class="[ visually-hidden ]">{{ alt }}</span>
<a href="{{ url }}"
target="_blank"
rel="external noreferrer noopener"
rel="me external noreferrer noopener"
aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>
</li>
{% endfor %}

12
src/catalogue-type.html
View file

@ -13,16 +13,8 @@ eleventyComputed:
---
{% from "macros/catalogue.njk" import yearList %}
<h1>{{ type | pluralize | capitalize }}</h1>
{% set catalogueTypes = collections.catalogueByType | keys %}
<ul class="[ cluster p-0 gap-0.5 ]" role="list">
{% for type in catalogueTypes %}
<li>
<a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
</li>
{% endfor %}
</ul>
<h1>Catalogue: {{ type | pluralize | capitalize }}</h1>
{% include "partials/catalogue-types.html" %}
{% set itemsByYear = collections.catalogueByType[type] | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">

10
src/catalogue.html
View file

@ -7,15 +7,7 @@ title: Catalogue
{% from "macros/catalogue.njk" import yearList %}
<h1>Catalogue</h1>
<p>A collection of my thoughts on various forms of media that I consume.</p>
{% set catalogueTypes = collections.catalogueByType | keys %}
<ul class="[ cluster list-none p-0 gap-0.5 ]">
{% for type in catalogueTypes %}
<li>
<a class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]"
href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ pill-count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
</li>
{% endfor %}
</ul>
{% include "partials/catalogue-types.html" %}
{% set itemsByYear = collections.catalogue | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">

2
src/catalogue/books/books.11tydata.js
View file

@ -5,6 +5,6 @@ module.exports = {
linkTitle: "View book details",
eleventyComputed: {
tertiary: (data) =>
`<p style="--flow-space: 0.5em"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
`<p class="[ flow-space-0.5 ]"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
},
};

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

@ -1,18 +1,39 @@
.pill {
background-color: var(--color-surface);
border-radius: 1rem;
border-radius: var(--spacing-1);
display: flex;
padding-inline: var(--spacing-1);
padding-block: var(--spacing-0\.5);
gap: var(--spacing-0\.5);
transition:
transform var(--transition-duration),
background-color 75ms;
}
.pill:hover {
.pill[data-state="small"] {
color: var(--color-fadeText);
font-size: 0.8rem;
line-height: 0.8rem;
padding-inline: var(--spacing-0\.5);
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);
}
.pill:not([data-state]):hover {
background-color: var(--color-text);
color: var(--color-primary);
transform: translateY(-2px);
}
.pill:active {
.pill:not([data-state]):active {
transform: translateY(2px);
}
@ -24,6 +45,6 @@ a.pill {
color: var(--color-fadeText);
}
.pill:hover .pill-count {
.pill:not([data-state]):hover .pill-count {
color: var(--color-border);
}

5
src/tags.html
View file

@ -7,11 +7,10 @@ title: All tags
{% set tags = collections.post | allTagCounts %}
<section class="[ flow ]">
<h1>{{ title }}</h1>
<ol class="[ cluster list-none p-0 ]" style="--gap: var(--spacing-0\.5)">
<ol class="[ cluster p-0 gap-0.5 ]" role="list">
{% for tag in tags %}
<li>
<a href="/tags/{{ tag.tag | slugify }}"
class="[ pill ] [ flex px-1 py-0.5 gap-0.5 ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
<a href="/tags/{{ tag.tag | slugify }}" class="[ pill ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
</li>
{% endfor %}
</ol>