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