chore: consolidate some styles

src/_includes/partials/author.liquid

@@ -1,5 +1,5 @@
 <div class="author__wrapper">
-  <div class="avatar__wrapper">
+  <div class="avatar__wrapper flex--centered">
     <div class="avatar__wrapper--interior">
       {% image './src/assets/img/avatar.webp', meta.siteName, 'author-avatar' %}
     </div>

src/_includes/partials/now/albumReleases.liquid

@@ -1,5 +1,5 @@
 {% if albumReleases.size > 0 %}
-  <h2 class="now__section--header">
+  <h2 class="now__section--header flex--centered">
     {% tablericon "calendar-time" "Anticipated albums" %}
     Anticipated albums
   </h2>

src/_includes/partials/now/links.liquid

@@ -1,5 +1,5 @@
 {% if links.size > 0 %}
-  <h2 class="now__section--header">
+  <h2 class="now__section--header flex--centered">
     {% tablericon "link" "Links" %}
     Links
   </h2>

src/_includes/partials/now/media-grid.liquid

@@ -1,6 +1,6 @@
 {% if data.size > 0 %}
   {% assign media = data | normalizeMedia %}
-  <h2 class="now__section--header">
+  <h2 class="now__section--header flex--centered">
     {% tablericon icon title %}
     {{ title }}
   </h2>

src/_includes/partials/now/topper.liquid

@@ -1,6 +1,6 @@
 <div class="now__topper">
   <h2>
-    <a href="/now">Now</a>
+    <a class="no-underline" href="/now">Now</a>
   </h2>
   <div class="dark:text-white text-gray-800">
     <p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation,

src/_includes/partials/paginator.liquid

@@ -1,4 +1,4 @@
-<nav class="pagination">
+<nav class="pagination flex--centered">
   {% if pagination.href.previous %}
     <a href="{{ pagination.href.previous }}">
       <button aria-label="Previous page [&>svg]:h-5 [&>svg]:w-5">

src/_includes/partials/popular-posts.liquid

@@ -1,6 +1,6 @@
 {% assign posts = posts | getPopularPosts: analytics %}
 <div class="popular-posts">
-  <h2>
+  <h2 class="flex--centered">
     {% tablericon "flame" "Popular" %}
     Popular posts
   </h2>

src/_includes/partials/webmentions/comments.liquid

@@ -2,10 +2,10 @@
   <h2>Comments</h2>
   <div class="interaction__wrapper comments">
     {% for mention in mentions['in-reply-to'] %}
-      <div class="comment__wrapper">
+      <div class="comment__wrapper flex--centered">
-        <div class="comment__wrapper--interior">
+        <div class="comment__wrapper--interior flex--centered">
           <a href={{mention.url}}>
-            <div class="avatar__wrapper">
+            <div class="avatar__wrapper flex--centered">
                 {% image mention.author.photo, mention.author.name, 'avatar__wrapper-image' %}
             </div>
           </a>

src/_includes/partials/webmentions/interaction.liquid

@@ -7,12 +7,12 @@
 {% endcapture -%}
 {% if mentions[type].size > 0 %}
   <h2>{{ title }}</h2>
-  <div class="interaction__wrapper">
+  <div class="interaction__wrapper flex--centered">
     <ul>
       {% for mention in mentions[type] %}
         <li>
           <a href={{mention.url}}>
-            <div class="avatar__wrapper">
+            <div class="avatar__wrapper flex--centered">
               {% image mention.author.photo, mention.author.name, 'avatar__wrapper-image' %}
             </div>
           </a>

src/_includes/post.liquid

@@ -7,7 +7,7 @@ schema: blog
   <article class="h-entry" data-pagefind-body>
     {% if link %}
       <a class="no-underline" href="{{ link }}">
-        <h2 data-pagefind-meta="title">
+        <h2 class="flex--centered" data-pagefind-meta="title">
           {% tablericon 'link' title %}
           {{ title }}
         </h2>

src/_includes/webrings/css-joy.liquid

@@ -2,7 +2,7 @@
   <a class="no-underline" href="https://cs.sjoy.lol">
     <h3 class="text-center">CSS JOY Webring</h3>
   </a>
