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", linkTitle: "View book details",
eleventyComputed: { eleventyComputed: {
tertiary: (data) => 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), 1px 1px 0px var(--color-shadow),
2px 2px 0 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); border: 1px solid var(--color-shadow);
transition: transition:

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

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

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

@ -1,7 +1,7 @@
.card { .card {
border: 1px solid var(--color-shadow); border-radius: var(--spacing-2);
border-radius: var(--spacing-0\.5); padding: var(--spacing-4);
padding: var(--spacing-1); background-color: var(--color-surface);
} }
.card--secondary { .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 { .media-image {
--aspect-ratio: 0.8; --aspect-ratio: 0.8;
border: 1px solid var(--color-shadow);
border-radius: var(--spacing-0\.5);
overflow: hidden;
source, source,
img { img {
aspect-ratio: var(--aspect-ratio); aspect-ratio: var(--aspect-ratio);
height: auto; height: auto;
object-fit: cover; object-fit: cover;
border-radius: var(--spacing-1);
} }
} }
.media-image--tall { .media-image--tall {
--aspect-ratio: 0.67; --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; display: grid;
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr)); grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
grid-gap: var(--spacing-0\.5); grid-gap: var(--spacing-2);
li { li {
border: 1px solid var(--color-shadow); border: 1px solid var(--color-shadow);
@ -15,6 +15,7 @@
color: var(--color-white); color: var(--color-white);
picture { picture {
border-radius: 0;
height: 100%; height: 100%;
img { img {
@ -62,7 +63,7 @@
.meta-text { .meta-text {
transition-delay: 0.05s; 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-family: var(--font-family-body);
font-weight: var(--font-weight-body-regular); font-weight: var(--font-weight-body-regular);
line-height: 0.8rem; line-height: 0.8rem;
padding-inline: var(--spacing-0\.5); padding-inline: var(--spacing-2);
padding-block: var(--spacing-0\.25); padding-block: var(--spacing-1);
border-radius: var(--spacing-0\.5); border-radius: var(--spacing-2);
} }

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

@ -6,10 +6,10 @@ spacing, regardless of their size
*/ */
.cluster { .cluster {
--gap: var(--spacing-1); --gap: var(--spacing-2);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--gap, --spacing-1); gap: var(--gap, --spacing-2);
justify-content: flex-start; justify-content: flex-start;
align-items: center; 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; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: var(--spacing-0\.5); gap: var(--spacing-2);
} }
.repel[data-nowrap] { .repel[data-nowrap] {

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

@ -11,6 +11,8 @@
html { html {
scrollbar-color: var(--color-primary) var(--color-surface); scrollbar-color: var(--color-primary) var(--color-surface);
scrollbar-gutter: stable;
scrollbar-width: thin;
} }
body { body {
@ -103,9 +105,9 @@ blockquote {
border-inline-start: 2px solid var(--color-primary); border-inline-start: 2px solid var(--color-primary);
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: 0; margin-inline-end: 0;
padding: var(--spacing-1); padding: var(--spacing-4);
background-color: var(--color-surface); background-color: var(--color-surface);
border-radius: var(--spacing-0\.5); border-radius: var(--spacing-2);
} }
blockquote > * + * { blockquote > * + * {
@ -138,7 +140,7 @@ code {
:not(pre) > code { :not(pre) > code {
background-color: var(--color-surface); background-color: var(--color-surface);
border-radius: var(--spacing-0\.25); border-radius: var(--spacing-1);
padding-block: 0.15em; padding-block: 0.15em;
padding-inline: 0.25em; padding-inline: 0.25em;
} }
@ -153,7 +155,7 @@ picture {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-inline: 0; margin-inline: 0;
border-radius: var(--spacing-0\.5); border-radius: var(--spacing-2);
overflow: hidden; overflow: hidden;
} }
@ -172,20 +174,20 @@ picture img {
aside { aside {
background-color: var(--color-surface); background-color: var(--color-surface);
padding: var(--spacing-1); padding: var(--spacing-4);
border-radius: var(--spacing-0\.5); border-radius: var(--spacing-2);
margin-inline: calc(-1 * var(--spacing-1)); margin-inline: calc(-1 * var(--spacing-4));
} }
mark { mark {
background-color: var(--color-border); background-color: var(--color-border);
color: var(--color-text); color: var(--color-text);
padding-block: var(--spacing-0\.25); padding-block: var(--spacing-1);
} }
[href="#main"] { [href="#main"] {
background-color: var(--color-background); background-color: var(--color-background);
margin-inline: var(--spacing-1); margin-inline: var(--spacing-4);
} }
[href="#main"]:not(:focus) { [href="#main"]:not(:focus) {
@ -202,7 +204,7 @@ mark {
table { table {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--spacing-0\.5); border-radius: var(--spacing-2);
border-spacing: 0; border-spacing: 0;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@ -218,8 +220,8 @@ table thead th {
table th, table th,
table td { table td {
padding-block: var(--spacing-0\.5); padding-block: var(--spacing-2);
padding-inline: var(--spacing-1); padding-inline: var(--spacing-4);
} }
table tbody tr:first-child td { table tbody tr:first-child td {
@ -230,6 +232,10 @@ table tbody tr:not(:last-child) td {
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
dd {
margin-inline-start: 0;
}
/* /*
* Snippet from: * Snippet from:
* https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-%3Cdetails%3E * 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 { .image-shrink {
max-width: 50%; max-width: 50%;
border-radius: var(--spacing-0\.5); border-radius: var(--spacing-2);
overflow: hidden; overflow: hidden;
} }
.image-tiny { .image-tiny {
max-width: 25%; max-width: 25%;
border-radius: var(--spacing-0\.5); border-radius: var(--spacing-2);
overflow: hidden; 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/date.njk" import format %}
{% from "macros/utils.njk" import stars %} {% from "macros/utils.njk" import stars, spoilerWarning %}
{% from "macros/tags.njk" import tagList %} {% 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) }} {{ format(page.date) }}
<h1>{{ title }}</h1> <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> </header>
{% if hasSpoilers %} {% if hasSpoilers %}
<section class="bg-surface radius-0.5 p-1"> {{ spoilerWarning() }}
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{% endif %} {% endif %}
{% if content %} {% if content %}
<section class="flow"> <section class="flow flow-space-default">
{{ content | safe }} {{ content | safe }}
</section> </section>
{% endif %} {% endif %}
<hr class="my-2" /> <footer class="card media-metadata-grid">
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall"> <div class="media-image media-image--tall">
<img src="{{ image }}" alt="" /> <img src="{{ image }}" alt="" />
</div> </div>
<div class="flow flex-col justify-center"> <div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2> <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 %} {% if rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta gap-0.5"> <dl class="media-metadata">
{% if author %} {% if author %}
<li class="flex-col"> <dt><strong>Author</strong></dt>
<strong>Author</strong><span>{{ author }}</span> <dd>{{ author }}</dd>
</li>
{% endif %} {% endif %}
{% if year %} {% if year %}
<li class="flex-col"> <dt><strong>Published</strong></dt>
<strong>Published</strong><span>{{ year }}</span> <dd>{{ year }}</dd>
</li>
{% endif %} {% endif %}
</ul> </dl>
</div> </div>
</footer> </footer>
<hr class="my-2">
{{ tagList(tags | filter("book") , "/books") }} {{ 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/date.njk" import format %}
{% from "macros/utils.njk" import stars %} {% from "macros/utils.njk" import stars, spoilerWarning %}
{% from "macros/tags.njk" import tagList %} {% 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) }} {{ format(page.date) }}
<h1>{{ title }}</h1> <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> </header>
{% if hasSpoilers %} {% if hasSpoilers %}
<section class="bg-surface radius-0.5 p-1"> {{ spoilerWarning() }}
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{% endif %} {% endif %}
{% if content %} {% if content %}
<section class="flow"> <section class="flow flow-space-default">
{{ content | safe }} {{ content | safe }}
</section> </section>
{% endif %} {% endif %}
<hr class="my-2" /> <footer class="card media-metadata-grid">
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall"> <div class="media-image media-image--tall">
<img src="{{ image }}" alt="" /> <img src="{{ image }}" alt="" />
</div> </div>
<div class="flow flex-col justify-center"> <div class="flow flex flex-col justify-center flow-space-4">
<div class="flex items-center gap-0.5 flex-wrap">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
</div>
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if rating %}{{ stars(rating) }}{% 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 %} {% if year %}
<li class="flex-col"> <dt><strong>Released</strong></dt>
<strong>Released</strong><span>{{ year }}</span> <dd>{{ year }}</dd>
</li>
{% endif %} {% endif %}
{% if platform %} {% if platform %}
<li class="flex-col"> <dt><strong>Platform</strong></dt>
<strong>Platform</strong><span>{{ platform }}</span> <dd>{{ platform }}</dd>
</li>
{% endif %} {% endif %}
{% if playtime %} {% if playtime %}
<li class="flex-col"> <dt><strong>Playtime</strong></dt>
<strong>Playtime</strong><span>{{ playtime }}</span> <dd>{{ playtime }}</dd>
</li>
{% endif %} {% endif %}
</ul> </dl>
</div> </div>
</footer> </footer>
<hr class="my-2">
{{ tagList(tags | filter("game") , "/games") }} {{ 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/date.njk" import format %}
{% from "macros/utils.njk" import stars %} {% from "macros/utils.njk" import stars, spoilerWarning %}
{% from "macros/tags.njk" import tagList %} {% 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) }} {{ format(page.date) }}
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p> <p class="text-fadeText flow-space-1">{{ pullquote }}</p>
</header> </header>
{% if hasSpoilers %} {% if hasSpoilers %}
<section class="bg-surface radius-0.5 p-1"> {{ spoilerWarning() }}
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{% endif %} {% endif %}
{% if watchHistory.length > 1 %} {% if watchHistory.length > 1 %}
<p> <p>
@ -30,39 +27,33 @@ layout: "layouts/base"
</p> </p>
{% endif %} {% endif %}
{% if content %} {% if content %}
<section class="flow"> <section class="flow flow-space-default">
{{ content | safe }} {{ content | safe }}
</section> </section>
{% endif %} {% endif %}
<hr class="my-2" /> <footer class="card media-metadata-grid">
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall"> <div class="media-image media-image--tall">
<img src="{{ image }}" alt="" /> <img src="{{ image }}" alt="" />
</div> </div>
<div class="flow flex-col justify-center"> <div class="flow flex flex-col justify-center flow-space-4">
<div class="flex items-center gap-0.5 flex-wrap">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
</div> {% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
{% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
{% if rating %}{{ stars(rating) }}{% 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 %} {% if year %}
<li class="flex-col"> <dt><strong>Released</strong></dt>
<strong>Released</strong><span>{{ year }}</span> <dd>{{ year }}</dd>
</li>
{% endif %} {% endif %}
{% if director %} {% if director %}
<li class="flex-col"> <dt><strong>Director</strong></dt>
<strong>Director</strong>{{ director }} <dd>{{ director }}</dd>
</li>
{% endif %} {% endif %}
{% if runtime %} {% if runtime %}
<li class="flex-col"> <dt><strong>Runtime</strong></dt>
<strong>Runtime</strong><span>{{ runtime }} mins</span> <dd>{{ runtime }} minutes</dd>
</li>
{% endif %} {% endif %}
</ul> </dl>
</div> </div>
</footer> </footer>
<hr class="my-2">
{{ tagList(tags | filter("movie") , "/watching/movies") }} {{ 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 %} {% from "macros/date.njk" import format %}
<article class="flow"> <article class="flow">
<header class="flow flow-space-1 mb-2"> <header class="flow flow-space-4 mb-2">
{{ format(page.date) }} {{ format(page.date) }}
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ excerpt }}</p> <p class="text-fadeText flow-space-1">{{ excerpt }}</p>
<ul class="categories cluster list-none p-0 flow-space-2 line-height-m"> <ul class="categories cluster list-none p-0 flow-space-8 line-height-m">
{% for tag in tags | filter(["post"]) %} {% for tag in tags | filter(["post"]) %}
<li> <li>
<a class="button" href="/tags/{{ tag | slugify }}"> <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/date.njk" import format %}
{% from "macros/utils.njk" import stars %} {% from "macros/utils.njk" import stars, spoilerWarning %}
{% from "macros/tags.njk" import tagList %} {% 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) }} {{ format(page.date) }}
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ pullquote }}</p> <p class="text-fadeText flow-space-1">{{ pullquote }}</p>
</header> </header>
{% if hasSpoilers %} {% if hasSpoilers %}
<section class="bg-surface radius-0.5 p-1"> {{ spoilerWarning() }}
<span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
<strong>Warning!</strong>
The following may contain spoilers!
</section>
{% endif %} {% endif %}
{% if content %} {% if content %}
<section class="flow"> <section class="flow flow-space-default">
{{ content | safe }} {{ content | safe }}
</section> </section>
{% endif %} {% endif %}
@ -28,36 +25,26 @@ layout: "layouts/base"
This is one of my favourite shows! This is one of my favourite shows!
</p> </p>
{% endif %} {% endif %}
<hr class="my-2" /> <footer class="card media-metadata-grid">
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall"> <div class="media-image media-image--tall">
<img src="{{ image }}" alt="" /> <img src="{{ image }}" alt="" />
</div> </div>
<div class="flow flex-col justify-center"> <div class="flow flex flex-col justify-center flow-space-4">
<div class="flex items-center gap-0.5 flex-wrap">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
</div> {% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
{% 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 rating %}{{ stars(rating) }}{% 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 %} {% if year %}
<li class="flex-col"> <dt><strong>Released</strong></dt>
<strong>Released</strong><span>{{ year }}</span> <dd>{{ year }}</dd>
</li>
{% endif %} {% endif %}
{% if runtime %} {% if runtime %}
<li class="flex-col"> <dt><strong>Runtime</strong></dt>
<strong>Runtime</strong><span>{{ runtime }} mins</span> <dd>{{ runtime }} minutes</dd>
</li>
{% endif %} {% endif %}
</ul> </dl>
</div> </div>
</footer> </footer>
<hr class="my-2">
{{ tagList(tags | filter("tv") , "/watching/shows") }} {{ tagList(tags | filter("tv") , "/watching/shows") }}
</article>

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

@ -1,5 +1,5 @@
{% macro format(dateString) %} {% 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 }}"> 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> </time>

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

@ -1,10 +1,10 @@
{% macro grid(data, shape = "vertical") %} {% macro grid(data, shape = "vertical") %}
<ul class="media-grid {{ shape }} list-none p-0"> <ul class="media-grid {{ shape }} list-none p-0">
{% for item in data %} {% for item in data %}
<li class="radius-0.5"> <li class="radius-2">
<a href="{{ item.url }}"> <a href="{{ item.url }}">
{% if item.data.image %}<img src="{{ item.data.image }}" alt="" />{% endif %} {% 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> <span class="meta-text">{{ item.data.title }}</span>
</div> </div>
</a> </a>

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

@ -7,7 +7,7 @@
{% endmacro %} {% endmacro %}
{% macro list(posts, format = "MM/DD") %} {% macro list(posts, format = "MM/DD") %}
<ol class="flow p-0" role="list"> <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> </ol>
{% endmacro %} {% endmacro %}
{% macro yearList(posts, year, format = "MM/DD") %} {% macro yearList(posts, year, format = "MM/DD") %}

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

@ -11,3 +11,11 @@
{% endfor %} {% endfor %}
</ul> </ul>
{% endmacro %} {% 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="wrapper flow">
<div class="repel"> <div class="repel">
<p>&copy; {{ meta.author }} 2018 - 2025.</p> <p>&copy; {{ meta.author }} 2018 - 2025.</p>
@ -13,8 +13,8 @@
</nav> </nav>
</div> </div>
<div class="repel"> <div class="repel">
<nav class="flow-space-0.5"> <nav class="flow-space-2">
<ul class="cluster p-0 m-0 gap-0.5" role="list"> <ul class="cluster p-0 m-0 gap-1" role="list">
<li> <li>
<a href="/feeds" <a href="/feeds"
class="button button--alt" 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> <a href="#main">Skip to content</a>
<div class="wrapper"> <div class="wrapper">
<nav class="repel"> <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" <a class="logo flex items-center justify-center"
aria-label="Go to index" aria-label="Go to index"
href="{{ meta.url }}"> href="{{ meta.url }}">

12
src/index.html
View file

@ -12,27 +12,27 @@ permalink: /
<p> <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! 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> </p>
<section class="flow-space-2"> <section class="flow-space-8">
<header class="flow"> <header class="flow">
<h2>Favourite posts</h2> <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> </header>
{% set favouritePosts = collections.post | filterFavourites | reverse %} {% set favouritePosts = collections.post | filterFavourites | reverse %}
{{ list(favouritePosts, "MM/DD/YYYY") }} {{ list(favouritePosts, "MM/DD/YYYY") }}
</section> </section>
<section class="flow-space-2"> <section class="flow-space-8">
<header> <header>
<h2>Recent posts</h2> <h2>Recent posts</h2>
</header> </header>
{% set recentPosts = collections.post | reverse | limit(5) %} {% set recentPosts = collections.post | reverse | limit(5) %}
{{ list(recentPosts, "MM/DD/YYYY") }} {{ list(recentPosts, "MM/DD/YYYY") }}
</section> </section>
<section class="flow-space-2"> <section class="flow-space-8">
<header class="flow"> <header class="flow">
<h2>Other pages</h2> <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> </header>
<ul class="cluster p-0 gap-0.5 list-none" role="list"> <ul class="cluster p-0 list-none" role="list">
<li> <li>
<a href="/about" class="button">About</a> <a href="/about" class="button">About</a>
</li> </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 %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.booksByTag[tag] | reverse %} {% set data = collections.booksByTag[tag] | reverse %}
<header class="flow flow-space-1"> <header class="flow flow-space-4">
<h1>Books</h1> <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> </header>
{{ grid(data) }} {{ grid(data) }}

4
src/pages/contact.html
View file

@ -4,9 +4,9 @@ description: Various ways to get in touch.
permalink: "/contact/index.html" permalink: "/contact/index.html"
--- ---
<header class="flow flow-space-1"> <header class="flow flow-space-4">
<h1>Contact</h1> <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> </header>
<section class="flow"> <section class="flow">
<p>Below are my primary methods of contact. They are the ones I monitor most and likely to respond!</p> <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 %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.gamesByTag[tag] %} {% set data = collections.gamesByTag[tag] %}
<header class="flow flow-space-1"> <header class="flow flow-space-4">
<h1>Games</h1> <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> </header>
{{ grid(data) }} {{ grid(data) }}

6
src/pages/podroll.html
View file

@ -5,9 +5,9 @@ permalink: "podroll/index.html"
--- ---
{% set data = collections.podcast | reverse %} {% set data = collections.podcast | reverse %}
<header class="flow flow-space-1"> <header class="flow flow-space-4">
<h1>Podroll</h1> <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> </header>
<section class="flow"> <section class="flow">
{% for item in data %} {% for item in data %}
@ -16,7 +16,7 @@ permalink: "podroll/index.html"
<h2>{{ item.data.title }}</h2> <h2>{{ item.data.title }}</h2>
{% if item.data.isCompleted %}<span class="pill">Completed</span>{% endif %} {% if item.data.isCompleted %}<span class="pill">Completed</span>{% endif %}
</div> </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"> <div class="flex gap-0.5">
{% if item.data.url %}<a href="{{ item.data.url }}" target="_blank">Website</a>{% endif %} {% 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 %} {% 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 %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.moviesByTag[tag] | reverse %} {% set data = collections.moviesByTag[tag] | reverse %}
<header class="flow flow-space-1"> <header class="flow flow-space-4">
<h1>Movies</h1> <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> </header>
{{ grid(data) }} {{ 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 %} {% from "macros/media-grid.njk" import grid %}
{% set data = collections.showsByTag[tag] | reverse %} {% set data = collections.showsByTag[tag] | reverse %}
<header class="flow flow-space-1"> <header class="flow flow-space-4">
<h1>Shows</h1> <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> </header>
{{ grid(data) }} {{ grid(data) }}