feat: remove tailwind

src/_includes/partials/author.liquid

@@ -1,9 +1,9 @@
-<div class="mt-12 pt-12 pb-8 border-t border-gray-200 dark:border-gray-700 flex flex-col md:flex-row justify-between items-center">
-  <div class="flex flex-col mb-4 md:mb-0 md:flex-row items-center flex-1">
-    <div class="border border-blue-600 dark:border-blue-400 bg-white rounded-full overflow-hidden mb-4 md:mb-0 md:mr-4 [&>*]:h-20 [&>*]:w-20 flex flex-col items-center">
-      {% image './src/assets/img/avatar.webp', meta.siteName, 'inline-block' %}
+<div class="author__wrapper">
+  <div class="avatar__wrapper">
+    <div class="avatar__wrapper--interior">
+      {% image './src/assets/img/avatar.webp', meta.siteName, 'author-avatar' %}
     </div>
-    <span class="text-lg font-medium">{{ meta.siteName }}</span>
+    <span>{{ meta.siteName }}</span>
   </div>
-  <p class="text-sm flex-1">{{ meta.siteDescription }}</p>
+  <p class="description__wrapper">{{ meta.siteDescription }}</p>
 </div>

src/_includes/partials/footer.liquid

@@ -1,13 +1,13 @@
 <footer>
-  <div class="mt-8 pt-8 pb-4 flex gap-2 md:gap-3 justify-center w-full">
+  <nav class="social__main">
     {% for link in nav.social %}
       {% render "partials/nav/linked-icon.liquid", name: link.name, link: link.url, icon: link.icon %}
     {% endfor %}
-  </div>
-  <div class="flex justify-center text-sm text-gray-500 dark:text-gray-100 pb-8 text-center">
+  </nav>
+  <nav class="links__secondary">
     {% for link in nav.footer %}
       {% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon %}
-      {% if not forloop.last %}<span class="mx-1">•</span>{% endif %}
+      {% if not forloop.last %}<span>•</span>{% endif %}
     {% endfor %}
-  </div>
+  </nav>
 </footer>

src/_includes/partials/header.liquid

@@ -1,6 +1,6 @@
-<div class="flex flex-col md:flex-row md:items-center md:justify-between pt-5 md:pt-10">
-  <h1 class="text-2xl md:text-3xl font-black leading-tight pb-5 md:pb-0">
-    <a class="text-gray-700 dark:text-white" href="/">{{ meta.siteName }}</a>
+<div class="main__title">
+  <h1>
+    <a href="/">{{ meta.siteName }}</a>
   </h1>
   {% render "partials/nav/menu.liquid", page: page, nav: nav %}
 </div>

src/_includes/partials/nav/link.liquid

@@ -1,6 +1,6 @@
 {%- capture pageUrl %}/{{ link | downcase }}/{% endcapture -%}
 {% if pageUrl contains page.fileSlug and page.fileSlug %}
-  <span class="cursor-not-allowed active">
+  <span class="active">
     {% if icon %}
       {% tablericon icon link %}
     {% else %}
@@ -8,11 +8,13 @@
     {% endif %}
   </span>
 {% else %}
-  <a class="text-gray-700 hover:text-blue-800 dark:text-white dark:hover:text-blue-200 !no-underline" href="/{{ link | downcase }}">
-    {% if icon %}
+  {% if icon %}
+    <a class="link--icon" href="/{{ link | downcase }}">
       {% tablericon icon link %}
-    {% else %}
+    </a>
+  {% else %}
+    <a href="/{{ link | downcase }}">
       {{ link }}
-    {% endif %}
-  </a>
+    </a>
+  {% endif %}
 {% endif %}

src/_includes/partials/nav/linked-icon.liquid

@@ -1,5 +1,5 @@
 <a
-  class="[&>svg]:h-6 [&>svg]:w-6 link--icon"
+  class="link--icon"
   href="{{ link }}"
   rel="me"
   title="{{ name }}">

src/_includes/partials/nav/menu.liquid

@@ -1,7 +1,7 @@
 <nav>
-  <ul class="flex">
+  <ul>
     {% for link in nav.menu %}
-      <li{% if not forloop.last %} class="mr-4"{% endif %}>
+      <li>
         {% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon %}
       </li>
     {% endfor %}

src/_includes/partials/now/albumReleases.liquid

