chore(*): remove unused styles, images, clean up and format

server/utils/paginator.php

@@ -25,9 +25,7 @@ function renderPaginator(array $pagination, int $totalPages): void {
         <?php endforeach; ?>
       </select>
       <noscript>
-        <p>
+        <p><span aria-current="page"><?= $pagination['pageNumber'] ?></span> of <?= $totalPages ?></p>
-          <span aria-current="page"><?= $pagination['pageNumber'] ?></span> of <?= $totalPages ?>
-        </p>
       </noscript>
     </select-pagination>
 

src/assets/styles/components/dialog.css

@@ -8,11 +8,6 @@
   to { opacity: 0; transform: scale(0.95); }
 }
 
-dialog {
-  width: var(--sizing-full);
-  height: var(--sizing-full);
-}
-
 .dialog-open,
 .dialog-close {
   display: inline-flex;
@@ -32,11 +27,18 @@ dialog {
 }
 
 dialog {
+  width: var(--sizing-full);
+  height: var(--sizing-full);
   background: var(--background-color);
   padding: var(--spacing-lg) var(--spacing-base);
   overflow-y: auto;
   border-radius: var(--border-radius-slight);
   font-size: var(--font-size-base);
+  animation: fadeIn var(--transition-duration-default) var(--transition-ease-in-out);
+
+  &::backdrop {
+    background: var(--dialog-overlay-background);
+  }
 
   &.closing {
     animation: fadeOut var(--transition-duration-default) var(--transition-ease-in-out);
@@ -78,11 +80,3 @@ dialog {
     }
   }
 }
-
-dialog {
-  animation: fadeIn var(--transition-duration-default) var(--transition-ease-in-out);
-}
-
-dialog::backdrop {
-  background: var(--dialog-overlay-background);
-}

src/assets/styles/components/progress-bar.css

@@ -5,19 +5,19 @@ progress {
   background-color: var(--gray-light);
   border-radius: var(--border-radius-full);
   overflow: hidden;
-}
 
-progress::-webkit-progress-bar {
+  &::-webkit-progress-bar {
-  background-color: var(--gray-light);
+    background-color: var(--gray-light);
-  border-radius: var(--border-radius-full);
+    border-radius: var(--border-radius-full);
-}
+  }
 
-progress::-webkit-progress-value {
+  &::-webkit-progress-value {
-  background-color: var(--accent-color);
+    background-color: var(--accent-color);
-  border-radius: var(--border-radius-full);
+    border-radius: var(--border-radius-full);
-}
+  }
 
-progress::-moz-progress-bar {
+  &::-moz-progress-bar {
-  background-color: var(--accent-color);
+    background-color: var(--accent-color);
-  border-radius: var(--border-radius-full);
+    border-radius: var(--border-radius-full);
+  }
 }

src/assets/styles/index.css

@@ -11,7 +11,6 @@
 @import url("./base/index.css") layer(base);
 
 /* page styles */
-@import url("./pages/about.css") layer(page);
 @import url("./pages/books.css") layer(page);
 @import url("./pages/contact.css") layer(page);
 @import url("./pages/links.css") layer(page);

src/assets/styles/noscript.css

@@ -8,7 +8,8 @@
   height: unset !important;
   overflow: unset !important;
   margin-bottom: unset !important;
-}
+
-[data-toggle-content].text-toggle-hidden::after {
+  &::after {
-  display: none !important;
+    display: none !important;
+  }
 }

src/assets/styles/pages/about.css

@@ -1,21 +0,0 @@
-.avatar-wrapper {
-  --avatar-size: 16rem;
-
-  display: flex;
-  justify-content: center;
-  width: var(--sizing-full);
-
-  @media screen and (min-width: 768px) {
-    --avatar-size: 24rem;
-  }
-
-  img {
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-  }
-}
-
-.about-title {
-  margin: var(--margin-vertical-base-horizontal-zero);
-  text-align: center;
-}

src/assets/styles/pages/media.css

@@ -21,7 +21,7 @@
   }
 }
 
