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>

2
src/index.html
View file

@ -33,7 +33,7 @@ permalink: /
<h2>Other pages</h2>
<p>Some of my other pages you can check out!</p>
</header>
<ul class="[ cluster p-0 gap-0.5 list-none ]" role="list">
<ul class="cluster p-0 gap-0.5 list-none" role="list">
<li>
<a href="/about" class="button">About</a>
</li>

2
src/pages/404.html
View file

@ -4,7 +4,7 @@ title: 404 - Can't Find That Frog
youtube: true
---
<section class="[ flow ]">
<section class="flow">
<h1>404 🍞</h1>
<p>Couldn't find what you're looking for. But would you like some bread for your journey home? 🥖</p>
{% youtube "GQw-aEk05qY", "Call 1800 Tobë ( Bread Ad )" %}

2
src/pages/blogroll.html
View file

@ -3,7 +3,7 @@ title: Blogroll
description: A collection of my favourite sites.
---
<section class="[ flow ]">
<section class="flow">
<h1>Blogroll</h1>
<p>A collection of my favourite sites, in no particular order.</p>
<p>

4
src/pages/books/index.html
View file

@ -13,10 +13,10 @@ permalink: "books/index.html"
<h2>
<a href="tags">Tags</a>
</h2>
<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 %}
<li>
<a class="[ button ]" href="tag/{{ tag.tag | slugify }}">
<a class="button" href="tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>

4
src/pages/books/tags.html
View file

@ -7,10 +7,10 @@ permalink: "books/tags/index.html"
{% set tags = collections.book | allTagCounts(["book"]) %}
<section class="flow">
<h1>Tagged in Books</h1>
<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 %}
<li>
<a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
<a class="button" href="../tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>

12
src/pages/contact.html
View file

@ -86,6 +86,18 @@ permalink: "/contact/index.html"
<td>Battle.net</td>
<td>Armitage#1801</td>
</tr>
<tr>
<td>Apple Music</td>
<td>
<a href="https://music.apple.com/profile/wonderfulfrog" target="_blank">wonderfulfrog</a>
</td>
</tr>
<tr>
<td>Backloggd</td>
<td>
<a href="https://www.backloggd.com/u/wonderfulfrog" target="_blank">wonderfulfrog</a>
</td>
</tr>
</tbody>
</table>
</section>

1
src/pages/fun/ray.html
View file

@ -1,5 +1,6 @@
---
permalink: /ray/index.html
layout: null
---
Welcome to your space Ray. The content will never change.

4
src/pages/games/index.html
View file

@ -15,10 +15,10 @@ permalink: "games/index.html"
<h2>
<a href="tags">Tags</a>
</h2>
<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 %}
<li>
<a class="[ button ]" href="tag/{{ tag.tag | slugify }}">
<a class="button" href="tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>

4
src/pages/games/tags.html
View file

@ -7,10 +7,10 @@ permalink: "games/tags/index.html"
{% set tags = collections.game | allTagCounts(["game"]) %}
<section class="flow">
<h1>Tagged in Games</h1>
<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 %}
<li>
<a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
<a class="button" href="../tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>

28
src/pages/links.md
View file

@ -1,28 +0,0 @@
---
title: Links
---
# Find me online
Other places I have an online presence.
## Socials
- [Mastodon][mastodon]
- [Last.fm][lastfm]
- [GitHub][github]
- [Apple Music][applemusic]
- [LinkedIn][linkedin]
- [Backloggd][backloggd]
[mastodon]: {{ meta.social.mastodon }}
[lastfm]: {{ meta.social.lastfm }}
[github]: {{ meta.social.github }}
[applemusic]: https://music.apple.com/profile/wonderfulfrog
[linkedin]: https://www.linkedin.com/in/devin-haska-bb90a7253
[backloggd]: https://www.backloggd.com/u/wonderfulfrog

6
src/pages/now.html
View file

@ -8,7 +8,7 @@ description: What's going on now and all the latest with myself.
<p>What am I doing right now? Everything on here is automatically generated from various data sources.</p>
{% if letterboxd.length > 0 %}
<h2>🍿 Movies</h2>
<ul class="[ media-grid ][ p-0 ]" role="list">
<ul class="media-grid p-0" role="list">
{% for movie in letterboxd %}
<li class="radius-0.5">
<a href="{{ movie.url }}"
@ -17,7 +17,7 @@ description: What's going on now and all the latest with myself.
{% set textContent %}
{{ movie.title }}
{% endset %}
<p class="[ visually-hidden ]">{{ movie.title }}</p>
<p class="visually-hidden">{{ movie.title }}</p>
{% if movie.imgSrc %}
<img src="{{ movie.imgSrc }}" alt="" />
{% else %}
@ -28,6 +28,6 @@ description: What's going on now and all the latest with myself.
{% endfor %}
</ul>
{% endif %}
<p class="[ font-size-s mt-2 ]">
<p class="font-size-s mt-2">
What is a `/now` page? Check out <a href="https://nownownow.com/about">nownownow.com</a>.
</p>