@@ -1,12 +1,12 @@
 {% if albumReleases.size > 0 %}
-  <h2 class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:md:h-7 [&>svg]:md:w-7 [&>svg]:-mt-1 [&>svg]:md:-mt-1.5 [&>svg]:inline icon--bold m-0 text-xl font-black leading-tight tracking-normal dark:text-white md:text-2xl mt-8 mb-4">
+  <h2 class="now__section--header">
     {% tablericon "calendar-time" "Anticipated albums" %}
     Anticipated albums
   </h2>
-  <ul class="list-inside list-disc pl-5 md:pl-10">
+  <ul>
     {% for album in albumReleases %}
-      <li class="mt-1.5 mb-2">
-        <span class="font-bold">{{ album.date | readableDate }}: </span>
+      <li>
+        <strong>{{ album.date | readableDate }}: </strong>
         <a href="https://{{album.url}}" title="{{album.title | escape}}">
           {{album.title}}
         </a>

src/_includes/partials/now/links.liquid

@@ -1,11 +1,11 @@
 {% if links.size > 0 %}
-  <h2 class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:md:h-7 [&>svg]:md:w-7 [&>svg]:-mt-1 [&>svg]:md:-mt-1.5 [&>svg]:inline icon--bold m-0 text-xl font-black leading-tight tracking-normal dark:text-white md:text-2xl mt-8 mb-4">
+  <h2 class="now__section--header">
     {% tablericon "link" "Links" %}
     Links
   </h2>
-  <ul class="list-inside list-disc pl-5 md:pl-10">
+  <ul>
     {% for link in links limit: 5 %}
-      <li class="mt-1.5 mb-2">
+      <li>
         <a href="{{link.url}}" title="{{link.title | escape}}">
           {{ link.title }}
         </a>

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

@@ -1,36 +1,36 @@
 {% if data.size > 0 %}
   {% assign media = data | normalizeMedia %}
-  <h2 class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:md:h-7 [&>svg]:md:w-7 [&>svg]:-mt-1 [&>svg]:md:-mt-1.5 [&>svg]:inline icon--bold m-0 text-xl font-black leading-tight tracking-normal dark:text-white md:text-2xl mt-8 mb-4">
+  <h2 class="now__section--header">
     {% tablericon icon title %}
     {{ title }}
   </h2>
-  <div class="grid gap-2 {% if shape == 'square' %}grid-cols-2 md:grid-cols-4{% else %}grid-cols-3 md:grid-cols-6{% endif %} not-prose">
+  <div class="media__grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
     {% for item in media limit: count %}
       {% assign alt = item.alt | strip %}
       <a href="{{ item.url | stripUtm }}" title="{{ alt | escape }}">
-        <div class="relative block h-full rounded-lg overflow-hidden"{% if shape != 'square' %} style="max-width:226px"{% endif %}>
-          <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-blue-600 hover:border-blue-800 dark:border-blue-400 dark:hover:border-blue-200 ease-in-out duration-300{% if item.subtext %} bg-cover-gradient{% endif %}"></div>
-          <div class="absolute px-1.5 bottom-2 drop-shadow-md w-full">
+        <div class="item__wrapper"{% if shape != 'square' %} style="max-width:226px"{% endif %}>
+          <div class="item__cover{% if item.subtext %} gradient{% endif %}"></div>
+          <div class="item__meta-text">
             {% if item.title %}
-              <div class="text-xs font-bold text-white line-clamp-2">{{ item.title }}</div>
+              <div class="header">{{ item.title }}</div>
             {% endif %}
             {% if item.percentage %}
               {% render "partials/now/progress-bar.liquid", percentage:item.percentage %}
             {% endif %}
             {% if item.subtext %}
-              <div class="text-xs text-white line-clamp-2">
+              <div class="subheader">
                 {{ item.subtext }}
               </div>
             {% endif %}
           </div>
-          {%- capture loadingStrategy %}
-            {% if loading %}
+          {%- capture loadingStrategy -%}
+            {%- if loading -%}
               {{ loading }}
-            {% else %}
+            {%- else -%}
               'lazy'
-            {% endif %}
-          {% endcapture -%}
-          {% image item.image, alt, 'rounded-lg w-full h-full [&>*]:w-full [&>*]:h-full', loadingStrategy %}
+            {%- endif -%}
+          {%- endcapture -%}
+          {% image item.image, alt, 'item__image', loadingStrategy %}
         </div>
       </a>
     {% endfor %}

