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 %}