-.image-media {
+.media-image {
   border: var(--border-gray);
 }
 

src/assets/styles/pages/music.css

@@ -1,5 +1,5 @@
 .artist-focus {
-  .image-media {
+  .media-image {
     aspect-ratio: var(--aspect-ratio-square);
     width: var(--sizing-full);
     height: auto;

src/includes/blocks/banners/coffee.liquid

@@ -1,5 +1,3 @@
 <div class="banner coffee">
-  <p>
+  <p>{% tablericon "coffee" %} <a class="coffee" href="https://buymeacoffee.com/cory">If you found this post helpful, you can buy me a coffee.</a></p>
-    {% tablericon "coffee" %} <a class="coffee" href="https://buymeacoffee.com/cory">If you found this post helpful, you can buy me a coffee.</a>
-  </p>
 </div>

src/includes/blocks/banners/email.liquid

@@ -1,5 +1,3 @@
 <div class="banner mail">
-  <p>
+  <p>{% tablericon "mail" %} <a class="mail" href="/contact">Reply to or discuss this post via email.</a></p>
-    {% tablericon "mail" %} <a class="mail" href="/contact">Reply to or discuss this post via email.</a>
-  </p>
 </div>

src/includes/home/recent-activity.liquid

@@ -57,8 +57,8 @@
         {%- endif -%}
       </h3>
       {% render "blocks/tags.liquid",
- 18      tags:item.tags
+        tags:item.tags
- 19    %}
+      %}
     </article>
     {%- endfor -%}
 </article>

src/includes/metadata/index.liquid

@@ -9,13 +9,13 @@
   {%- endif -%}
 {%- endcapture -%}
 {%- capture pageDescription -%}
-  {% if page.description %}
+  {%- if page.description -%}
     {{ page.description }}
-  {% elsif description %}
+  {%- elsif description -%}
     {{ description }}
-  {% else %}
+  {%- else -%}
     {{ globals.site_description }}
-  {% endif %}
+  {%- endif -%}
 {%- endcapture -%}
 {%- assign ogImage = globals.cdn_url | append: globals.avatar -%}
 {%- case schema -%}
@@ -83,7 +83,7 @@
 {% render "metadata/static.liquid"
   fullUrl:fullUrl,
   pageTitle:pageTitle,
-  pageDescription:pageDescription
+  pageDescription:pageDescription,
   ogImage:ogImage,
   globals:globals,
 %}

src/includes/metadata/static.liquid

@@ -1,8 +1,8 @@
 {%- assign description = pageDescription | markdown | strip_html | htmlTruncate | escape -%}
-<title>{{- pageTitle -}}</title>
+<title>{{ pageTitle }}</title>
-<meta property="og:title" content="{{- pageTitle -}}" />
+<meta property="og:title" content="{{ pageTitle }}" />
-<meta name="description" content="{{- description -}}" />
+<meta name="description" content="{{ description }}" />
-<meta property="og:description" content="{{- description -}}" />
+<meta property="og:description" content="{{ description }}" />
 <meta property="og:type" content="article" />
 <meta property="og:url" content="{{ fullUrl }}" />
 <link rel="canonical" href="{{ fullUrl }}" />

src/includes/nav/paginator.liquid

@@ -6,16 +6,11 @@
   {%- assign prevHref = pagination.href.previous -%}
   {%- assign nextHref = pagination.href.next -%}
   {% if prevHref %}
-  <a
+  <a href="{{ prevHref }}" aria-label="Previous page">
-    href="{{ prevHref }}"
-    aria-label="Previous page"
-  >
     {% tablericon "arrow-left" %}
   </a>
   {% else %}
-  <span>
+  <span>{% tablericon "arrow-left" %}</span>
-    {% tablericon "arrow-left" %}
-  </span>
   {% endif %}
   <select-pagination>
     <select class="client-side" aria-label="Page selection">
@@ -26,22 +21,15 @@
       {%- endfor -%}
     </select>
     <noscript>
-      <p>
+      <p><span aria-current="page">{{ pagination.pageNumber | plus:1 }}</span> of {{ pagination.links.size }}</p>
-        <span aria-current="page">{{ pagination.pageNumber | plus:1 }}</span> of {{ pagination.links.size }}
-      </p>
     </noscript>
   </select-pagination>
   {% if nextHref %}
-  <a
+  <a href="{{ nextHref }}" aria-label="Next page">
-    href="{{ nextHref }}"
-    aria-label="Next page"
-  >
     {% tablericon "arrow-right" %}
   </a>
   {% else %}
-  <span>
+  <span>{% tablericon "arrow-right" %}</span>
-    {% tablericon "arrow-right" %}
-  </span>
   {% endif %}
 </nav>
 {%- endunless -%}

src/pages/dynamic/artist.php.liquid

@@ -7,7 +7,7 @@ schema: artist
 <article class="artist-focus">
   <div class="artist-display">
     <img
-      class="image-media"
+      class="media-image"
       srcset="
         {{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp 200w,
         {{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w600&type=webp 400w,

src/pages/dynamic/book.php.liquid

@@ -7,7 +7,7 @@ schema: book
 <article class="book-focus">
   <div class="book-display">
     <img
-      class="image-media"
+      class="media-image"
       srcset="
         {{ globals.cdn_url }}<?= htmlspecialchars($book["image"]) ?>?class=verticalsm&type=webp 200w,
         {{ globals.cdn_url }}<?= htmlspecialchars($book["image"]) ?>?class=verticalmd&type=webp 400w,