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

chore: remove bracket syntax for css classes in html

Browse source
This commit is contained in:
Devin Haska 2025-01-24 22:31:10 -08:00
parent 12ed6f0e34
commit 1847cc96ef
32 changed files with 104 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/_includes/layouts/base.html
View file

@ -22,10 +22,10 @@
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
{% endif %}
</head>
<body class="[ flex-col ]">
<body class="flex-col">
{% noRobots %}
{% include "partials/header.html" %}
<main id="main" class="[ flow flex-1 wrapper ]" tabindex="-1">
<main id="main" class="flow flex-1 wrapper" tabindex="-1">
{{ content | safe }}
</main>
{% include "partials/footer.html" %}

4
src/_includes/layouts/book.html
View file

@ -38,10 +38,10 @@ layout: "layouts/base"
</div>
</footer>
<hr class="my-2">
<ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
<ul class="categories cluster list-none p-0 line-height-m">
{% for tag in tags | filter("book") %}
<li>
<a class="[ button ]" href="/books/tag/{{ tag | slugify }}">
<a class="button" href="/books/tag/{{ tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag }}</a>
</li>

4
src/_includes/layouts/game.html
View file

@ -41,10 +41,10 @@ layout: "layouts/base"
</div>
</footer>
<hr class="my-2">
<ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
<ul class="categories cluster list-none p-0 line-height-m">
{% for tag in tags | filter("game") %}
<li>
<a class="[ button ]" href="/books/tag/{{ tag | slugify }}">
<a class="button" href="/books/tag/{{ tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag }}</a>
</li>

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

@ -3,15 +3,15 @@ layout: "layouts/base"
---
{% from "macros/date.njk" import format %}
<article class="[ flow ]">
<header class="[ flow flow-space-1 mb-2 ]">
<article class="flow">
<header class="flow flow-space-1 mb-2">
{{ format(page.date) }}
<h1>{{ title }}</h1>
<p class="[ text-fadeText flow-space-0.25 ]">{{ excerpt }}</p>
<ul class="[ categories ] [ cluster list-none p-0 flow-space-2 line-height-m ]">
<p class="text-fadeText flow-space-0.25">{{ excerpt }}</p>
<ul class="categories cluster list-none p-0 flow-space-2 line-height-m">
{% for tag in tags | filter(["post"]) %}
<li>
<a class="[ button ]" href="/tags/{{ tag | slugify }}">
<a class="button" href="/tags/{{ tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag }}</a>
</li>

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

@ -1,26 +0,0 @@
{% 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 %}
</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>
{% endmacro %}
{% macro yearList(posts, year, format = "MM/DD", showType = true) %}
<section class="[ flow ]">
<header class="[ cluster gap-0.5 ]">
<h2>{{ year }}</h2>
<p class="[ pill ]">{{ posts | length }}</p>
</header>
{{ list(posts, format) }}
</section>
{% endmacro %}

4
src/_includes/macros/date.njk
View file

@ -1,6 +1,6 @@
{% macro format(dateString) %}
<time class="[ date ] [ flex items-center gap-0.5 text-fadeText ]"
<time class="date flex items-center gap-0.5 text-fadeText"
datetime="{{ dateString }}">
<span class="[ text-primary line-height-s ]">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
<span class="text-primary line-height-s">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
</time>
{% endmacro %}

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