-  <div class="webring__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>

src/_includes/webrings/the-claw.liquid

@@ -1,9 +1,9 @@
 <div class="webring__wrapper">
-  <div class="webring__centered">
+  <div class="webring__centered flex--centered">
     {% image './src/assets/img/webrings/theclaw.png', 'The Claw Webring' %}
   </div>
   <h3 class="text-center">The Claw Webring</h3>
-  <div class="webring__centered">
+  <div class="webring__centered flex--centered">
     <a href="https://github.com/whitep4nth3r/the-claw-webring" class="pill--button">
       {% tablericon "user-plus" "Join!" %} Join!
     </a>

src/assets/styles/index.css

@@ -234,18 +234,6 @@ main {
   line-height: var(--line-height-2xl);
 }
 
-.now__topper h2 a,
-article a h2,
-.main__title h1 a,
-footer .links__secondary a {
-  text-decoration: none;
-}
-
-.main__title h1 a,
-footer .links__secondary a {
-  color: var(--black);
-}
-
 .main__title h1 a:hover,
 .main__title h1 a:focus,
 .main__title h1 a:active,
@@ -290,7 +278,9 @@ nav ul li {
   margin-right: 1rem;
 }
 
-nav ul li a {
+.main__title h1 a,
+nav ul li a,
+footer .links__secondary a {
   color: var(--black);
   text-decoration: none !important;
 }
@@ -466,13 +456,6 @@ h2 > a.header-anchor {
   background-color: var(--blue-600);
 }
 
-p > a,
-span > a,
-blockquote > a,
-li > a {
-  text-decoration: underline !important;
-}
-
 code {
   font-family: var(--font-mono);
   padding: .125rem;
@@ -482,7 +465,6 @@ code {
 
 /* buttons */
 .pill--button {
-  appearance: none;
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   font-weight: 700;
@@ -493,9 +475,10 @@ code {
   padding-right: 1rem;
   margin-right: .25rem;
   margin-bottom: .75rem;
-  border: none;
   color: var(--white);
   cursor: pointer;
+  appearance: none;
+  border: none;
   text-decoration: none;
   background-color: var(--blue-600);
   transition-property: background-color;
@@ -1052,15 +1035,7 @@ textarea:focus {
 }
 
 /* flex layout */
-.pagination,
+.flex--centered {
-article h2,
-.now__section--header,
-.avatar__wrapper,
-.popular-posts h2,
-.webmentions__wrapper .interaction__wrapper,
-.webmentions__wrapper .interaction__wrapper .comment__wrapper,
-.webmentions__wrapper .interaction__wrapper .comment__wrapper--interior,
-.webring__wrapper > .webring__centered {
   display: flex;
   flex-direction: row;
   align-items: center;

src/index.html

@@ -24,7 +24,7 @@ meta:
 {% if pagination.pageNumber == 0 %}{% include "partials/now/topper.liquid" status:status %}{% endif %} {% for post in pagination.items %} {% if post.data.published %}
 <article class="h-entry">
   <a class="no-underline" href="{{ post.url }}">
-    <h2>{{ post.data.title }}</h2>
+    <h2 class="flex--centered">{{ post.data.title }}</h2>
   </a>
   <span class="p-author h-card hidden">{{ meta.siteName }}</span>
   <time class="dt-published" datetime="{{ post.date }}">

src/pages/about.md

@@ -3,7 +3,7 @@ title: About
 layout: default
 permalink: /about.html
 ---
-<div class="avatar__wrapper">
+<div class="avatar__wrapper flex--centered">
   <div class="avatar__wrapper--interior">
     {% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %}
     {% image './src/assets/img/avatar.webp', about_alt %}

src/pages/tagList.md

@@ -13,7 +13,7 @@ templateEngineOverride: liquid,md
 {% for post in posts %}
 <article class="h-entry">
   <a class="no-underline" href="{{ post.url }}">
-    <h2>{{ post.data.title }}</h2>
+    <h2 class="flex--centered">{{ post.data.title }}</h2>
   </a>
   <time class="dt-published" datetime="{{ post.date }}">
     {{ post.date | date: "%m.%Y" }}