src/_includes/partials/now/playing.liquid

@@ -1,4 +1,4 @@
-<p id="now-playing" class="client-side mb-0 flex flex-row items-start md:items-center">
+<p id="now-playing" class="now-playing client-side">
   <span id="now-playing-loading" class="icon--spin">
     {% tablericon 'loader-2' 'Loading...' %}
   </span>

src/_includes/partials/now/progress-bar.liquid

@@ -1,5 +1,5 @@
 {% if percentage %}
-<div class="overflow-hidden h-4 my-1 w-full flex rounded-lg bg-gray-200/60">
-  <div style="width:{{ percentage }}" class="shadow-none flex flex-col whitespace-nowrap justify-center bg-blue-600 dark:bg-blue-400"></div>
+<div class="progress-bar__wrapper">
+  <div style="width:{{ percentage }}" class="progress-bar shadow-none flex flex-col whitespace-nowrap justify-center bg-blue-600 dark:bg-blue-400"></div>
 </div>
 {% endif %}

src/_includes/partials/now/topper.liquid

@@ -1,8 +1,6 @@
-<div class="border-b border-gray-200 dark:border-gray-700 mb-8 pb-8">
-  <h2 class="m-0 mb-4 inline">
-    <a class="text-gray-700 dark:text-white text-xl font-black leading-tight tracking-normal md:text-2xl no-underline not-prose" href="/now">
-      Now
-    </a>
+<div class="now__topper">
+  <h2>
+    <a 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,13 +1,13 @@
-<nav class="flex justify-between mt-8 items-center">
+<nav class="pagination">
   {% if pagination.href.previous %}
     <a href="{{ pagination.href.previous }}">
-      <button class="py-2 pr-4 dark:text-blue-400 text-blue-600" aria-label="Previous page [&>svg]:h-5 [&>svg]:w-5">
+      <button aria-label="Previous page [&>svg]:h-5 [&>svg]:w-5">
         {% tablericon "arrow-left" "Previous" %}
       </button>
     </a>
   {% else %}
     <button
-      class="py-2 pr-4 cursor-not-allowed disabled:opacity-50 [&>svg]:h-5 [&>svg]:w-5"
+      class="disabled"
       aria-label="Previous page (disabled)"
       disabled>
       {% tablericon "arrow-left" "Prevous" %}
@@ -18,13 +18,13 @@
   </div>
   {% if pagination.href.next %}
     <a href="{{ pagination.href.next }}">
-      <button class="py-2 pl-4 dark:text-blue-400 text-blue-600 [&>svg]:h-5 [&>svg]:w-5" aria-label="Next page">
+      <button aria-label="Next page">
         {% tablericon "arrow-right" "Next" %}
       </button>
     </a>
   {% else %}
     <button
-      class="py-2 pl-4 cursor-not-allowed disabled:opacity-50 [&>svg]:h-5 [&>svg]:w-5"
+      class="disabled"
       aria-label="Next page (disabled)"
       disabled>
       {% tablericon "arrow-right" "Next" %}

src/_includes/partials/popular-posts.liquid

@@ -1,16 +1,16 @@
 {% assign posts = posts | getPopularPosts: analytics %}
-<div class="not-prose">
-  <h2 class="[&>svg]:h-5 [&>svg]:w-5 [&>svg]:md:h-7 [&>svg]:md:w-7 [&>svg]:inline icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-white md:text-2xl mt-8 mb-4">
+<div class="popular-posts">
+  <h2>
     {% tablericon "flame" "Popular" %}
     Popular posts
   </h2>
-  <ul class="list-inside list-disc pl-5 md:pl-10">
+  <ul>
     {% for post in posts limit: 5 %}
-      <li class="mt-1.5 mb-2">
+      <li>
         <a href="{{post.url}}" title="{{ post.data.title | escape}}">
           {{ post.data.title }}
         </a>
       </li>
     {% endfor %}
   </ul>
-</div>
+</div>

src/_includes/partials/post-tags.liquid

