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

feat: update all CSS to work with lilypad.css

Browse source
This commit is contained in:
Devin Haska 2025-05-29 22:05:22 -07:00
parent 7c621fedce
commit 1166807df3
Signed by: wonderfulfrog
SSH key fingerprint: SHA256:ejOGyH9064rJiikox4ykOHLeuUg1f9l8wmJxs+MzNw0
30 changed files with 275 additions and 306 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/content/posts/2024-03-02-version-3.md
View file

@ -296,7 +296,7 @@ module.exports = {
linkTitle: "View book details",
eleventyComputed: {
tertiary: (data) =>
`<p class="[ flow-space-0.5 ]"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
`<p class="[ flow-space-2 ]"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
},
};
```
@ -476,7 +476,7 @@ box-shadow:
1px 1px 0px var(--color-shadow),
2px 2px 0 var(--color-shadow);
border-radius: var(--spacing-0\.25);
border-radius: var(--spacing-1);
border: 1px solid var(--color-shadow);
transition:

6
src/includes/css/blocks/button.css
View file

@ -2,8 +2,8 @@
align-items: center;
color: var(--color-text);
display: inline-flex;
gap: var(--spacing-0\.5);
padding: var(--spacing-0\.5) var(--spacing-1);
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
position: relative;
text-decoration: none;
transition: transform 0.3s var(--transition-bounce);
@ -11,7 +11,7 @@
&::before,
&::after {
border-radius: var(--spacing-0\.5);
border-radius: var(--spacing-2);
position: absolute;
inset: 0;
content: "";

6
src/includes/css/blocks/card.css
View file

@ -1,7 +1,7 @@
.card {
border: 1px solid var(--color-shadow);
border-radius: var(--spacing-0\.5);
padding: var(--spacing-1);
border-radius: var(--spacing-2);
padding: var(--spacing-4);
background-color: var(--color-surface);
}
.card--secondary {

40
src/includes/css/blocks/media-display.css
View file

@ -1,38 +1,30 @@
.media-metadata-grid {
display: grid;
gap: var(--spacing-4);
@container (min-width: 48rem) {
grid-template-columns: 200px 1fr;
}
}
.media-metadata {
display: grid;
grid-template-columns: 150px 1fr;
row-gap: var(--spacing-1);
}
.media-image {
--aspect-ratio: 0.8;
border: 1px solid var(--color-shadow);
border-radius: var(--spacing-0\.5);
overflow: hidden;
source,
img {
aspect-ratio: var(--aspect-ratio);
height: auto;
object-fit: cover;
border-radius: var(--spacing-1);
}
}
.media-image--tall {
--aspect-ratio: 0.67;
}
.media-meta-grid {
display: grid;
grid-template-columns: 225px 1fr;
}
.meta-grid--full {
grid-column: 1/3;
}
.media-meta {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 36rem) {
.media-meta-grid {
grid-template-columns: 1fr;
}
}

5
src/includes/css/blocks/media-grid.css
View file

@ -4,7 +4,7 @@
display: grid;
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
grid-gap: var(--spacing-0\.5);
grid-gap: var(--spacing-2);
li {
border: 1px solid var(--color-shadow);
@ -15,6 +15,7 @@
color: var(--color-white);
picture {
border-radius: 0;
height: 100%;
img {
@ -62,7 +63,7 @@
.meta-text {
transition-delay: 0.05s;
transform: translateY(var(--spacing-1));
transform: translateY(var(--spacing-4));
}
}
}

6
src/includes/css/blocks/pill.css
View file

@ -7,7 +7,7 @@
font-family: var(--font-family-body);
font-weight: var(--font-weight-body-regular);
line-height: 0.8rem;
padding-inline: var(--spacing-0\.5);
padding-block: var(--spacing-0\.25);
border-radius: var(--spacing-0\.5);
padding-inline: var(--spacing-2);
padding-block: var(--spacing-1);
border-radius: var(--spacing-2);
}

4
src/includes/css/compositions/cluster.css
View file

@ -6,10 +6,10 @@ spacing, regardless of their size
*/
.cluster {
--gap: var(--spacing-1);
--gap: var(--spacing-2);
display: flex;
flex-wrap: wrap;
gap: var(--gap, --spacing-1);
gap: var(--gap, --spacing-2);
justify-content: flex-start;
align-items: center;
}

2
src/includes/css/compositions/repel.css
View file

@ -8,7 +8,7 @@ there is space in the viewport and stacks on small viewports
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--spacing-0\.5);
gap: var(--spacing-2);
}
.repel[data-nowrap] {

30
src/includes/css/global/global-styles.css
View file

@ -11,6 +11,8 @@
html {
scrollbar-color: var(--color-primary) var(--color-surface);
scrollbar-gutter: stable;
scrollbar-width: thin;
}
body {
@ -103,9 +105,9 @@ blockquote {
border-inline-start: 2px solid var(--color-primary);
margin-inline-start: 0;
margin-inline-end: 0;
padding: var(--spacing-1);
padding: var(--spacing-4);
background-color: var(--color-surface);
border-radius: var(--spacing-0\.5);
border-radius: var(--spacing-2);
}
blockquote > * + * {
@ -138,7 +140,7 @@ code {
:not(pre) > code {
background-color: var(--color-surface);
border-radius: var(--spacing-0\.25);
border-radius: var(--spacing-1);
padding-block: 0.15em;
padding-inline: 0.25em;
}
@ -153,7 +155,7 @@ picture {
flex-direction: column;
align-items: center;
margin-inline: 0;
border-radius: var(--spacing-0\.5);
border-radius: var(--spacing-2);
overflow: hidden;
}
@ -172,20 +174,20 @@ picture img {
aside {
background-color: var(--color-surface);
padding: var(--spacing-1);
border-radius: var(--spacing-0\.5);
margin-inline: calc(-1 * var(--spacing-1));
padding: var(--spacing-4);
border-radius: var(--spacing-2);
margin-inline: calc(-1 * var(--spacing-4));
}
mark {
background-color: var(--color-border);
color: var(--color-text);
padding-block: var(--spacing-0\.25);
padding-block: var(--spacing-1);
}
[href="#main"] {
background-color: var(--color-background);
margin-inline: var(--spacing-1);
margin-inline: var(--spacing-4);
}
[href="#main"]:not(:focus) {
@ -202,7 +204,7 @@ mark {
table {
border: 1px solid var(--color-border);
border-radius: var(--spacing-0\.5);
border-radius: var(--spacing-2);
border-spacing: 0;
overflow: hidden;
width: 100%;
@ -218,8 +220,8 @@ table thead th {
table th,
table td {
padding-block: var(--spacing-0\.5);
padding-inline: var(--spacing-1);
padding-block: var(--spacing-2);
padding-inline: var(--spacing-4);
}
table tbody tr:first-child td {
@ -230,6 +232,10 @@ table tbody tr:not(:last-child) td {
border-bottom: 1px solid var(--color-border);
}
dd {
margin-inline-start: 0;
}
/*
* Snippet from:
* https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Cdetails%3E

2
src/includes/css/global/lilypad.css
View file

File diff suppressed because one or more lines are too long

4
src/includes/css/utilities/image.css
View file

@ -1,11 +1,11 @@
.image-shrink {
max-width: 50%;
border-radius: var(--spacing-0\.5);
border-radius: var(--spacing-2);
overflow: hidden;
}
.image-tiny {
max-width: 25%;
border-radius: var(--spacing-0\.5);
border-radius: var(--spacing-2);
overflow: hidden;
}

38
src/includes/layouts/book.html
View file

@ -3,47 +3,41 @@ layout: "layouts/base"
---
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
{% from "macros/utils.njk" import stars, spoilerWarning %}
{% from "macros/tags.njk" import tagList %}
<header class="flow flow-space-1">
<article class="flow flow-space-8">
<header class="flow flow-space-4">
{{ format(page.date) }}
<h1>{{ title }}</h1>
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>{% endif %}
{% if pullquote %}<p class="text-fadeText flow-space-1">{{ pullquote }}</p>{% endif %}
</header>
{% if hasSpoilers %}
<section class="bg-surface radius-0.5 p-1">
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{{ spoilerWarning() }}
{% endif %}
{% if content %}
<section class="flow">
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<footer class="card media-metadata-grid">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex-col justify-center">
<div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2>
{% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %}
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
<dl class="media-metadata">
{% if author %}
<li class="flex-col">
<strong>Author</strong><span>{{ author }}</span>
</li>
<dt><strong>Author</strong></dt>
<dd>{{ author }}</dd>
{% endif %}
{% if year %}
<li class="flex-col">
<strong>Published</strong><span>{{ year }}</span>
</li>
<dt><strong>Published</strong></dt>
<dd>{{ year }}</dd>
{% endif %}
</ul>
</dl>
</div>
</footer>
<hr class="my-2">
{{ tagList(tags | filter("book") , "/books") }}
</article>

44
src/includes/layouts/game.html
View file

@ -3,54 +3,44 @@ layout: "layouts/base"
---
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
{% from "macros/utils.njk" import stars, spoilerWarning %}
{% from "macros/tags.njk" import tagList %}
<header class="flow flow-space-1">
<article class="flow flow-space-8">
<header class="flow flow-space-4">
{{ format(page.date) }}
<h1>{{ title }}</h1>
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>{% endif %}
{% if pullquote %}<p class="text-fadeText flow-space-1">{{ pullquote }}</p>{% endif %}
</header>
{% if hasSpoilers %}
<section class="bg-surface radius-0.5 p-1">
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{{ spoilerWarning() }}
{% endif %}
{% if content %}
<section class="flow">
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<footer class="card media-metadata-grid">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex-col justify-center">
<div class="flex items-center gap-0.5 flex-wrap">
<div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2>
</div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
<dl class="media-metadata">
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
<dt><strong>Released</strong></dt>
<dd>{{ year }}</dd>
{% endif %}
{% if platform %}
<li class="flex-col">
<strong>Platform</strong><span>{{ platform }}</span>
</li>
<dt><strong>Platform</strong></dt>
<dd>{{ platform }}</dd>
{% endif %}
{% if playtime %}
<li class="flex-col">
<strong>Playtime</strong><span>{{ playtime }}</span>
</li>
<dt><strong>Playtime</strong></dt>
<dd>{{ playtime }}</dd>
{% endif %}
</ul>
</dl>
</div>
</footer>
<hr class="my-2">
{{ tagList(tags | filter("game") , "/games") }}
</article>

45
src/includes/layouts/movie.html
View file

@ -3,19 +3,16 @@ layout: "layouts/base"
---
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
{% from "macros/utils.njk" import stars, spoilerWarning %}
{% from "macros/tags.njk" import tagList %}
<header class="flow flow-space-1">
<article class="flow flow-space-8">
<header class="flow flow-space-4">
{{ format(page.date) }}
<h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
<p class="text-fadeText flow-space-1">{{ pullquote }}</p>
</header>
{% if hasSpoilers %}
<section class="bg-surface radius-0.5 p-1">
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{{ spoilerWarning() }}
{% endif %}
{% if watchHistory.length > 1 %}
<p>
@ -30,39 +27,33 @@ layout: "layouts/base"
</p>
{% endif %}
{% if content %}
<section class="flow">
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<footer class="card media-metadata-grid">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex-col justify-center">
<div class="flex items-center gap-0.5 flex-wrap">
<div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2>
</div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
<dl class="media-metadata">
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
<dt><strong>Released</strong></dt>
<dd>{{ year }}</dd>
{% endif %}
{% if director %}
<li class="flex-col">
<strong>Director</strong>{{ director }}
</li>
<dt><strong>Director</strong></dt>
<dd>{{ director }}</dd>
{% endif %}
{% if runtime %}
<li class="flex-col">
<strong>Runtime</strong><span>{{ runtime }} mins</span>
</li>
<dt><strong>Runtime</strong></dt>
<dd>{{ runtime }} minutes</dd>
{% endif %}
</ul>
</dl>
</div>
</footer>
<hr class="my-2">
{{ tagList(tags | filter("movie") , "/watching/movies") }}
</article>

6
src/includes/layouts/post.html
View file

@ -4,11 +4,11 @@ layout: "layouts/base"
{% from "macros/date.njk" import format %}
<article class="flow">
<header class="flow flow-space-1 mb-2">
<header class="flow flow-space-4 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-1">{{ excerpt }}</p>
<ul class="categories cluster list-none p-0 flow-space-8 line-height-m">
{% for tag in tags | filter(["post"]) %}
<li>
<a class="button" href="/tags/{{ tag | slugify }}">

47
src/includes/layouts/show.html
View file

@ -3,22 +3,19 @@ layout: "layouts/base"
---
{% from "macros/date.njk" import format %}
{% from "macros/utils.njk" import stars %}
{% from "macros/utils.njk" import stars, spoilerWarning %}
{% from "macros/tags.njk" import tagList %}
<header class="flow flow-space-1">
<article class="flow flow-space-8">
<header class="flow flow-space-4">
{{ format(page.date) }}
<h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p>
<p class="text-fadeText flow-space-1">{{ pullquote }}</p>
</header>
{% if hasSpoilers %}
<section class="bg-surface radius-0.5 p-1">
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{{ spoilerWarning() }}
{% endif %}
{% if content %}
<section class="flow">
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{% endif %}
@ -28,36 +25,26 @@ layout: "layouts/base"
This is one of my favourite shows!
</p>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<footer class="card media-metadata-grid">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex-col justify-center">
<div class="flex items-center gap-0.5 flex-wrap">
<div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2>
</div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if director %}
<p class="flex gap-0.5">
<span class="text-fadeText">Directed by</span>{{ director }}
</p>
{% endif %}
{% if watchHistory %}<p class="flow-space-0.25">{{ format(watchHistory | last) }}</p>{% endif %}
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
{% if watchHistory %}<p class="flow-space-1">{{ format(watchHistory | last) }}</p>{% endif %}
<dl class="media-metadata">
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
<dt><strong>Released</strong></dt>
<dd>{{ year }}</dd>
{% endif %}
{% if runtime %}
<li class="flex-col">
<strong>Runtime</strong><span>{{ runtime }} mins</span>
</li>
<dt><strong>Runtime</strong></dt>
<dd>{{ runtime }} minutes</dd>
{% endif %}
</ul>
</dl>
</div>
</footer>
<hr class="my-2">
{{ tagList(tags | filter("tv") , "/watching/shows") }}
</article>

2
src/includes/macros/date.njk
View file

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

4
src/includes/macros/media-grid.njk
View file

@ -1,10 +1,10 @@
{% macro grid(data, shape = "vertical") %}
<ul class="media-grid {{ shape }} list-none p-0">
{% for item in data %}
<li class="radius-0.5">
<li class="radius-2">
<a href="{{ item.url }}">
{% if item.data.image %}<img src="{{ item.data.image }}" alt="" />{% endif %}
<div class="meta font-size-s line-height-s flex items-end px-0.5 pb-0.5">
<div class="meta font-size-s line-height-s flex items-end px-2 pb-2">
<span class="meta-text">{{ item.data.title }}</span>
</div>
</a>

2
src/includes/macros/posts.njk
View file

@ -7,7 +7,7 @@
{% 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 %}
{% for post in posts %}<li class="flow-space-2">{{ one(post, format) }}</li>{% endfor %}
</ol>
{% endmacro %}
{% macro yearList(posts, year, format = "MM/DD") %}

8
src/includes/macros/utils.njk
View file

@ -11,3 +11,11 @@
{% endfor %}
</ul>
{% endmacro %}
{% macro spoilerWarning() %}
<section class="bg-surface radius-1 p-4">
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{% endmacro %}

6
src/includes/partials/footer.html
View file

@ -1,4 +1,4 @@
<footer class="bg-surface mt-1.5 py-1.5">
<footer class="bg-surface mt-8 py-4">
<div class="wrapper flow">
<div class="repel">
<p>&copy; {{ meta.author }} 2018 - 2025.</p>
@ -13,8 +13,8 @@
</nav>
</div>
<div class="repel">
<nav class="flow-space-0.5">
<ul class="cluster p-0 m-0 gap-0.5" role="list">
<nav class="flow-space-2">
<ul class="cluster p-0 m-0 gap-1" role="list">
<li>
<a href="/feeds"
class="button button--alt"

4
src/includes/partials/header.html
View file

@ -1,8 +1,8 @@
<header class="navbar py-1 mb-2">
<header class="navbar py-4 mb-8">
<a href="#main">Skip to content</a>
<div class="wrapper">
<nav class="repel">
<div class="site-logo flex items-center gap-0.5">
<div class="site-logo flex items-center gap-2">
<a class="logo flex items-center justify-center"
aria-label="Go to index"
href="{{ meta.url }}">

12
src/index.html
View file

@ -12,27 +12,27 @@ permalink: /
<p>
I like to <a href="/posts">write</a> about <a href="/games">games</a>, <a href="/books">books</a>, and <a href="/watching/movies/recent">movies</a> to name a few things. There's a lot to explore, and I hope you have fun!
</p>
<section class="flow-space-2">
<section class="flow-space-8">
<header class="flow">
<h2>Favourite posts</h2>
<p class="flow-space-0.25">Hand-picked, curated selection of my favourite posts!</p>
<p class="flow-space-1">Hand-picked, curated selection of my favourite posts!</p>
</header>
{% set favouritePosts = collections.post | filterFavourites | reverse %}
{{ list(favouritePosts, "MM/DD/YYYY") }}
</section>
<section class="flow-space-2">
<section class="flow-space-8">
<header>
<h2>Recent posts</h2>
</header>
{% set recentPosts = collections.post | reverse | limit(5) %}
{{ list(recentPosts, "MM/DD/YYYY") }}
</section>
<section class="flow-space-2">
<section class="flow-space-8">
<header class="flow">
<h2>Other pages</h2>
<p class="flow-space-0.25">Some of my other pages you can check out!</p>
<p class="flow-space-1">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 list-none" role="list">
<li>
<a href="/about" class="button">About</a>
</li>

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

@ -8,8 +8,8 @@ permalink: "books/tag/{{ tag | slugify }}/index.html"
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.booksByTag[tag] | reverse %}
<header class="flow flow-space-1">
<header class="flow flow-space-4">
<h1>Books</h1>
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
<p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
</header>
{{ grid(data) }}

4
src/pages/contact.html
View file

@ -4,9 +4,9 @@ description: Various ways to get in touch.
permalink: "/contact/index.html"
---
<header class="flow flow-space-1">
<header class="flow flow-space-4">
<h1>Contact</h1>
<p class="text-fadeText flow-space-0.25">Various ways to get in touch with me on the internet.</p>
<p class="text-fadeText flow-space-1">Various ways to get in touch with me on the internet.</p>
</header>
<section class="flow">
<p>Below are my primary methods of contact. They are the ones I monitor most and likely to respond!</p>

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

@ -8,8 +8,8 @@ permalink: "games/tag/{{ tag | slugify }}/index.html"
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.gamesByTag[tag] %}
<header class="flow flow-space-1">
<header class="flow flow-space-4">
<h1>Games</h1>
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
<p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
</header>
{{ grid(data) }}

6
src/pages/podroll.html
View file

@ -5,9 +5,9 @@ permalink: "podroll/index.html"
---
{% set data = collections.podcast | reverse %}
<header class="flow flow-space-1">
<header class="flow flow-space-4">
<h1>Podroll</h1>
<p class="text-fadeText flow-space-0.25">Some podcasts that I enjoy!</p>
<p class="text-fadeText flow-space-1">Some podcasts that I enjoy!</p>
</header>
<section class="flow">
{% for item in data %}
@ -16,7 +16,7 @@ permalink: "podroll/index.html"
<h2>{{ item.data.title }}</h2>
{% if item.data.isCompleted %}<span class="pill">Completed</span>{% endif %}
</div>
<p class="flow-space-0.5">{{ item.data.description }}</p>
<p class="flow-space-2">{{ item.data.description }}</p>
<div class="flex gap-0.5">
{% if item.data.url %}<a href="{{ item.data.url }}" target="_blank">Website</a>{% endif %}
{% if item.data.rss %}<a href="{{ item.data.rss }}" target="_blank">RSS</a>{% endif %}

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

@ -8,8 +8,8 @@ permalink: "watching/movies/tag/{{ tag | slugify }}/index.html"
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.moviesByTag[tag] | reverse %}
<header class="flow flow-space-1">
<header class="flow flow-space-4">
<h1>Movies</h1>
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
<p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
</header>
{{ grid(data) }}

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

@ -8,8 +8,8 @@ permalink: "watching/shows/tag/{{ tag | slugify }}/index.html"
{% from "macros/media-grid.njk" import grid %}
{% set data = collections.showsByTag[tag] | reverse %}
<header class="flow flow-space-1">
<header class="flow flow-space-4">
<h1>Shows</h1>
<p class="text-fadeText flow-space-0.25">Tagged with "{{ tag }}"</p>
<p class="text-fadeText flow-space-1">Tagged with "{{ tag }}"</p>
</header>
{{ grid(data) }}