From 8108dfc25ff840635baea338e0fe8d7616964b45 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cory.dransfeldt@gmail.com>
Date: Fri, 25 Aug 2023 09:18:03 -0700
Subject: [PATCH] chore: organization + loading

---
 src/_includes/partials/now/playing.liquid                | 9 +++++++++
 .../partials/{now-topper.liquid => now/topper.liquid}    | 8 +-------
 src/index.html                                           | 2 +-
 tailwind.css                                             | 9 ++-------
 4 files changed, 13 insertions(+), 15 deletions(-)
 create mode 100644 src/_includes/partials/now/playing.liquid
 rename src/_includes/partials/{now-topper.liquid => now/topper.liquid} (75%)

diff --git a/src/_includes/partials/now/playing.liquid b/src/_includes/partials/now/playing.liquid
new file mode 100644
index 00000000..ba1baf0a
--- /dev/null
+++ b/src/_includes/partials/now/playing.liquid
@@ -0,0 +1,9 @@
+<p id="now-playing" class="mb-0 flex flex-row items-start md:items-center">
+  <span id="now-playing-loading" class="icon--spin">
+    {% tablericon 'loader-2' 'Loading...' %}
+  </span>
+  <span id="now-playing-display">
+    <span id="now-playing-emoji" class="pt-1 md:pt-0 mr-1"></span>
+    <span id="now-playing-content"></span>
+  </span>
+</p>
\ No newline at end of file
diff --git a/src/_includes/partials/now-topper.liquid b/src/_includes/partials/now/topper.liquid
similarity index 75%
rename from src/_includes/partials/now-topper.liquid
rename to src/_includes/partials/now/topper.liquid
index 376f97af..1b7a2a7e 100644
--- a/src/_includes/partials/now-topper.liquid
+++ b/src/_includes/partials/now/topper.liquid
@@ -15,12 +15,6 @@
       <span class="pt-1 md:pt-0 mr-1">{{ status.emoji }}</span>
       <span>{{ status.content }}</span>
     </p>
-    <p id="now-playing" class="mb-0 flex flex-row items-start md:items-center">
-      <span id="now-playing-loading" class="text--blur">Loading...</span>
-      <span id="now-playing-display">
-        <span id="now-playing-emoji" class="pt-1 md:pt-0 mr-1"></span>
-        <span id="now-playing-content"></span>
-      </span>
-    </p>
+    {% include "partials/now/playing.liquid" %}
   </div>
 </div>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 23707673..c7dcbd67 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,7 +22,7 @@ meta:
     src: https://coryd.dev/assets/img/avatar.webp
 ---
 
-{% if pagination.pageNumber == 0 %}{% include "partials/now-topper.liquid" %}{% endif %} {% for post in pagination.items %} {% if post.data.published %}
+{% if pagination.pageNumber == 0 %}{% include "partials/now/topper.liquid" %}{% endif %} {% for post in pagination.items %} {% if post.data.published %}
 <article class="h-entry">
   <div
     class="mb-8 border-b border-gray-200 pb-4 text-gray-800 dark:border-gray-700 dark:text-white"
diff --git a/tailwind.css b/tailwind.css
index 8a558aab..6ca43746 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -174,9 +174,8 @@ code[class*=language-], pre[class*=language-] {
   color: theme(colors.pink.500)
 }
 
-.text--blur {
-  color: transparent;
-  text-shadow: 0 0 5px rgba(0,0,0,0.5);
+.icon--spin > svg {
+  @apply animate-spin;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -214,8 +213,4 @@ code[class*=language-], pre[class*=language-] {
     color: theme(colors.gray.900);
     background: theme(colors.purple.400);
   }
-  
-  .text--blur {
-    text-shadow: 0 0 5px rgba(255,255,255,0.5);
-  }
 }
\ No newline at end of file