2
src/pages/posts.html
View file

@ -10,7 +10,7 @@ description: Read all of my posts.
</p>
{% set itemsByYear = collections.post | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">
<section class="flow">
{% for year in years %}
{% set itemsInYear = itemsByYear[year] %}
{{ yearList(itemsInYear, year) }}

30
src/pages/styleguide.html
View file

@ -23,24 +23,24 @@ description: A demo of the site's theme.
An abbreviation: <abbr title="Hypertext Markup Language">HTML</abbr>
</p>
<hr />
<div class="[ flex ]">
<div class="[ size-2 ]" style="background-color: var(--color-primary)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-secondary)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-background)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-surface)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-border)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-text)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-fadeText)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
<div class="flex">
<div class="size-2" style="background-color: var(--color-primary)"></div>
<div class="size-2" style="background-color: var(--color-secondary)"></div>
<div class="size-2" style="background-color: var(--color-background)"></div>
<div class="size-2" style="background-color: var(--color-surface)"></div>
<div class="size-2" style="background-color: var(--color-border)"></div>
<div class="size-2" style="background-color: var(--color-text)"></div>
<div class="size-2" style="background-color: var(--color-fadeText)"></div>
<div class="size-2" style="background-color: var(--color-shadow)"></div>
</div>
<hr />
<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 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 ]">
<p class="[ pill ]">A pill</p>
<p class="[ pill ]">99+</p>
<div class="flex flex-wrap gap-1">
<p class="pill">A pill</p>
<p class="pill">99+</p>
</div>
<hr />
<a href="#">A link</a>

2
src/pages/tag.html
View file

@ -17,7 +17,7 @@ eleventyComputed:
</p>
{% set itemsByYear = collections.postsByTag[tag] | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">
<section class="flow">
{% for year in years %}
{% set itemsInYear = itemsByYear[year] %}
{{ yearList(itemsInYear, year) }}

6
src/pages/tags.html
View file

@ -4,12 +4,12 @@ description: Browse posts by all tags.
---
{% set tags = collections.post | allTagCounts %}
<section class="[ flow ]">
<section class="flow">
<h1>{{ title }}</h1>
<ol class="[ cluster p-0 gap-0.5 ]" role="list">
<ol class="cluster p-0 gap-0.5" role="list">
{% for tag in tags %}
<li>
<a href="/tags/{{ tag.tag | slugify }}" class="[ button ]">{{ tag.tag }} <span class="[ button__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>

4
src/pages/watching/movies/recent.html
View file

@ -12,10 +12,10 @@ permalink: "watching/movies/recent/index.html"
<h2>
<a href="../tags">Tags</a>
</h2>
<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 %}
<li>
<a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
<a class="button" href="../tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>

4
src/pages/watching/movies/tags.html
View file

@ -7,10 +7,10 @@ permalink: "watching/movies/tags/index.html"
{% set tags = collections.movie | allTagCounts(["movie"]) %}
<section class="flow">
<h1>Tagged in Movies</h1>
<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 %}
<li>
<a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
<a class="button" href="../tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>

4
src/pages/watching/shows/recent.html
View file

@ -12,10 +12,10 @@ permalink: "watching/shows/recent/index.html"
<h2>
<a href="../tags">Tags</a>
</h2>
<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 %}
<li>
<a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
<a class="button" href="../tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>

4
src/pages/watching/shows/tags.html
View file

@ -7,10 +7,10 @@ permalink: "watching/shows/tags/index.html"
{% set tags = collections.tv | allTagCounts(["tv"]) %}
<section class="flow">
<h1>Tagged in Shows</h1>
<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 %}
<li>
<a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
<a class="button" href="../tag/{{ tag.tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag.tag }}</a>
</li>

8
src/pages/webrings.html
View file

@ -12,23 +12,23 @@ description: What's a webring?
<a href="https://cs.sjoy.lol/" target="_blank">CSS JOY Webring</a>
</h2>
<p>For those of us who take joy in messing around with CSS :)</p>
<ul class="[ cluster ][ list-none p-0 ]">
<ul class="cluster list-none p-0">
<li>
<a class="[ button ]"
<a class="button"
href="https://webri.ng/webring/cssjoy/previous?via=https://wonderfulfrog.com/">
{% include "svgs/arrow-left.svg" %}
<span class="visually-hidden">Previous website</span>
</a>
</li>
<li>
<a class="[ button ]"
<a class="button"
href="https://webri.ng/webring/cssjoy/random?via=https://wonderfulfrog.com/">
{% include "svgs/dice.svg" %}
<span class="visually-hidden">Random website</span>
</a>
</li>
<li>
<a class="[ button ]"
<a class="button"
href="https://webri.ng/webring/cssjoy/next?via=https://wonderfulfrog.com/">
{% include "svgs/arrow-right.svg" %}
<span class="visually-hidden">Next website</span>