From 3a09be8d3f15c43feee29ccd885e27b5b650ce01 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Tue, 27 Feb 2024 14:08:15 -0800
Subject: [PATCH] chore: colocate styles

---
 .../partials/nav/theme-toggle.liquid          |  7 ++--
 .../playing.liquid => now-playing.liquid}     |  0
 src/_includes/partials/now/topper.liquid      |  2 +-
 src/assets/scripts/components/theme-toggle.js |  1 -
 src/assets/styles/components/theme-toggle.css | 33 ++++++++++++++++
 src/assets/styles/index.css                   | 38 +------------------
 6 files changed, 39 insertions(+), 42 deletions(-)
 rename src/_includes/partials/{now/playing.liquid => now-playing.liquid} (100%)
 create mode 100644 src/assets/styles/components/theme-toggle.css

diff --git a/src/_includes/partials/nav/theme-toggle.liquid b/src/_includes/partials/nav/theme-toggle.liquid
index f2038d0e..f3ac5d99 100644
--- a/src/_includes/partials/nav/theme-toggle.liquid
+++ b/src/_includes/partials/nav/theme-toggle.liquid
@@ -1,9 +1,10 @@
 <script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
+{% capture css %}
+  {% render "../../../assets/styles/components/theme-toggle.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
 <template id="theme-toggle-template">
   <div class="theme__toggle">
-    <span class="placeholder">
-      {% tablericon "placeholder" "Toggle theme placeholder" %}
-    </span>
     <span class="light">
       {% tablericon "sun" "Toggle light theme" %}
     </span>
diff --git a/src/_includes/partials/now/playing.liquid b/src/_includes/partials/now-playing.liquid
similarity index 100%
rename from src/_includes/partials/now/playing.liquid
rename to src/_includes/partials/now-playing.liquid
diff --git a/src/_includes/partials/now/topper.liquid b/src/_includes/partials/now/topper.liquid
index 5814bcf5..7e393d4b 100644
--- a/src/_includes/partials/now/topper.liquid
+++ b/src/_includes/partials/now/topper.liquid
@@ -5,6 +5,6 @@
   <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, <a href="https://last.fm/user/coryd_" rel="noopener noreferrer">music</a>, writing, <a href="https://app.thestorygraph.com/profile/coryd" rel="noopener noreferrer">reading</a>, <a href="https://trakt.tv/users/cdransf" rel="noopener noreferrer">tv</a> and <a href="https://trakt.tv/users/cdransf" rel="noopener noreferrer">movies</a>.</p>
     {% render "partials/now/status.liquid", status:status %}
-    {% render "partials/now/playing.liquid" %}
+    {% render "partials/now-playing.liquid" %}
   </div>
 </div>
\ No newline at end of file
diff --git a/src/assets/scripts/components/theme-toggle.js b/src/assets/scripts/components/theme-toggle.js
index d552531c..8f0532d2 100644
--- a/src/assets/scripts/components/theme-toggle.js
+++ b/src/assets/scripts/components/theme-toggle.js
@@ -2,7 +2,6 @@ const themeToggleTemplate = document.createElement('template')
 
 themeToggleTemplate.innerHTML = `
   <button class="theme__toggle">
-    <span class="placeholder"></span>
     <span class="light"></span>
     <span class="dark"></span>
   </button>
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
new file mode 100644
index 00000000..fb248df5
--- /dev/null
+++ b/src/assets/styles/components/theme-toggle.css
@@ -0,0 +1,33 @@
+.theme__toggle,
+.theme__toggle svg {
+  cursor: pointer;
+}
+
+.theme__toggle:hover,
+.theme__toggle svg:hover {
+  stroke-width: var(--stroke-width-bold);
+}
+
+.theme__toggle > .light svg { stroke: var(--sun) !important; }
+.theme__toggle > .dark svg { stroke: var(--moon) !important; }
+
+.theme__toggle > .light ,
+.theme__toggle > .dark {
+  display: none;
+}
+
+.theme__dark .theme__toggle > .light {
+  display: inline;
+}
+
+.theme__dark .theme__toggle > .dark {
+  display: none;
+}
+
+.theme__light .theme__toggle > .light {
+  display: none;
+}
+
+.theme__light .theme__toggle > .dark {
+  display: inline;
+}
\ No newline at end of file
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 333b054e..2e9eb524 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -204,9 +204,7 @@ a svg:hover,
 a svg:active,
 a svg:focus,
 button:hover svg,
-button svg:hover,
-.theme__toggle:hover,
-.theme__toggle svg:hover {
+button svg:hover {
   stroke-width: var(--stroke-width-bold);
 }
 
@@ -501,40 +499,6 @@ footer nav {
   justify-content: center;
 }
 
-/* theme toggle */
-.theme__toggle,
-.theme__toggle svg {
-  cursor: pointer;
-}
-
-.theme__toggle > .light svg { stroke: var(--sun) !important; }
-.theme__toggle > .dark svg { stroke: var(--moon) !important; }
-
-.theme__toggle > .light ,
-.theme__toggle > .dark {
-  display: none;
-}
-
-:is(.theme__light, .theme__dark) .theme__toggle > .placeholder {
-  display: none;
-}
-
-.theme__dark .theme__toggle > .light {
-  display: inline;
-}
-
-.theme__dark .theme__toggle > .dark {
-  display: none;
-}
-
-.theme__light .theme__toggle > .light {
-  display: none;
-}
-
-.theme__light .theme__toggle > .dark {
-  display: inline;
-}
-
 /* screens: md */
 @media screen and (min-width: 768px) {
   .main__title {