From 9317a760b0f824f8111c0158cd1ea283f3c85956 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Mon, 15 Apr 2024 13:22:07 -0700
Subject: [PATCH] chore: never did like those class conventions

---
 package.json                                  |   2 +-
 src/_includes/default.liquid                  |   2 +-
 src/_includes/main.liquid                     |   6 +-
 src/_includes/now.liquid                      |  26 +--
 src/_includes/partials/addon-links.liquid     |   2 +-
 src/_includes/partials/badge-grid.liquid      |   2 +-
 src/_includes/partials/footer.liquid          |   4 +-
 src/_includes/partials/header.liquid          |   2 +-
 src/_includes/partials/nav/menu.liquid        |   2 +-
 .../partials/now/albumReleases.liquid         |   4 +-
 src/_includes/partials/now/media-grid.liquid  |   2 +-
 src/_includes/partials/now/status.liquid      |   4 +-
 src/_includes/partials/now/topper.liquid      |   2 +-
 src/_includes/partials/paginator.liquid       |   4 +-
 src/_includes/partials/popular-posts.liquid   |   4 +-
 src/_includes/partials/post-graph.liquid      |  11 +-
 src/_includes/partials/recent-links.liquid    |   4 +-
 src/_includes/partials/share-button.liquid    |   2 +-
 src/_includes/post.liquid                     |   6 +-
 src/_includes/webrings/css-joy.liquid         |   4 +-
 src/_includes/webrings/the-claw.liquid        |   6 +-
 src/assets/scripts/media-toggles.js           |   2 +-
 src/assets/styles/base/index.css              |  52 +++---
 src/assets/styles/components/addon-links.css  |   6 +-
 src/assets/styles/components/badge-grid.css   |   4 +-
 src/assets/styles/components/media-grid.css   | 160 +++++++++---------
 src/assets/styles/components/post-graph.css   |  34 ++--
 src/assets/styles/pages/404.css               |   6 +-
 src/assets/styles/pages/about.css             |   6 +-
 src/assets/styles/pages/blogroll.css          |   2 +-
 src/assets/styles/pages/contact.css           |  10 +-
 src/assets/styles/pages/links.css             |   2 +-
 src/assets/styles/pages/now.css               |  12 +-
 src/index.html                                |   4 +-
 src/links.html                                |   2 +-
 src/pages/400.html                            |   4 +-
 src/pages/404.html                            |  10 +-
 src/pages/about.md                            |   6 +-
 src/pages/blogroll.html                       |   4 +-
 src/pages/contact-success.html                |   6 +-
 src/pages/contact.md                          |   8 +-
 src/pages/feeds.md                            |   2 +-
 src/pages/now.html                            |   8 +-
 src/pages/referrals.md                        |   4 +-
 src/pages/stats.html                          |   2 +-
 src/pages/tag-list.html                       |   2 +-
 src/pages/uses.md                             |   4 +-
 src/posts/2023/2023-in-review.html            |   4 +-
 ...a-now-page-using-nextjs-and-social-apis.md |   2 +-
 ...ng-data-from-apple-music-using-musickit.md |   2 +-
 .../drying-up-now-page-templates-eleventy.md  |   2 +-
 ...ail-with-regex-filters-now-with-chatgpt.md |   2 +-
 ...cs-to-json-surfacing-anticipated-albums.md |   4 +-
 .../lazy-select-based-pagination-eleventy.md  |   2 +-
 ...now-page-grouping-episodes-of-same-show.md |   2 +-
 ...g-eleventy-netlify-edge-functions-emoji.md |   2 +-
 ...ptimizing-for-performance-with-eleventy.md |   2 +-
 .../road-to-madness-apple-music-charts.md     |   2 +-
 ...ebhooks-edge-functions-and-blob-storage.md |   2 +-
 ...available-before-optimizing-in-eleventy.md |   2 +-
 .../2024/link-blogging-using-readwise.md      |   6 +-
 src/posts/2024/link-page-improvements.md      |   2 +-
 src/posts/2024/on-getting-tattooed.md         |   2 +-
 63 files changed, 247 insertions(+), 256 deletions(-)

