chore: colocate styles

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>

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>

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>

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;
+}

src/assets/styles/index.css

@@ -204,9 +204,7 @@ a svg:hover,
 a svg:active,
 a svg:focus,
 button:hover svg,
-button svg:hover,
+button svg:hover {
-.theme__toggle:hover,
-.theme__toggle 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 {