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

Update CSS Pipeline (#4)
All checks were successful
Build and Deploy / build_and_deploy (push) Successful in 1m19s
Details

Browse source 
The goal of this change was to speed up my CSS pipeline. Previously builds would take up to 30s because it had to rebuild the CSS for every page (I inlined the CSS).

This updates the pipeline to remain somewhat the same, but offloads the busywork of computing my theme CSS (my design system in other words), and is replaced by a mostly static file (`css/global/lilypad.css`), which I can update as my design system changes.

I also offloaded several of my utility classes as I know I will want to use them in other sites I design, so it made sense to move them as well.

The new pipeline makes use of 11ty's bundle feature (newly included in 11ty v3), which allows me to bundle all my CSS together into one file. Since I know my core styles like `lilypad.css` will always remain the same, I decided to keep that inline. I use the `transforms` feature for bundling to run a PostCSS transform on the bundled output, which resolves any imports and minifies the final output.

In order to cut down my build times even further, I removed my XML minifier - it was taking upwards of 3 seconds to minify XML to probably a small benefit to end users.

Reviewed-on: #4
Co-authored-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
Co-committed-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
This commit is contained in:
Devin Haska 2025-05-30 11:16:37 -07:00 • committed by wonderfulfrog
parent 07a71e8f99
commit efcdb7296e
59 changed files with 344 additions and 1996 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:

16
src/data/preloads.js
View file

@ -1,24 +1,12 @@
import path from "path";
import { ASSETS_FONTS_PATH } from "../../config/constants/paths.js";
import fonts from "../../config/design-tokens/fonts.js";
const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src);
const preloads = [
{
as: "font",
href: getFontUrl(fonts.display.styles.Regular.path),
href: "/assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2",
crossorigin: true,
},
{
as: "font",
href: getFontUrl(fonts.body.styles.Regular.path),
crossorigin: true,
},
{
as: "font",
href: getFontUrl(fonts.monospace.styles.Regular.path),
href: "/assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2",
crossorigin: true,
},
];

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-4);
display: flex;
flex-wrap: wrap;
gap: var(--gap, --spacing-1);
gap: var(--gap, --spacing-4);
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] {

34
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 {
@ -50,14 +52,14 @@ h2 {
h3 {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-normal);
letter-spacing: -0.05rem;
line-height: 1.5rem;
}
h4 {
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-normal);
letter-spacing: -0.05rem;
line-height: 1.125rem;
text-transform: uppercase;
@ -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

1
src/includes/css/global/lilypad.css Normal file
View file

File diff suppressed because one or more lines are too long

22
src/includes/css/styles.css
View file

@ -1,8 +1,22 @@
@import "global/reset.css";
@import "global/variables.css";
@import "global/global-styles.css";
@import-glob "blocks/*.css";
@import-glob "compositions/*.css";
@import-glob "utilities/*.css";
@import "blocks/button.css";
@import "blocks/card.css";
@import "blocks/media-display.css";
@import "blocks/media-grid.css";
@import "blocks/pill.css";
@import "blocks/posts.css";
@import "blocks/prism.css";
@import "blocks/site-header.css";
@import "blocks/site-logo.css";
@import "blocks/stars.css";
@import "compositions/cluster.css";
@import "compositions/repel.css";
@import "utilities/fonts.css";
@import "utilities/image.css";
@import "utilities/table.css";
@import "utilities/wrapper.css";

32
src/includes/css/utilities/flex.css
View file

@ -1,32 +0,0 @@
.flex {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-1 {
flex: 1;
}

8
src/includes/css/utilities/flow.css
View file

@ -1,8 +0,0 @@
/*
* FLOW UTILITY
* Like the Every Layout stack: https://every-layout.dev/layouts/stack/
* Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
*/
.flow > * + * {
margin-block-start: var(--flow-space, 1em);
}

20
src/includes/css/utilities/fonts.css
View file

@ -2,22 +2,6 @@
font-size: 1rem;
}
.font-size-m {
font-size: 1.125rem;
}
.font-size-l {
font-size: 1.5rem;
}
.font-size-xl {
font-size: 2rem;
}
.font-size-2xl {
font-size: 3rem;
}
.line-height-s {
line-height: 0.8rem;
}
@ -29,7 +13,3 @@
.line-height-l {
line-height: 1.5rem;
}
.line-height-xl {
line-height: 2rem;
}

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

11
src/includes/css/utilities/list.css
View file

@ -1,11 +0,0 @@
.list-none {
list-style-type: none;
}
.list-disc {
list-style-type: disc;
}
.list-decimal {
list-style-type: decimal;
}

15
src/includes/css/utilities/visually-hidden.css
View file

@ -1,15 +0,0 @@
/*
* VISUALLY HIDDEN UTILITY
* Info: https://piccalil.li/quick-tip/visually-hidden/
*/
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

9
src/includes/layouts/base.html
View file

@ -20,12 +20,13 @@
<script type="module"
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
{% endif %}
{% set css %}
<style>{% include "css/global/lilypad.css" %}</style>
{% css %}
{% include "css/styles.css" %}
{% endset %}
<style>{{ css | postcss | safe }}</style>
{% endcss %}
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
</head>
<body class="flex-col">
<body class="flex flex-col">
{% include "partials/header.html" %}
<main id="main" class="flow flex-1 wrapper" tabindex="-1">
{{ content | safe }}

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

@ -3,47 +3,43 @@ 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">
{{ format(page.date) }}
<h1>{{ title }}</h1>
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ 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>
{% endif %}
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex-col justify-center">
<h2>{{ title }}</h2>
{% if subtitle %}<p class="text-fadeText flow-space-0.5 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 author %}
<li class="flex-col">
<strong>Author</strong><span>{{ author }}</span>
</li>
{% endif %}
{% if year %}
<li class="flex-col">
<strong>Published</strong><span>{{ year }}</span>
</li>
{% endif %}
</ul>
</div>
</footer>
<hr class="my-2">
{{ tagList(tags | filter("book") , "/books") }}
<article class="flow">
<header class="flow">
<div class="flow flow-space-1">
<h1>{{ title }}</h1>
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
</div>
{{ format(page.date) }}
</header>
{% if hasSpoilers %}
{{ spoilerWarning() }}
{% endif %}
{% if content %}
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{% endif %}
<footer class="card media-metadata-grid">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2>
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
<dl class="media-metadata">
{% if author %}
<dt><strong>Author</strong></dt>
<dd>{{ author }}</dd>
{% endif %}
{% if year %}
<dt><strong>Published</strong></dt>
<dd>{{ year }}</dd>
{% endif %}
</dl>
</div>
</footer>
{{ tagList(tags | filter("book") , "/books") }}
</article>

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

@ -3,54 +3,46 @@ 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">
{{ format(page.date) }}
<h1>{{ title }}</h1>
{% if pullquote %}<p class="text-fadeText flow-space-0.25">{{ 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>
{% endif %}
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<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">
<h2>{{ title }}</h2>
<article class="flow">
<header class="flow">
<div class="flow flow-space-1">
<h1>{{ title }}</h1>
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
</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">
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
{% endif %}
{% if platform %}
<li class="flex-col">
<strong>Platform</strong><span>{{ platform }}</span>
</li>
{% endif %}
{% if playtime %}
<li class="flex-col">
<strong>Playtime</strong><span>{{ playtime }}</span>
</li>
{% endif %}
</ul>
</div>
</footer>
<hr class="my-2">
{{ tagList(tags | filter("game") , "/games") }}
{{ format(page.date) }}
</header>
{% if hasSpoilers %}
{{ spoilerWarning() }}
{% endif %}
{% if content %}
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{% endif %}
<footer class="card media-metadata-grid">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2>
{% if rating %}{{ stars(rating) }}{% endif %}
<dl class="media-metadata">
{% if year %}
<dt><strong>Released</strong></dt>
<dd>{{ year }}</dd>
{% endif %}
{% if platform %}
<dt><strong>Platform</strong></dt>
<dd>{{ platform }}</dd>
{% endif %}
{% if playtime %}
<dt><strong>Playtime</strong></dt>
<dd>{{ playtime }}</dd>
{% endif %}
</dl>
</div>
</footer>
{{ tagList(tags | filter("game") , "/games") }}
</article>

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

@ -3,66 +3,59 @@ 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">
{{ format(page.date) }}
<h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ 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>
{% endif %}
{% if watchHistory.length > 1 %}
<p>
<span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
I've seen this movie <strong>{{ watchHistory.length }}</strong> {{ "time" | pluralize(watchHistory) }}!
</p>
{% endif %}
{% if favourite or isFavourite %}
<p>
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
This is one of my favourite movies!
</p>
{% endif %}
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<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">
<h2>{{ title }}</h2>
<article class="flow">
<header class="flow">
<div class="flow flow-space-1">
<h1>{{ title }}</h1>
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
</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">
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
{% endif %}
{% if director %}
<li class="flex-col">
<strong>Director</strong>{{ director }}
</li>
{% endif %}
{% if runtime %}
<li class="flex-col">
<strong>Runtime</strong><span>{{ runtime }} mins</span>
</li>
{% endif %}
</ul>
</div>
</footer>
<hr class="my-2">
{{ tagList(tags | filter("movie") , "/watching/movies") }}
{{ format(page.date) }}
</header>
{% if hasSpoilers %}
{{ spoilerWarning() }}
{% endif %}
{% if watchHistory.length > 1 %}
<p>
<span class="text-primary">{% include "svgs/circle-info.svg" %}</span>
I've seen this movie <strong>{{ watchHistory.length }}</strong> {{ "time" | pluralize(watchHistory) }}!
</p>
{% endif %}
{% if favourite or isFavourite %}
<p>
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
This is one of my favourite movies!
</p>
{% endif %}
{% if content %}
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{% endif %}
<footer class="card media-metadata-grid">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2>
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
<dl class="media-metadata">
{% if year %}
<dt><strong>Released</strong></dt>
<dd>{{ year }}</dd>
{% endif %}
{% if director %}
<dt><strong>Director</strong></dt>
<dd>{{ director }}</dd>
{% endif %}
{% if runtime %}
<dt><strong>Runtime</strong></dt>
<dd>{{ runtime }} minutes</dd>
{% endif %}
</dl>
</div>
</footer>
{{ tagList(tags | filter("movie") , "/watching/movies") }}
</article>

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

@ -3,20 +3,17 @@ layout: "layouts/base"
---
{% from "macros/date.njk" import format %}
{% from "macros/tags.njk" import tagList %}
<article class="flow">
<header class="flow flow-space-1 mb-2">
<header class="flow">
<div class="flow flow-space-1">
<h1>{{ title }}</h1>
<h3 class="text-fadeText">{{ excerpt }}</h3>
</div>
{{ 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">
{% for tag in tags | filter(["post"]) %}
<li>
<a class="button" href="/tags/{{ tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag }}</a>
</li>
{% endfor %}
</ul>
</header>
{{ content | safe }}
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{{ tagList(tags | filter("post") , "/posts") }}
</article>

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

@ -3,61 +3,50 @@ 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">
{{ format(page.date) }}
<h1>{{ title }}</h1>
<p class="text-fadeText flow-space-0.25">{{ 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>
{% endif %}
{% if content %}
<section class="flow">
{{ content | safe }}
</section>
{% endif %}
{% if favourite or isFavourite %}
<p>
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
This is one of my favourite shows!
</p>
{% endif %}
<hr class="my-2" />
<footer class="media-meta-grid gap-1">
<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">
<h2>{{ title }}</h2>
<article class="flow">
<header class="flow">
<div class="flow flow-space-1">
<h1>{{ title }}</h1>
{% if pullquote %}<h3 class="text-fadeText">{{ pullquote }}</h3>{% endif %}
</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 rating %}{{ stars(rating) }}{% endif %}
<ul class="list-none p-0 mb-0 media-meta gap-0.5">
{% if year %}
<li class="flex-col">
<strong>Released</strong><span>{{ year }}</span>
</li>
{% endif %}
{% if runtime %}
<li class="flex-col">
<strong>Runtime</strong><span>{{ runtime }} mins</span>
</li>
{% endif %}
</ul>
</div>
</footer>
<hr class="my-2">
{{ tagList(tags | filter("tv") , "/watching/shows") }}
{{ format(page.date) }}
</header>
{% if hasSpoilers %}
{{ spoilerWarning() }}
{% endif %}
{% if content %}
<section class="flow flow-space-default">
{{ content | safe }}
</section>
{% endif %}
{% if favourite or isFavourite %}
<p>
<span class="text-secondary">{% include "svgs/star.svg" %}</span>
This is one of my favourite shows!
</p>
{% endif %}
<footer class="card media-metadata-grid">
<div class="media-image media-image--tall">
<img src="{{ image }}" alt="" />
</div>
<div class="flow flex flex-col justify-center flow-space-4">
<h2>{{ title }}</h2>
{% if subtitle %}<p class="text-fadeText flow-space-2 line-height-m">{{ subtitle }}</p>{% endif %}
{% if rating %}{{ stars(rating) }}{% endif %}
{% if watchHistory %}<p class="flow-space-1">{{ format(watchHistory | last) }}</p>{% endif %}
<dl class="media-metadata">
{% if year %}
<dt><strong>Released</strong></dt>
<dd>{{ year }}</dd>
{% endif %}
{% if runtime %}
<dt><strong>Runtime</strong></dt>
<dd>{{ runtime }} minutes</dd>
{% endif %}
</dl>
</div>
</footer>
{{ 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") %}

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

@ -1,5 +1,5 @@
{% macro tagList(tags, urlPrefix) %}
<ul class="categories cluster list-none p-0 line-height-m">
<ul class="categories cluster list-none p-0 line-height-m flow-space-default">
{% for tag in tags %}
<li>
<a class="button" href="{{ urlPrefix }}/tag/{{ tag | slugify }}">

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 flow-space-default">
<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/changelog.md
View file

@ -10,6 +10,10 @@ All the changes that are fit to read!
If preferred, the [commit log is available here][commits].
## May 29th, 2025
- I updated my CSS pipeline! [My PR](https://git.cloud.haska.me/wonderfulfrog/wonderfulfrog.com/pulls/4) has more information, if you're curious. tl;dr: I decreased my build times!
## May 27th, 2025
- Updated Eleventy to `3.1.0`

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