diff --git a/package.json b/package.json
index 31e48d6e..2bf1cac4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "11.1.1",
+  "version": "11.2.1",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/default.liquid b/src/_includes/default.liquid
index 1e5f5d1f..a1b5a56d 100644
--- a/src/_includes/default.liquid
+++ b/src/_includes/default.liquid
@@ -2,6 +2,6 @@
 layout: main
 ---
 {% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
-<div class="default__wrapper">
+<div class="default-wrapper">
   {{ content }}
 </div>
\ No newline at end of file
diff --git a/src/_includes/main.liquid b/src/_includes/main.liquid
index c5afe542..9a9a2116 100644
--- a/src/_includes/main.liquid
+++ b/src/_includes/main.liquid
@@ -1,9 +1,7 @@
 ---
 layout: base
 ---
-<div class="main__wrapper">
-  <main>
-    {{ content }}
-  </main>
+<div class="main-wrapper">
+  <main>{{ content }}</main>
   {% render "partials/footer.liquid", page:page, nav:nav %}
 </div>
\ No newline at end of file
diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid
index c0f1f738..f823ead5 100644
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@@ -6,12 +6,12 @@ layout: default
 {% endcapture %}
 <script>{{ js }}</script>
 {{ content }}
-<div class="now__section--header-wrapper">
-  <h2 id="artists" class="now__section--header flex--centered">
+<div class="now-header-wrapper">
+  <h2 id="artists" class="now-header flex-centered">
     {% tablericon "microphone-2" "Artists" %}
     Artists
   </h2>
-  <div class="now__section--header-buttons client-side">
+  <div class="now-header-buttons client-side">
     <button class="small active" data-toggle="artists-window">This week</button>
     <button class="small secondary" data-toggle="artists-month">This month</button>
     <button class="small secondary" data-toggle="artists-three-months">3 months</button>
@@ -26,12 +26,12 @@ layout: default
 <div class="hidden" id="artists-three-months">
   {% render "partials/now/media-grid.liquid", data:musicCharts.threeMonthChart.artists, shape: "square", count: 8 %}
 </div>
-<div class="now__section--header-wrapper">
-  <h2 id="albums" class="now__section--header flex--centered">
+<div class="now-header-wrapper">
+  <h2 id="albums" class="now-header flex-centered">
     {% tablericon "vinyl" "Albums" %}
     Albums
   </h2>
-  <div class="now__section--header-buttons client-side">
+  <div class="now-header-buttons client-side">
     <button class="small active" data-toggle="albums-window">This week</button>
     <button class="small secondary" data-toggle="albums-month">This month</button>
     <button class="small secondary" data-toggle="albums-three-months">3 months</button>
@@ -46,12 +46,12 @@ layout: default
 <div class="hidden" id="albums-three-months">
   {% render "partials/now/media-grid.liquid", data:musicCharts.threeMonthChart.albums, shape: "square", count: 8 %}
 </div>
-<div class="now__section--header-wrapper">
-  <h2 id="tracks" class="now__section--header flex--centered">
+<div class="now-header-wrapper">
+  <h2 id="tracks" class="now-header flex-centered">
     {% tablericon "playlist" "Tracks" %}
     Tracks
   </h2>
-  <div class="now__section--header-buttons client-side">
+  <div class="now-header-buttons client-side">
     <button class="small active" data-toggle="tracks-recent">Recent</button>
     <button class="small secondary" data-toggle="tracks-window">This week</button>
     <button class="small secondary" data-toggle="tracks-month">This month</button>
@@ -71,22 +71,22 @@ layout: default
   {% render "partials/now/track-chart.liquid", data:musicCharts.threeMonthChart.topTracks.data, mostPlayed:musicCharts.threeMonthChart.topTracks.mostPlayed %}
 </div>
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
-<h2 id="books" class="now__section--header flex--centered">
+<h2 id="books" class="now-header flex-centered">
   {% tablericon "books" "Books" %}
   Books
 </h2>
 {% render "partials/now/media-grid.liquid", data:books, shape: "vertical", count: 6 %}
 {% render "partials/recent-links.liquid", links:links %}
-<h2 id="movies" class="now__section--header flex--centered">
+<h2 id="movies" class="now-header flex-centered">
   {% tablericon "movie" "Movies" %}
   Movies
 </h2>
 {% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
-<h2 id="tv" class="now__section--header flex--centered">
+<h2 id="tv" class="now-header flex-centered">
   {% tablericon "device-tv" "TV" %}
   TV
 </h2>
 {% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %}
-<p class="now__explainer text--centered">
+<p class="now-explainer text-small text-centered">
   This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.
 </p>
diff --git a/src/_includes/partials/addon-links.liquid b/src/_includes/partials/addon-links.liquid
index 26e30f45..99b22fe6 100644
--- a/src/_includes/partials/addon-links.liquid
+++ b/src/_includes/partials/addon-links.liquid
@@ -1,4 +1,4 @@
-<div class="addon-links__wrapper">
+<div class="addon-links">
   {%- if analytics.size > 0 -%}
   <div>{% render "partials/popular-posts.liquid", posts:posts, analytics:analytics %}</div>
   {%- endif -%}
diff --git a/src/_includes/partials/badge-grid.liquid b/src/_includes/partials/badge-grid.liquid
index 13c747f9..c53606fa 100644
--- a/src/_includes/partials/badge-grid.liquid
+++ b/src/_includes/partials/badge-grid.liquid
@@ -1,4 +1,4 @@
-<div class="badge__grid">
+<div class="badge-grid">
   <a href="https://11ty.dev">
     {% image './src/assets/img/badges/eleventy.png', 'Made with 11ty', '', 'lazy' %}
   </a>
diff --git a/src/_includes/partials/footer.liquid b/src/_includes/partials/footer.liquid
index 21c93d68..8891aa72 100644
--- a/src/_includes/partials/footer.liquid
+++ b/src/_includes/partials/footer.liquid
@@ -1,10 +1,10 @@
 <footer>
-  <nav aria-label="Social icons" class="flex--centered justify--centered text--centered">
+  <nav aria-label="Social icons" class="flex-centered justify-centered text-centered">
     {% for link in nav.social %}
       {% render "partials/nav/linked-icon.liquid", name:link.name, link:link.url, icon:link.icon %}
     {% endfor %}
   </nav>
-  <nav aria-label="Secondary site navigation" class="flex--centered justify--centered text--centered">
+  <nav aria-label="Secondary site navigation" class="flex-centered justify-centered text-centered">
     {% for link in nav.footer %}
       {% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
       {% if not forloop.last %}<span>•</span>{% endif %}
diff --git a/src/_includes/partials/header.liquid b/src/_includes/partials/header.liquid
index 077e7f8a..7e9ecf67 100644
--- a/src/_includes/partials/header.liquid
+++ b/src/_includes/partials/header.liquid
@@ -1,4 +1,4 @@
-<section class="main__title">
+<section class="main-title">
   <h1>
     {% if page.url != '/' %}
     <a href="/">{{ meta.siteName }}</a>
diff --git a/src/_includes/partials/nav/menu.liquid b/src/_includes/partials/nav/menu.liquid
index 30db0e06..35d1e9db 100644
--- a/src/_includes/partials/nav/menu.liquid
+++ b/src/_includes/partials/nav/menu.liquid
@@ -1,5 +1,5 @@
 <nav
-  class="menu__primary flex--centered flex--wrap justify--center"
+  class="menu-primary flex-centered flex-wrap justify-center"
   aria-label="Primary site navigation">
   {% for link in nav.menu %}
     {% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
diff --git a/src/_includes/partials/now/albumReleases.liquid b/src/_includes/partials/now/albumReleases.liquid
index 02686395..f33a2421 100644
--- a/src/_includes/partials/now/albumReleases.liquid
+++ b/src/_includes/partials/now/albumReleases.liquid
@@ -1,9 +1,9 @@
 {% if albumReleases.size > 0 %}
-  <h2 id="album-releases" class="now__section--header flex--centered">
+  <h2 id="album-releases" class="now-header flex-centered">
     {% tablericon "calendar-time" "Anticipated albums" %}
     Anticipated albums
   </h2>
-  <ul class="link__list">
+  <ul class="link-list">
     {% for album in albumReleases %}
       <li>
         <strong>{{ album.date | readableDate }}: </strong>
diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid
index 13ce8102..863451e4 100644
--- a/src/_includes/partials/now/media-grid.liquid
+++ b/src/_includes/partials/now/media-grid.liquid
@@ -5,7 +5,7 @@
       {% assign alt = item.alt | strip | escape %}
       <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
         <div class="item__wrapper{% if item.subtext %} shadow{% endif %}">
-          <div class="item__meta-text">
+          <div class="meta-text">
             {% if item.title %}
               <div class="header">{{ item.title }}</div>
             {% endif %}
diff --git a/src/_includes/partials/now/status.liquid b/src/_includes/partials/now/status.liquid
index 703dabc1..7c0b9679 100644
--- a/src/_includes/partials/now/status.liquid
+++ b/src/_includes/partials/now/status.liquid
@@ -1,3 +1 @@
-<p>
-  {{ status.emoji }} {{ status.content }}
-</p>
\ No newline at end of file
+<p>{{ status.emoji }} {{ status.content }}</p>
\ No newline at end of file
diff --git a/src/_includes/partials/now/topper.liquid b/src/_includes/partials/now/topper.liquid
index 50a87d38..480f1601 100644
--- a/src/_includes/partials/now/topper.liquid
+++ b/src/_includes/partials/now/topper.liquid
@@ -1,7 +1,7 @@
 {%- assign artist = artists | first -%}
 {%- assign book = books | first -%}
 {%- assign show = tv | first -%}
-<div class="now__topper">
+<div class="now-topper">
   <p><strong class="highlight-text">I'm a software developer based in Camarillo, California</strong>. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, <a href="https://coryd.dev/now#artists">music</a>, writing, <a href="https://coryd.dev/now#books">reading</a>, <a href="https://coryd.dev/now#tv">tv</a> and <a href="https://coryd.dev/now#movies">movies</a>. Lately I've been{% if artist %} listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>,{% endif %} reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.</p>
   {% render "partials/now/status.liquid", status:status %}
   {% render "partials/now-playing.liquid" %}
diff --git a/src/_includes/partials/paginator.liquid b/src/_includes/partials/paginator.liquid
index 1e3df24f..2658c601 100644
--- a/src/_includes/partials/paginator.liquid
+++ b/src/_includes/partials/paginator.liquid
@@ -1,5 +1,5 @@
 <script type="module" src="/assets/scripts/components/select-pagination.js"></script>
-<nav aria-label="Blog pagination" class="pagination flex--centered">
+<nav aria-label="Blog pagination" class="pagination flex-centered">
   {% if pagination.href.previous %}
     <a href="{{ pagination.href.previous }}" aria-label="Previous page">
       {% tablericon "arrow-left" "Previous" %}
@@ -19,7 +19,7 @@
       {% endfor %}
     </select>
     <noscript>
-      <div class="text--centered">
+      <div class="text-centered">
         <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
       </div>
     </noscript>
diff --git a/src/_includes/partials/popular-posts.liquid b/src/_includes/partials/popular-posts.liquid
index eb2103c0..5deb5aa2 100644
--- a/src/_includes/partials/popular-posts.liquid
+++ b/src/_includes/partials/popular-posts.liquid
@@ -1,10 +1,10 @@
 {% assign posts = posts | getPopularPosts: analytics %}
 {% if posts.size > 0 %}
-<h2 class="link__list--header flex--centered">
+<h2 class="link-list-header flex-centered">
   {% tablericon "flame" "Popular" %}
   Popular posts
 </h2>
-<ul class="link__list">
+<ul class="link-list">
   {% for post in posts limit: 5 %}
     <li>
       <a class="no-underline" href="{{post.url}}" title="{{ post.data.title | escape}}">
diff --git a/src/_includes/partials/post-graph.liquid b/src/_includes/partials/post-graph.liquid
index d74d285e..b15fc6a0 100644
--- a/src/_includes/partials/post-graph.liquid
+++ b/src/_includes/partials/post-graph.liquid
@@ -1,13 +1,10 @@
 <div class="post-graph">
   {% assign years = postYears | reverse %}
   {%- for year in years %}
-  <div class="post-graph__wrapper">
-    <div class="post-graph__year">{{ year.year }}</div>
-    <div class="post-graph__progress" style="width: {{ year.yearProgress }}%">
-    </div>
-    <div class="post-graph__data">
-      {{ year.postCount }}
-    </div>
+  <div class="wrapper">
+    <div class="year">{{ year.year }}</div>
+    <div class="progress" style="width: {{ year.yearProgress }}%"></div>
+    <div class="data">{{ year.postCount }}</div>
   </div>
   {% endfor %}
 </div>
\ No newline at end of file
diff --git a/src/_includes/partials/recent-links.liquid b/src/_includes/partials/recent-links.liquid
index ce59dee5..ef88782f 100644
--- a/src/_includes/partials/recent-links.liquid
+++ b/src/_includes/partials/recent-links.liquid
@@ -1,9 +1,9 @@
 {% if links.size > 0 %}
-<h2 id="links" class="link__list--header flex--centered">
+<h2 id="links" class="link-list-header flex-centered">
   {% tablericon "link" "Links" %}
   Recent links
 </h2>
-<ul class="link__list">
+<ul class="link-list">
   {% for link in links limit: 5 %}
     <li>
       <a href="{{link.url}}" title="{{link.title | escape}}">
diff --git a/src/_includes/partials/share-button.liquid b/src/_includes/partials/share-button.liquid
index 041ba606..ba0e920b 100644
--- a/src/_includes/partials/share-button.liquid
+++ b/src/_includes/partials/share-button.liquid
@@ -1,4 +1,4 @@
 <script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
 <webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
-  <button class="share icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
+  <button class="share icon-small icon-center-vertical" disabled>{% tablericon "share" "Share" %}</button>
 </webcare-webshare>
\ No newline at end of file
diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid
index a929d242..e02c43c3 100644
--- a/src/_includes/post.liquid
+++ b/src/_includes/post.liquid
@@ -4,9 +4,9 @@ schema: blog
 ---
 {% render "partials/header.liquid", meta: meta, page: page, nav: nav %}
 {%- capture postUrl %}{{ meta.url }}{{ page.url }}{% endcapture -%}
-<div class="default__wrapper">
+<div class="default-wrapper">
   <article class="h-entry">
-    <div class="flex--centered">
+    <div class="flex-centered">
       <time class="dt-published" datetime="{{ date }}">
         {{ date | date: "%B %e, %Y" }}
         <span class="client-side"> • </span>
@@ -14,7 +14,7 @@ schema: blog
       {% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
     </div>
     <h2 class="p-name">{{ title }}</h2>
-    <div class="text--small">{% render "partials/tags.liquid", tags:tags %}</div>
+    <div class="text-small">{% render "partials/tags.liquid", tags:tags %}</div>
     <span class="p-author h-card hidden">{{ meta.author }}</span>
     <div class="p-summary hidden">{{ post_excerpt }}</div>
     <div class="e-content">
diff --git a/src/_includes/webrings/css-joy.liquid b/src/_includes/webrings/css-joy.liquid
index cd9f3800..92e9e6ae 100644
--- a/src/_includes/webrings/css-joy.liquid
+++ b/src/_includes/webrings/css-joy.liquid
@@ -1,8 +1,8 @@
 <div class="webring__wrapper">
   <a href="https://cs.sjoy.lol">
-    <h3 class="text--centered">CSS JOY Webring</h3>
+    <h3 class="text-centered">CSS JOY Webring</h3>
   </a>
-  <div class="webring__centered flex--centered">
+  <div class="webring__centered flex-centered">
     <a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
       {% tablericon "arrow-left" "Previous site" %}
     </a>
diff --git a/src/_includes/webrings/the-claw.liquid b/src/_includes/webrings/the-claw.liquid
index 46c2a09b..c8b51afc 100644
--- a/src/_includes/webrings/the-claw.liquid
+++ b/src/_includes/webrings/the-claw.liquid
@@ -1,9 +1,9 @@
 <div class="webring__wrapper">
-  <div class="webring__centered flex--centered">
+  <div class="webring__centered flex-centered">
     {% image './src/assets/img/webrings/theclaw.png', 'The Claw Webring' %}
   </div>
-  <h3 class="text--centered">The Claw Webring</h3>
-  <div class="webring__centered flex--centered">
+  <h3 class="text-centered">The Claw Webring</h3>
+  <div class="webring__centered flex-centered">
     <strong>
       <a class="no-underline" href="https://github.com/whitep4nth3r/the-claw-webring">Join!</a>
     </strong>
diff --git a/src/assets/scripts/media-toggles.js b/src/assets/scripts/media-toggles.js
index c3ce2077..a720daa2 100644
--- a/src/assets/scripts/media-toggles.js
+++ b/src/assets/scripts/media-toggles.js
@@ -25,6 +25,6 @@ window.onload = () => {
     })
   }
 
-  const buttonSets = document.querySelectorAll('.now__section--header-buttons')
+  const buttonSets = document.querySelectorAll('.now-header-buttons')
   buttonSets.forEach(initializeButtonSet)
 }
\ No newline at end of file
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index e99ee216..49acaacb 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -99,9 +99,9 @@ a,
 a:hover,
 a:focus,
 a:active,
-:is(.main__title, footer nav:last-child) a:hover,
-:is(.main__title, footer nav:last-child) a:focus,
-:is(.main__title, footer nav:last-child) a:active {
+:is(.main-title, footer nav:last-child) a:hover,
+:is(.main-title, footer nav:last-child) a:focus,
+:is(.main-title, footer nav:last-child) a:active {
   color: var(--accent-color-hover);
   transition-property: color;
   transition-timing-function: var(--transition-ease-in-out);
@@ -137,7 +137,7 @@ hr {
   border: 0;
 }
 
-hr.large__spacing {
+hr.large-spacing {
   margin: var(--sizing-base) 0;
 }
 
@@ -182,7 +182,7 @@ th {
 }
 
 /* header */
-.main__title {
+.main-title {
   width: 100%;
   padding-top: var(--sizing-3xl);
   display: flex;
@@ -198,7 +198,7 @@ th {
 }
 
 /* nav */
-nav.menu__primary {
+nav.menu-primary {
   gap: var(--sizing-md);
 
   & a,
@@ -248,11 +248,11 @@ nav ul li .active svg:hover {
 .rss svg { stroke: var(--brand-rss) !important; }
 
 /* layout */
-.default__wrapper {
+.default-wrapper {
   padding-top: var(--sizing-3xl);
 }
 
-.main__wrapper {
+.main-wrapper {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -266,13 +266,13 @@ main {
 }
 
 /* now */
-.now__topper,
+.now-topper,
 article {
   border-bottom: 1px solid var(--gray-light);
   margin-bottom: var(--sizing-base);
 }
 
-.now__topper p:first-child {
+.now-topper p:first-child {
   margin-top: 0;
 }
 
@@ -303,7 +303,7 @@ footer nav:last-child {
   }
 }
 
-:is(.main__title, footer nav:last-child) a {
+:is(.main-title, footer nav:last-child) a {
   color: var(--text-color);
 }
 
@@ -373,12 +373,12 @@ svg {
   stroke-width: var(--stroke-width-default);
 }
 
-.icon--small > svg {
+.icon-small > svg {
   width: var(--sizing-lg);
   height: var(--sizing-lg);
 }
 
-.icon--center__vertical > svg {
+.icon-center-vertical > svg {
   display: inline;
   vertical-align: middle;
 }
@@ -395,7 +395,7 @@ li {
   margin-bottom: var(--sizing-lg);
 }
 
-.link__list {
+.link-list {
   margin-bottom: 0;
 
   & li {
@@ -408,12 +408,12 @@ li {
   }
 }
 
-.link__list--header {
+.link-list-header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
 /* images */
-.image__banner {
+.image-banner {
   border: 1px solid var(--accent-color);
   border-radius: var(--rounded);
   height: auto;
@@ -428,7 +428,7 @@ li {
 }
 
 /* pages */
-.page__header {
+.page-header {
   font-size: var(--font-size-2xl);
   line-height: var(--line-height-2xl);
   margin-top: 0;
@@ -496,38 +496,38 @@ select-pagination::after {
   display: none !important;
 }
 
-.text--centered {
+.text-centered {
   text-align: center !important;
 }
 
-.text--small {
+.text-small {
   font-size: var(--font-size-sm) !important;
   line-height: var(--line-height-sm) !important;
 }
 
-.flex--centered {
+.flex-centered {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 
-.justify--centered {
+.justify-centered {
   justify-content: center;
 }
 
-.flex--wrap {
+.flex-wrap {
   flex-wrap: wrap
 }
 
 /* screens: md */
 @media screen and (min-width: 768px) {
-  .main__title {
+  .main-title {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
   }
 
-  .main__title h1 {
+  .main-title h1 {
     padding-bottom: 0;
   }
 
@@ -535,8 +535,8 @@ select-pagination::after {
     max-width: 768px;
   }
 
-  .main__title h1,
-  .page__header {
+  .main-title h1,
+  .page-header {
     font-size: var(--font-size-3xl);
     line-height: var(--line-height-3xl);
   }
diff --git a/src/assets/styles/components/addon-links.css b/src/assets/styles/components/addon-links.css
index 34c9bec6..29c6fafb 100644
--- a/src/assets/styles/components/addon-links.css
+++ b/src/assets/styles/components/addon-links.css
@@ -1,4 +1,4 @@
-.addon-links__wrapper {
+.addon-links {
   display: grid;
   gap: var(--sizing-sm);
   grid-template-columns: repeat(1,minmax(0,1fr));
@@ -11,13 +11,13 @@
     margin-top: var(--sizing-base);
   }
 
-  &.link__list {
+  &.link-list {
     margin-bottom: 0;
   }
 }
 
 @media screen and (min-width: 768px) {
-  .addon-links__wrapper {
+  .addon-links {
     grid-template-columns: repeat(2,minmax(0,1fr));
 
     & div:first-of-type {
diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css
index c58da214..6bd32952 100644
--- a/src/assets/styles/components/badge-grid.css
+++ b/src/assets/styles/components/badge-grid.css
@@ -1,4 +1,4 @@
-.badge__grid {
+.badge-grid {
   display: grid;
   gap: var(--sizing-md);
   grid-template-columns: repeat(3,minmax(0,1fr));
@@ -14,7 +14,7 @@
 }
 
 @media screen and (min-width: 768px) {
-  .badge__grid {
+  .badge-grid {
     grid-template-columns: repeat(4,minmax(0,1fr));
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index ae3128cd..110fb046 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -3,107 +3,107 @@
   --grid-vertical: repeat(3,minmax(0,1fr));
 }
 
-.now__section--header {
+.now-header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
-.now__section--header-buttons {
+.now-header-buttons {
   margin: 0 0 var(--sizing-lg);
+
+  & > button {
+    margin-bottom: var(--sizing-sm) !important;
+
+    &:last-of-type {
+      margin-right: 0 !important;
+    }
+  }
 }
 
-.now__section--header-wrapper {
+.now-header-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
-.now__section--header-buttons > button {
-  margin-bottom: var(--sizing-sm) !important;
-}
-
-.now__section--header-buttons > button:last-of-type {
-  margin-right: 0 !important;
-}
-
 .media__grid {
   display: grid;
   gap: var(--sizing-sm);
-}
 
-.media__grid.square {
-  grid-template-columns: var(--grid-square);
-}
+  &.square {
+    grid-template-columns: var(--grid-square);
 
-.media__grid.vertical {
-  grid-template-columns: var(--grid-vertical);
-}
+    & img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 
-.media__grid .item__wrapper {
-  position: relative;
-}
+  &.vertical {
+    grid-template-columns: var(--grid-vertical);
 
-.media__grid .item__wrapper.shadow picture::after {
-  position: absolute;
-  z-index: 1;
-  content: '';
-  top: 0;
-  left: 1px;
-  border-radius: calc(var(--sizing-xs) * .85);
-  box-shadow: inset 0 -70px 50px -40px #000;
-  width: 100%;
-  height: calc(100% - 1px);
-}
+    & img {
+      width: 100%;
+      height: auto;
+    }
+  }
 
-.media__grid a:hover img,
-.media__grid a:focus img,
-.media__grid a:active img {
-  border-color: var(--accent-color-hover)
-}
+  & .item__wrapper {
+    position: relative;
 
-.media__grid .item__meta-text {
-  position: absolute;
-  z-index: 2;
-  padding: 0 var(--sizing-sm);
-  bottom: var(--sizing-sm);
-  width: 100%;
-  box-sizing: border-box;
-}
+    &.shadow picture::after {
+      position: absolute;
+      z-index: 1;
+      content: '';
+      top: 0;
+      left: 1px;
+      border-radius: calc(var(--sizing-xs) * .85);
+      box-shadow: inset 0 -70px 50px -40px #000;
+      width: 100%;
+      height: calc(100% - 1px);
+    }
 
-.media__grid .item__meta-text .header,
-.media__grid .item__meta-text .subheader {
-  color: var(--color-lightest);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-xs);
-  text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
-}
+    & picture {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      display: flex;
+    }
+  }
 
-.media__grid .item__meta-text .header {
-  font-weight: var(--font-weight-bold);
-}
+  & a:hover img,
+  & a:focus img,
+  & a:active img {
+    border-color: var(--accent-color-hover)
+  }
 
-.media__grid img {
-  border: 1px solid var(--accent-color);
-  border-radius: var(--rounded);
-  transition-property: border-color;
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: 300ms;
-}
+  & .meta-text {
+    position: absolute;
+    z-index: 2;
+    padding: 0 var(--sizing-sm);
+    bottom: var(--sizing-sm);
+    width: 100%;
+    box-sizing: border-box;
 
-.media__grid.square img {
-  width: 100%;
-  height: 100%;
-}
+    & .header,
+    & .subheader {
+      color: var(--color-lightest);
+      font-size: var(--font-size-xs);
+      line-height: var(--line-height-xs);
+      text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
+    }
 
-.media__grid.vertical img {
-  width: 100%;
-  height: auto;
-}
+    & .header {
+      font-weight: var(--font-weight-bold);
+    }
+  }
 
-.media__grid .item__wrapper picture {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
+  & img {
+    border: 1px solid var(--accent-color);
+    border-radius: var(--rounded);
+    transition-property: border-color;
+    transition-timing-function: var(--transition-ease-in-out);
+    transition-duration: 300ms;
+  }
 }
 
 @media screen and (min-width: 768px) {
@@ -112,15 +112,15 @@
     --grid-vertical: repeat(6,minmax(0,1fr));
   }
 
-  .now__section--header-wrapper {
+  .now-header-wrapper {
     flex-direction: row;
   }
 
-  .now__section--header-buttons {
+  .now-header-buttons {
     margin: var(--sizing-3xl) 0 var(--sizing-lg);
-  }
 
-  .now__section--header-buttons > button {
-    margin-bottom: 0 !important;
+    & > button {
+      margin-bottom: 0 !important;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/components/post-graph.css b/src/assets/styles/components/post-graph.css
index 452db91e..6bc041c1 100644
--- a/src/assets/styles/components/post-graph.css
+++ b/src/assets/styles/components/post-graph.css
@@ -1,25 +1,25 @@
 .post-graph {
   margin-top: var(--sizing-base);
   margin-bottom: var(--sizing-base);
-}
 
-.post-graph__wrapper {
-  display: flex;
-  align-items: center;
-  height: var(--sizing-3xl);
-  margin-bottom: var(--sizing-sm);
-}
+  & .wrapper {
+    display: flex;
+    align-items: center;
+    height: var(--sizing-3xl);
+    margin-bottom: var(--sizing-sm);
 
-.post-graph__progress {
-  background-color: var(--accent-color);
-  height: 100%;
-}
+    & .year {
+      font-family: var(--font-mono);
+    }
 
-.post-graph__year {
-  font-family: var(--font-mono);
-}
+    & .progress {
+      background-color: var(--accent-color);
+      height: 100%;
+    }
 
-.post-graph__progress,
-.post-graph__data {
-  margin-left: var(--sizing-sm);
+    & .progress,
+    & .data {
+      margin-left: var(--sizing-sm);
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/404.css b/src/assets/styles/pages/404.css
index 7aff2797..36328875 100644
--- a/src/assets/styles/pages/404.css
+++ b/src/assets/styles/pages/404.css
@@ -1,9 +1,9 @@
-.four-oh-four__wrapper {
-  & .image__banner {
+.four-oh-four-wrapper {
+  & .image-banner {
     margin-bottom: var(--sizing-base);
   }
 
-  & .page__header {
+  & .page-header {
     margin-bottom: var(--sizing-xs);
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css
index e19924a9..1dd6a715 100644
--- a/src/assets/styles/pages/about.css
+++ b/src/assets/styles/pages/about.css
@@ -2,15 +2,15 @@
   --avatar-size: 16rem;
 }
 
-.avatar__wrapper {
+.avatar-wrapper {
   margin-bottom: var(--sizing-xl);
   width: 100%;
   justify-content: center;
   overflow: hidden;
 
-  & .avatar__wrapper--interior {
+  & .interior {
     width: var(--avatar-size);
-    height: var(--avatar-size);;
+    height: var(--avatar-size);
     border: 1px solid var(--accent-color);
     border-radius: var(--rounded-full);
     display: flex;
diff --git a/src/assets/styles/pages/blogroll.css b/src/assets/styles/pages/blogroll.css
index 61d19ff7..765d9cf0 100644
--- a/src/assets/styles/pages/blogroll.css
+++ b/src/assets/styles/pages/blogroll.css
@@ -1,4 +1,4 @@
-.blog--roll__icons {
+.blog-roll-icons {
   display: flex;
   flex-direction: row !important;
   gap: var(--sizing-xs);
diff --git a/src/assets/styles/pages/contact.css b/src/assets/styles/pages/contact.css
index dc638ac0..6a81ae72 100644
--- a/src/assets/styles/pages/contact.css
+++ b/src/assets/styles/pages/contact.css
@@ -1,4 +1,4 @@
-.contact__wrapper {
+.contact-wrapper {
   display: flex;
   flex-direction: column;
 
@@ -7,24 +7,24 @@
     resize: none;
   }
 
-  & .column.contact__description p:first-child {
+  & .column.description p:first-child {
     margin-top: 0;
   }
 }
 
-.contact__success--header {
+.contact-success-header {
   margin: 0 0 var(--sizing-lg);
 }
 
 @media screen and (min-width: 768px) {
-  .contact__wrapper {
+  .contact-wrapper {
     flex-direction: row;
 
     & .column {
       width: 50%;
     }
 
-    & .column.contact__description {
+    & .column.description {
       padding-right: var(--sizing-xl);
     }
   }
diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css
index 229a3be1..9598d74b 100644
--- a/src/assets/styles/pages/links.css
+++ b/src/assets/styles/pages/links.css
@@ -1,4 +1,4 @@
-.default__wrapper > .link__list {
+.default-wrapper > .link-list {
   margin-top: 0;
   margin-bottom: var(--sizing-3xl);
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/now.css b/src/assets/styles/pages/now.css
index 9d464345..6a7bceb7 100644
--- a/src/assets/styles/pages/now.css
+++ b/src/assets/styles/pages/now.css
@@ -1,5 +1,5 @@
 /* now */
-.now__section--text {
+.now-text {
   padding-left: var(--sizing-base);
 
   & p {
@@ -14,20 +14,18 @@
   }
 }
 
-.now__section--header {
+.now-header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
-.default__wrapper > .now__section--header:first-of-type {
+.default-wrapper > .now-header:first-of-type {
   margin-top: 0 !important;
 }
 
-.link__list {
+.link-list {
   margin-top: 0;
 }
 
-.now__explainer {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-xs);
+.now-explainer {
   padding-top: var(--sizing-lg);
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 8f304eb6..65d87345 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,9 +15,9 @@ pagination:
     {{ post.date | date: "%B %e, %Y" }}
   </time>
   <a href="{{ post.url }}">
-    <h2 class="flex--centered">{{ post.data.title }}</h2>
+    <h2 class="flex-centered">{{ post.data.title }}</h2>
   </a>
-  <div class="text--small">{% render "partials/tags.liquid", tags:post.data.tags %}</div>
+  <div class="text-small">{% render "partials/tags.liquid", tags:post.data.tags %}</div>
   <span class="p-author h-card hidden">{{ meta.siteName }}</span>
   <div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
   {{ post.data.post_excerpt | markdown }}
diff --git a/src/links.html b/src/links.html
index e7e42b34..37f810b5 100644
--- a/src/links.html
+++ b/src/links.html
@@ -5,7 +5,7 @@ pagination:
   data: links
   size: 30
 ---
-<ul class="link__list">
+<ul class="link-list">
   {% for link in pagination.items %}
     <li>
       <a href="{{ link.url }}">{{ link.title }}</a>
diff --git a/src/pages/400.html b/src/pages/400.html
index 10262aba..2bc3b12c 100644
--- a/src/pages/400.html
+++ b/src/pages/400.html
@@ -3,7 +3,7 @@ title: 400
 layout: default
 permalink: /400.html
 ---
-<div class="text--centered">
-  <h2 class="page__header">{{ title }}</h2>
+<div class="text-centered">
+  <h2 class="page-header">{{ title }}</h2>
   <p>Nah, that's a bad request.</p>
 </div>
\ No newline at end of file
diff --git a/src/pages/404.html b/src/pages/404.html
index 7163cdd9..c7b9ddd9 100644
--- a/src/pages/404.html
+++ b/src/pages/404.html
@@ -4,13 +4,13 @@ layout: default
 permalink: /404.html
 image: /assets/img/404.jpg
 ---
-<div class="four-oh-four__wrapper">
-  {% image 'https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&w=1000', title, 'image__banner', 'eager' %}
-  <div class="text--centered">
-    <h2 class="page__header">{{ title }}</h2>
+<div class="four-oh-four-wrapper">
+  {% image 'https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&w=1000', title, 'image-banner', 'eager' %}
+  <div class="text-centered">
+    <h2 class="page-header">{{ title }}</h2>
     What kind of idiots do you have working here? <a href="/">Hurry up and skip out on the room service bill!</a>
   </div>
-  <hr class="large__spacing" />
+  <hr class="large-spacing" />
   {% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
   {% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}
 </div>
\ No newline at end of file
diff --git a/src/pages/about.md b/src/pages/about.md
index 74cd4a92..9d1b02e6 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -6,13 +6,13 @@ permalink: /about.html
 {%- assign artist = music.artists | first -%}
 {%- assign book = books | first -%}
 {%- assign show = tv | first -%}
-<div class="avatar__wrapper flex--centered">
-  <div class="avatar__wrapper--interior">
+<div class="avatar-wrapper flex-centered">
+  <div class="interior">
   {%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
   {% image 'https://coryd.dev/.netlify/images/?url=/assets/img/avatar.png&w=600', about_alt, '', 'eager' %}
   </div>
 </div>
-<h2 class="page__header text--centered">Hi, I'm Cory</h2>
+<h2 class="page-header text-centered">Hi, I'm Cory</h2>
 
 <strong class="highlight-text">I'm a software developer based in Camarillo, California</strong>. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, [music](https://coryd.dev/now#artists), writing, [reading](https://coryd.dev/now#books), [tv](https://coryd.dev/now#tv) and [movies](https://coryd.dev/now#movies). Lately I've been{% if artist %} listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>,{% endif %} reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.
 
diff --git a/src/pages/blogroll.html b/src/pages/blogroll.html
index bf5821f2..a93bda63 100644
--- a/src/pages/blogroll.html
+++ b/src/pages/blogroll.html
@@ -8,7 +8,7 @@ description: 'These are awesome blogs that I enjoy and you may enjoy too.'
   {% render "../assets/styles/pages/blogroll.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
-<h2 class="page__header">{{ title }}</h2>
+<h2 class="page-header">{{ title }}</h2>
 <p>You can <a onclick="clicky?.log('/blogroll','OPML download', 'download');" href="/blogroll.opml">download an OPML file</a> containing all of these feeds and import them into your RSS reader.</p>
 <table>
   <tr>
@@ -20,7 +20,7 @@ description: 'These are awesome blogs that I enjoy and you may enjoy too.'
   <tr>
     <td>{{ blog.name }}</td>
     <td><a href="{{ blog.url }}">{{ blog.url | replace: "https://", "" }}</a></td>
-    <td class="blog--roll__icons">
+    <td class="blog-roll-icons">
       {%- if blog.feed -%}
       <a href="{{ blog.feed }}">{% tablericon "rss" "Subscribe via RSS" %}</a>
       {%- else -%}
diff --git a/src/pages/contact-success.html b/src/pages/contact-success.html
index c7df048a..f77e9db2 100644
--- a/src/pages/contact-success.html
+++ b/src/pages/contact-success.html
@@ -3,10 +3,10 @@ title: Success
 layout: default
 permalink: /contact/success.html
 ---
-<div class="text--centered">
-  <h2 class="contact__success--header">{{ title }}</h2>
+<div class="text-centered">
+  <h2 class="contact-success-header">{{ title }}</h2>
     I'll be in touch soon! <a href="/">Head home</a>
 </div>
-<hr class="large__spacing" />
+<hr class="large-spacing" />
 {% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %}
 {% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %}
\ No newline at end of file
diff --git a/src/pages/contact.md b/src/pages/contact.md
index b48fb0ab..9e7a2735 100644
--- a/src/pages/contact.md
+++ b/src/pages/contact.md
@@ -4,9 +4,9 @@ layout: default
 permalink: /contact.html
 description: 'How to contact me.'
 ---
-<h2 class="page__header">{{ title }}</h2>
-<div class="contact__wrapper">
-  <div class="column contact__description">
+<h2 class="page-header">{{ title }}</h2>
+<div class="contact-wrapper">
+  <div class="column description">
     <p>Fill out the form to get in touch. Or I've got other options 👇🏻</p>
     <ul>
       <li>Ping me on <a href="https://social.lol/@cory">Mastodon</a></li>
@@ -28,7 +28,7 @@ description: 'How to contact me.'
       <input type="email" name="email" placeholder="Email" required />
     </label>
     <textarea name="message" placeholder="Message" required></textarea>
-    <div class="flex--centered justify--centered">
+    <div class="flex-centered justify-centered">
       <button type="submit">Send message</button>
     </div>
   </form>
diff --git a/src/pages/feeds.md b/src/pages/feeds.md
index 15fe8197..5245016d 100644
--- a/src/pages/feeds.md
+++ b/src/pages/feeds.md
@@ -5,7 +5,7 @@ permalink: /feeds.html
 description: 'Content feeds exposed by and generated from my site.'
 ---
 
-<h2 class="page__header">{{ title }}</h2>
+<h2 class="page-header">{{ title }}</h2>
 
 These are web feeds, also known as [RSS](https://en.wikipedia.org/wiki/RSS) or [Atom](https://en.wikipedia.org/wiki/Atom_(web_standard)) feeds. Subscribe by copying the URL from the address bar into your newsreader. Visit [About Feeds](https://aboutfeeds.com) to get started with newsreaders and subscribing. It's free.
 
diff --git a/src/pages/now.html b/src/pages/now.html
index c238fbb6..f8c51930 100644
--- a/src/pages/now.html
+++ b/src/pages/now.html
@@ -4,11 +4,11 @@ layout: now
 permalink: /now.html
 description: "See what I'm doing now."
 ---
-<h2 class="now__section--header flex--centered">
+<h2 class="now-header flex-centered">
   {% tablericon "clock-heart" "Currently" %}
   Currently
 </h2>
-<div class="now__section--text">
+<div class="now-text">
     {% render "partials/now/status.liquid", status:status %}
   <p>
     {% tablericon "map-2" "Map" %}
@@ -27,11 +27,11 @@ description: "See what I'm doing now."
     <a href="https://coryd.dev/posts/2024/on-getting-tattooed/">Getting tattooed</a>.
   </p>
 </div>
-<h2 class="now__section--header flex--centered">
+<h2 class="now-header flex-centered">
   {% tablericon "terminal-2" "Making" %}
   Making
 </h2>
-<div class="now__section--text">
+<div class="now-text">
   <p>
     {% tablericon "code" "Hacking" %}
     Hacking away on projects like this page, my <a href="/">blog</a>, and whatever else I can find time for.
diff --git a/src/pages/referrals.md b/src/pages/referrals.md
index 424e9693..e5c67cdf 100644
--- a/src/pages/referrals.md
+++ b/src/pages/referrals.md
@@ -4,11 +4,11 @@ layout: default
 permalink: /referrals.html
 description: 'Referral links for services that I use.'
 ---
-<h2 class="page__header">{{ title }}</h2>
+<h2 class="page-header">{{ title }}</h2>
 
 Referral links for services I use. I save some money, and you do as well if you choose to use them.
 
-<ul>
+<ul class="link-list">
   <li><a onclick="clicky?.log('/referrals', 'Clicky referral', 'click')" href="https://clicky.com/101449513">Clicky</a></li>
   <li><a onclick="clicky?.log('/referrals','NextDNS referral', 'click')" href="https://nextdns.io/?from=m56mt3z6">NextDNS</a></li>
   <li><a onclick="clicky?.log('/referrals','DNSimple referral', 'click')" href="https://dnsimple.com/r/3a7cbb9e15df8f">DNSimple</a></li>
diff --git a/src/pages/stats.html b/src/pages/stats.html
index dae7a068..895b4052 100644
--- a/src/pages/stats.html
+++ b/src/pages/stats.html
@@ -9,7 +9,7 @@ permalink: /stats.html
 <p><strong>Top tags</strong></p>
 {% render "partials/tags.liquid", tags:collections.tagsSortedByCount %}
 <p><strong>Popular posts</strong></p>
-<ol class="link__list">
+<ol class="link-list">
   {% assign posts = collections.posts | getPopularPosts: analytics %}
   {% for post in posts limit: 10 %}
   <li>
diff --git a/src/pages/tag-list.html b/src/pages/tag-list.html
index 614e2726..54da628a 100644
--- a/src/pages/tag-list.html
+++ b/src/pages/tag-list.html
@@ -15,7 +15,7 @@ eleventyComputed:
     {{ post.date | date: "%B %e, %Y" }}
   </time>
   <a href="{{ post.url }}">
-    <h2 class="flex--centered">{{ post.data.title }}</h2>
+    <h2 class="flex-centered">{{ post.data.title }}</h2>
   </a>
   <p class="p-summary">{{ post.data.post_excerpt | markdown }}</p>
   <p><a href="{{ post.url }}">Read more →</a></p>
diff --git a/src/pages/uses.md b/src/pages/uses.md
index 18070324..d637abfc 100644
--- a/src/pages/uses.md
+++ b/src/pages/uses.md
@@ -5,11 +5,11 @@ permalink: /uses.html
 description: 'Software, tools and services that I use regularly.'
 image: /assets/img/pages/uses.jpg
 ---
-<h2 class="page__header">{{ title }}</h2>
+<h2 class="page-header">{{ title }}</h2>
 
 Software and services that I use for work and my own enjoyment.
 
-{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'image__banner', 'eager' %}
+{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'image-banner', 'eager' %}
 
 <h3>Computer setup</h3>
 
diff --git a/src/posts/2023/2023-in-review.html b/src/posts/2023/2023-in-review.html
index 965c41c0..f5e38213 100644
--- a/src/posts/2023/2023-in-review.html
+++ b/src/posts/2023/2023-in-review.html
@@ -14,12 +14,12 @@ tags: ['books', 'music', 'development', 'Eleventy']
   <li><a href="https://www.last.fm/user/coryd_">I listened to a bunch of music</a></li>
   <li><a href="https://trakt.tv/users/cdransf">I watched a bunch of movies and TV</a>, but picking favorites feels weird when so much of that consisted of catching up on "classics" and things I'd either ignored or never seen.</li>
 </ul>
-<h2 class="now__section--header flex--centered">
+<h2 class="now-header flex-centered">
   {% tablericon "books" "Favorite books" %}
   Favorite books
 </h2>
 {% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6 %}
-<h2 class="now__section--header flex--centered">
+<h2 class="now-header flex-centered">
   {% tablericon "vinyl" "Favorite albums" %}
   Favorite books
 </h2>
diff --git a/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md b/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
index 717f53fd..af6c234c 100644
--- a/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
+++ b/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
@@ -111,7 +111,7 @@ export default function Now(props) {
           <Reading books={books} />
           <Movies movies={movies} />
           <TV tv={tv} />
-          <p className="pt-8 text--centered text-xs text-gray-900 dark:text-gray-100">
+          <p className="pt-8 text-centered text-xs text-gray-900 dark:text-gray-100">
             (This is a{' '}
             <Link
               className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
diff --git a/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md b/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
index 26de7288..796d9a35 100644
--- a/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
+++ b/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
@@ -203,7 +203,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
 
 We have an object containing arrays of objects — we iterate through each object for the appropriate section (tracks aren't displayed at the moment) and build the resulting display[^3]. This isn't perfect by any means, but, it does provide a nice little visualization of what I'm listening to and `240` tracks feels adequate as a rolling window into that activity.
 
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&w=1000', 'Albums and artists', 'image__banner', 'lazy' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&w=1000', 'Albums and artists', 'image-banner', 'lazy' %}
 
 [^1]: There are some good options to do this, but there aren't a _ton_ and the age of some of the apps is concerning. [Marvis](https://appaddy.wixsite.com/marvis) is far and away your best choice here.
 [^2]: Making sure that you update the values you obtained, including the path to your downloaded `.p8` file.
diff --git a/src/posts/2023/drying-up-now-page-templates-eleventy.md b/src/posts/2023/drying-up-now-page-templates-eleventy.md
index 3c72a923..4fee4d9f 100644
--- a/src/posts/2023/drying-up-now-page-templates-eleventy.md
+++ b/src/posts/2023/drying-up-now-page-templates-eleventy.md
@@ -141,7 +141,7 @@ layout: main
 {% render "partials/now/links.liquid", links:links %}
 {% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6, loading: 'lazy' %}
 {% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6, loading: 'lazy' %}
-<p class="text-xs text--centered pt-6">This is a
+<p class="text-xs text-centered pt-6">This is a
   <a href="https://nownownow.com/about">now page</a>, and if you have your own site,
   <a href="https://nownownow.com/about">you should make one too</a>.</p>
 ```
diff --git a/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md b/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md
index 2454fa29..a0b95331 100644
--- a/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md
+++ b/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md
@@ -9,7 +9,7 @@ I've been using Fastmail for years now and have explored a number of different a
 
 For now, I've approached filtering my mail by applying regular expressions to reasonably broad categories of incoming mail[^2]. My thinking with this approach is that will scale better over the long term by applying heuristics to common phrases and patterns in incoming mail without the need to apply rules to senders on a per address or domain basis.
 
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&w=1000', 'A diagram of my Fastmail workflow', 'image__banner', 'eager' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&w=1000', 'A diagram of my Fastmail workflow', 'image-banner', 'eager' %}
 
 ## Alias-specific rules
 
diff --git a/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md b/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
index 868474c4..b2198767 100644
--- a/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
+++ b/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
@@ -45,7 +45,7 @@ Rendering the output is as simple as:
 
 ```liquid
 {% if albumReleases.size > 0 %}
-  <h2 class="flex--centered">
+  <h2 class="flex-centered">
     {% tablericon "calendar-time" "Anticipated albums" %}
     Anticipated albums
   </h2>
@@ -64,6 +64,6 @@ Rendering the output is as simple as:
 
 {% endraw %}
 Leaving us with:
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&w=1000', 'Albums I\'m looking forward to', 'image__banner', 'eager' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&w=1000', 'Albums I\'m looking forward to', 'image-banner', 'eager' %}
 
 [^1]: At this point, a dev playground.
diff --git a/src/posts/2023/lazy-select-based-pagination-eleventy.md b/src/posts/2023/lazy-select-based-pagination-eleventy.md
index 7babf959..c26b9333 100644
--- a/src/posts/2023/lazy-select-based-pagination-eleventy.md
+++ b/src/posts/2023/lazy-select-based-pagination-eleventy.md
@@ -15,7 +15,7 @@ Given that I was already iterating through all pages in my posts collection, my
   <div class="flex flex-row items-center">
     <select
       id="pagination"
-      class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-300 mr-1 focus-visible:outline-none focus-visible:bg-blue-400 appearance-none text--centered"
+      class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-300 mr-1 focus-visible:outline-none focus-visible:bg-blue-400 appearance-none text-centered"
       style="text-align-last:center">
       {% for pageEntry in pagination.pages %}
         <option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
diff --git a/src/posts/2023/now-page-grouping-episodes-of-same-show.md b/src/posts/2023/now-page-grouping-episodes-of-same-show.md
index 54354b7c..7d9f8845 100644
--- a/src/posts/2023/now-page-grouping-episodes-of-same-show.md
+++ b/src/posts/2023/now-page-grouping-episodes-of-same-show.md
@@ -12,7 +12,7 @@ I made a minor update to how I'm normalizing TV data for display on my now page.
 
 By _minor_ I mean one of those things that may well break inexplicably depending on where the data lands. Instead of returning a normalized array based directly off the data returned by [Trakt](https://trakt.tv)'s API I'm instead collecting episodes in an array, checking as I iterate through the response to see if an episode of the same show exists and replacing that object with a mutated object designed to display the range of episodes watched for the show.
 
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&w=1000', 'Grouped TV episodes', 'image__banner' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&w=1000', 'Grouped TV episodes', 'image-banner' %}
 
 {% raw %}
 
diff --git a/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md b/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md
index 0af1d2c3..19a11a7f 100644
--- a/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md
+++ b/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md
@@ -168,6 +168,6 @@ Finally, if the page this all lives on is loaded by a client without JavaScript
 
 All of this, yields the single line at the bottom of this image — updated on each visit.
 
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&w=1000', 'Now playing', 'image__banner', 'lazy' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&w=1000', 'Now playing', 'image-banner', 'lazy' %}
 
 [^1]: Plus explicit conditions matching David Bowie and Minor Threat.
diff --git a/src/posts/2023/optimizing-for-performance-with-eleventy.md b/src/posts/2023/optimizing-for-performance-with-eleventy.md
index ce5a789f..33b89a98 100644
--- a/src/posts/2023/optimizing-for-performance-with-eleventy.md
+++ b/src/posts/2023/optimizing-for-performance-with-eleventy.md
@@ -126,6 +126,6 @@ For this page in particular, the images that are rendered above the fold are set
 
 All of these boilerplate steps leave us with a quick to load, accessible and resilient site:
 
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&w=1000', 'Pagespeed scores for coryd.dev/now', 'image__banner' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&w=1000', 'Pagespeed scores for coryd.dev/now', 'image-banner' %}
 
 [^1]: It's easy, flexible and helps mitigate my lack of an eye for design by providing safe baselines.
diff --git a/src/posts/2023/road-to-madness-apple-music-charts.md b/src/posts/2023/road-to-madness-apple-music-charts.md
index e884c39e..2f9a881d 100644
--- a/src/posts/2023/road-to-madness-apple-music-charts.md
+++ b/src/posts/2023/road-to-madness-apple-music-charts.md
@@ -132,7 +132,7 @@ _Cool_[^4]. GitHub triggers a rebuild of the site every hour, Netlify builds it,
 
 There are some significant issues with this approach: it doesn't capture listens to an album in a loop (like me playing the new Outer Heaven record today — hails 🤘). It can get wonky when my diff function hits a track order that elicits a false positive return value.
 
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&w=1000', 'Charlie Day standing in front of charts', 'image__banner', 'lazy' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&w=1000', 'Charlie Day standing in front of charts', 'image-banner', 'lazy' %}
 
 "But Cory there's last.fm." I hear this, I love last.fm, but I've got concerns about its age, ownership and maintenance. I don't want to be on the wrong end of a scream test when the wrong (right?) server rack gets decommissioned.
 
diff --git a/src/posts/2024/building-a-scrobbler-using-plex-webhooks-edge-functions-and-blob-storage.md b/src/posts/2024/building-a-scrobbler-using-plex-webhooks-edge-functions-and-blob-storage.md
index 34e544b8..1ec03c32 100644
--- a/src/posts/2024/building-a-scrobbler-using-plex-webhooks-edge-functions-and-blob-storage.md
+++ b/src/posts/2024/building-a-scrobbler-using-plex-webhooks-edge-functions-and-blob-storage.md
@@ -9,7 +9,7 @@ I've written before about [embedding music into my site](https://coryd.dev/posts
 
 I could have kept depending on Last.fm and — don't get me wrong — I love Last.fm. It's one of those valuable, legacy services that's hanging on with a rich user base and historical recommendations. I'm going to keep scrobbling data there and to ListenBrainz[^1].
 
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&w=1000', 'A diagram of the scrobbling architecture', 'image__banner', 'eager' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&w=1000', 'A diagram of the scrobbling architecture', 'image-banner', 'eager' %}
 
 What I've long wanted is something that sits on infrastructure I control, stores my own data and lets me present roughly the same data. Given that Plex will issue outbound webhooks, I thought I'd set up an edge function over at Netlify and point a webhook at it to see what I could do with the inbound payload. What Plex sends is fairly lightweight and ended up needing to be read in from form data on the `POST`, but it was enough to work with.
 
diff --git a/src/posts/2024/check-if-images-are-available-before-optimizing-in-eleventy.md b/src/posts/2024/check-if-images-are-available-before-optimizing-in-eleventy.md
index 3da571eb..8738b7df 100644
--- a/src/posts/2024/check-if-images-are-available-before-optimizing-in-eleventy.md
+++ b/src/posts/2024/check-if-images-are-available-before-optimizing-in-eleventy.md
@@ -99,7 +99,7 @@ export const img = async (
 
   const generatePlaceholder = async () => {
     return htmlmin.minify(
-      `<div class="flex--centered image__placeholder ${shape}">${icon}</div>`,
+      `<div class="flex-centered image__placeholder ${shape}">${icon}</div>`,
       { collapseWhitespace: true }
     );
   };
diff --git a/src/posts/2024/link-blogging-using-readwise.md b/src/posts/2024/link-blogging-using-readwise.md
index 6aab3dfa..519109e9 100644
--- a/src/posts/2024/link-blogging-using-readwise.md
+++ b/src/posts/2024/link-blogging-using-readwise.md
@@ -47,11 +47,11 @@ This fetches links from my archive (so that it's much more likely that I've read
 {% raw %}
 ```liquid
 {% if links.size > 0 %}
-  <h2 class="flex--centered">
+  <h2 class="flex-centered">
     {% tablericon "link" "Links" %}
     Links
   </h2>
-  <ul class="link__list">
+  <ul class="link-list">
     {% for link in links limit: 5 %}
       <li>
         <a class="no-underline" href="{{link.url}}" title="{{link.title | escape}}">
@@ -78,7 +78,7 @@ pagination:
 {% for link in pagination.items %}
 <article class="h-entry">
   <a class="no-underline" href="{{ link.url }}">
-    <h2 class="flex--centered">{{ link.title }}</h2>
+    <h2 class="flex-centered">{{ link.title }}</h2>
   </a>
   <time class="dt-published" datetime="{{ link.date }}">
     {{ link.date | date: "%m.%Y" }}
diff --git a/src/posts/2024/link-page-improvements.md b/src/posts/2024/link-page-improvements.md
index 7b65ad09..b6989c13 100644
--- a/src/posts/2024/link-page-improvements.md
+++ b/src/posts/2024/link-page-improvements.md
@@ -57,7 +57,7 @@ This is then implemented in the `links.html` page template:
 {%- assign shareLink = link.url | findPost: linkPosts -%}
 <!-- template stuff -->
 {%- if shareLink %}
-  <a class="brand-mastodon icon--small" href="{{ shareLink }}">
+  <a class="brand-mastodon icon-small" href="{{ shareLink }}">
     {% tablericon "brand-mastodon" "Mastodon post" %}
   </a>
 {% endif -%}
diff --git a/src/posts/2024/on-getting-tattooed.md b/src/posts/2024/on-getting-tattooed.md
index 91a411d4..f604cca8 100644
--- a/src/posts/2024/on-getting-tattooed.md
+++ b/src/posts/2024/on-getting-tattooed.md
@@ -27,7 +27,7 @@ My parents started getting tattooed in their 50s, thinking it would be a cheaper
 Each piece was important to me when I got it and remains important to me now. They're references to and reminders of important moments and I enjoy every session[^6]. But, for now, my shoulder is sore.
 
 {% capture fallbackIcon %}{% tablericon "photo" "A photo of the Sturgill Simpson-inspired half sleeve referenced above." %}{% endcapture %}
-{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&w=1000', 'A photo of the Sturgill Simpson-inspired half sleeve referenced above.', 'image__banner', 'eager' %}
+{% image 'https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&w=1000', 'A photo of the Sturgill Simpson-inspired half sleeve referenced above.', 'image-banner', 'eager' %}
 
 [^1]: My wife got the same piece done — there was one pointing to the driveway of the house we got married at. It burned down in the Butte fire.
 [^2]: She got elected!