@ -1,20 +1,20 @@
{% macro one(post, fmt = "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(fmt) }}</time>
<p class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</p>
<time datetime="{{ post.date }}" class="text-fadeText">{{ post.date | formatDate(fmt) }}</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="[ flow p-0 ]" role="list">
{% for post in posts %}<li class="[ flow-space-0.5 ]">{{ one(post, format) }}</li>{% endfor %}
<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 ]">
<header class="[ cluster gap-0.5 ]">
<section class="flow">
<header class="cluster gap-0.5">
<h2>{{ year }}</h2>
<p class="[ pill ]">{{ posts | length }}</p>
<p class="pill">{{ posts | length }}</p>
</header>
{{ list(posts, format) }}
</section>

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

@ -1,13 +1,13 @@
{% macro stars(number) %}
{% set filledStars = number %}
{% set emptyStars = 5 - number %}
<ul class="[ stars ] [ flex list-none p-0 mb-0 text-primary ]"
<ul class="stars flex list-none p-0 mb-0 text-primary"
aria-description="{{ number }} out of 5 stars">
{% for i in range(0, filledStars) %}
<li class="[ star-filled ]">{% include "svgs/star.svg" %}</li>
<li class="star-filled">{% include "svgs/star.svg" %}</li>
{% endfor %}
{% for i in range(0, emptyStars) %}
<li class="[ star-empty ]">{% include "svgs/star-empty.svg" %}</li>
<li class="star-empty">{% include "svgs/star-empty.svg" %}</li>
{% endfor %}
</ul>
{% endmacro %}

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

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

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

@ -1,9 +1,9 @@
<footer class="[ bg-surface mt-1.5 py-1.5 ]">
<div class="[ wrapper flow ]">
<div class="[ repel ]">
<footer class="bg-surface mt-1.5 py-1.5">
<div class="wrapper flow">
<div class="repel">
<p>&copy; {{ meta.author }} 2018 - 2025.</p>
<nav>
<ul class="[ cluster p-0 m-0 line-height-m ]" role="list">
<ul class="cluster p-0 m-0 line-height-m" role="list">
{% for link in navigation.bottom %}
<li>
<a href="{{ link.url }}">{{ link.text }}</a>
@ -12,21 +12,19 @@
</ul>
</nav>
</div>
<div class="[ repel ]">
<nav class="[ flow-space-0.5 ]">
<ul class="[ cluster p-0 m-0 gap-0.5 ]" role="list">
<div class="repel">
<nav class="flow-space-0.5">
<ul class="cluster p-0 m-0 gap-0.5" role="list">
<li>
<span class="[ visually-hidden ]">Feeds</span>
<a href="/feeds"
class="[ button button--alt ]"
aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
<span class="visually-hidden">Feeds</span>
<a href="/feeds" class="button button--alt" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
</li>
{% for key, url in meta.social %}
{% set alt = key | capitalize %}
<li>
<span class="[ visually-hidden ]">{{ alt }}</span>
<span class="visually-hidden">{{ alt }}</span>
<a href="{{ url }}"
class="[ button button--alt ]"
class="button button--alt"
target="_blank"
rel="me external noreferrer noopener"
aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>
@ -34,7 +32,7 @@
{% endfor %}
</ul>
</nav>
<ul class="[ cluster p-0 m-0 ]" role="list">
<ul class="cluster p-0 m-0" role="list">
<li>
<a href="/webrings">Webrings</a>
</li>

14
src/_includes/partials/header.html
View file

@ -1,9 +1,9 @@
<header class="[ navbar ][ py-1 mb-2 ]">
<header class="navbar py-1 mb-2">
<a href="#main">Skip to content</a>
<div class="[ wrapper ]">
<nav class="[ repel ]">
<div class="[ site-logo ] [ flex items-center gap-0.5 ]">
<a class="[ logo ] [ flex items-center justify-center ]"
<div class="wrapper">
<nav class="repel">
<div class="site-logo flex items-center gap-0.5">
<a class="logo flex items-center justify-center"
aria-label="Go to index"
href="{{ meta.url }}">
<img eleventy:ignore
@ -12,9 +12,7 @@
height="32"
alt="" />
</a>
<a class="[ wordmark ] [ flex ]"
href="{{ meta.url }}"
aria-label="Go to index">
<a class="wordmark flex" href="{{ meta.url }}" aria-label="Go to index">
<svg height="0" width="0">
<filter id="3d_text" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="1" stdDeviation="0" flood-opacity="1" flood-color="var(--color-shadow)" />

6
src/_includes/partials/menu.html
View file

@ -1,10 +1,10 @@
<ul class="[ menu ] [ list-none cluster p-0 m-0 ]">
<ul class="menu list-none cluster p-0 m-0">
{% for item in navigation.top %}
<li>
<a class="[ button button--alt font-size-s line-height-m ]"
<a class="button button--alt font-size-s line-height-m"
href="{{ item.url }}">
{% include "svgs/" + item.icon + ".svg" %}
<span class="[ visually-hidden ]">{{ item.text }}</span></a>
<span class="visually-hidden">{{ item.text }}</span></a>
</li>
{% endfor %}
</ul>