@@ -1,11 +1,9 @@
-<div class="mt-8">
-  {% for tag in tags %}
-    {% if tag != "posts" %}
-      <a href="/tags/{{ tag }}">
-        <div
-          class="pill--button pill--button__small"
-          data-pagefind-filter="tags">{{ tag }}</div>
-      </a>
-    {% endif %}
-  {% endfor %}
-</div>
+{% for tag in tags %}
+  {% if tag != "posts" %}
+    <a href="/tags/{{ tag }}">
+      <div
+        class="pill--button pill--button__small"
+        data-pagefind-filter="tags">{{ tag }}</div>
+    </a>
+  {% endif %}
+{% endfor %}

src/_includes/partials/webmentions/comments.liquid

@@ -1,18 +1,18 @@
 {% if mentions['in-reply-to'].size > 0 %}
-  <h2 class="text-lg md:text-xl font-black leading-tight dark:text-white">Comments</h2>
-  <div class="mt-4 mb-4 flex flex-col items-center not-prose">
+  <h2>Comments</h2>
+  <div class="interaction__wrapper comments">
     {% for mention in mentions['in-reply-to'] %}
-      <div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
-        <div class="group flex flex-row space-between items-center">
+      <div class="comment__wrapper">
+        <div class="comment__wrapper--interior">
           <a href={{mention.url}}>
-            <div class="bg-gray-900 dark:bg-white h-14 w-14 border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-blue-800 dark:group-hover:border-blue-200 rounded-full overflow-hidden">
-                {% image mention.author.photo, mention.author.name %}
+            <div class="avatar__wrapper">
+                {% image mention.author.photo, mention.author.name, 'avatar__wrapper-image' %}
             </div>
           </a>
-          <div class="ml-3">
-            <a class="text-gray-700 dark:text-white" href={{mention.url}}>
-              <p class="text-sm group-hover:text-blue-800 dark:group-hover:text-blue-200">{{ mention.content.text }}</p>
-              <p class="mt-1 text-xs group-hover:text-blue-800 dark:group-hover:text-blue-200">{{ mention.published | isoDateOnly }}</p>
+          <div class="comment">
+            <a href={{mention.url}}>
+              <p>{{ mention.content.text }}</p>
+              <time>{{ mention.published | isoDateOnly }}</time>
             </a>
           </div>
         </div>

src/_includes/partials/webmentions/container.liquid

@@ -1,5 +1,5 @@
 {% if webmentions %}
-  <div class="border-t border-gray-200 mt-12 pt-12 dark:border-gray-700">
+  <div class="webmentions__wrapper">
     {% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
     {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'repost-of' %}
     {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'like-of' %}

src/_includes/partials/webmentions/interaction.liquid

@@ -6,14 +6,14 @@
   {% endif %}
 {% endcapture -%}
 {% if mentions[type].size > 0 %}
-  <h2 class="text-lg md:text-xl font-black leading-tight dark:text-white">{{ title }}</h2>
-  <div class="flex flex-row items-center mt-4 mb-6">
-    <ul class="ml-3 flex flex-row flex-wrap">
+  <h2>{{ title }}</h2>
+  <div class="interaction__wrapper">
+    <ul>
       {% for mention in mentions[type] %}
-        <li class="-ml-3 inline">
+        <li>
           <a href={{mention.url}}>
-            <div class="bg-gray-900 dark:bg-white h-14 w-14 border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 hover:border-blue-800 dark:hover:border-blue-200 rounded-full overflow-hidden">
-              {% image mention.author.photo, mention.author.name %}
+            <div class="avatar__wrapper">
+              {% image mention.author.photo, mention.author.name, 'avatar__wrapper-image' %}
             </div>
           </a>
         </li>

src/_includes/partials/webmentions/links.liquid

@@ -1,10 +1,10 @@
 {% if mentions['link-to'].size > 0 %}
-  <h2 class="text-lg md:text-xl font-black leading-tight dark:text-white">Links</h2>
-  <div class="mt-2.5 flex flex-col not-prose">
-    <ul class="list-inside list-disc pl-5 md:pl-10">
+  <h2>Links</h2>
+  <div class="interaction__wrapper">
+    <ul>
       {% for mention in mentions['link-to'] %}
-        <li class="mt-1.5 mb-2">
-          <a href="{{ mention.url }}" class="text-blue-600 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-200">
+        <li>
+          <a href="{{ mention.url }}">
             {{ mention.name }}
           </a>
         </li>